diff --git a/packages/component-review/src/components/Decision.js b/packages/component-review/src/components/Decision.js
index f9bd6dc45d3784eaf72b6ed4ac0fb1c649c4beb5..e106241058cc50e4ee11f2b464ef4d97cbe36455 100644
--- a/packages/component-review/src/components/Decision.js
+++ b/packages/component-review/src/components/Decision.js
@@ -6,37 +6,41 @@ import { withJournal } from 'xpub-journal'
import { required } from '../lib/validators'
import classes from './Decision.local.scss'
-const Decision = ({journal, decision, valid, handleSubmit, uploadFile}) => (
- <form onSubmit={handleSubmit}>
- <div className={classes.section}>
- <ValidatedField
- name="note"
- validate={[required]}
- component={input =>
- <NoteEditor
- placeholder="Enter your decision…"
- title="Decision"
- {...input}/>
- }/>
- </div>
+const Decision = ({journal, decision, valid, handleSubmit, uploadFile}) => {
+ const NoteInput = input =>
+ <NoteEditor
+ placeholder="Enter your decision…"
+ title="Decision"
+ {...input}/>
- <div className={classes.section}>
- <ValidatedField
- name="recommendation"
- validate={[required]}
- component={input =>
- <RadioGroup
- inline
- options={journal.recommendations}
- {...input}/>
- }/>
- </div>
+ const RecommendationInput = input =>
+ <RadioGroup
+ inline
+ options={journal.recommendations}
+ {...input}/>
- <div>
- {/*<Button type="button" onClick={handleSave}>Save</Button>*/}
- <Button type="submit" primary>Submit</Button>
- </div>
- </form>
-)
+ return (
+ <form onSubmit={handleSubmit}>
+ <div className={classes.section}>
+ <ValidatedField
+ name="note"
+ validate={[required]}
+ component={NoteInput}/>
+ </div>
+
+ <div className={classes.section}>
+ <ValidatedField
+ name="recommendation"
+ validate={[required]}
+ component={RecommendationInput}/>
+ </div>
+
+ <div>
+ {/*<Button type="button" onClick={handleSave}>Save</Button>*/}
+ <Button type="submit" primary>Submit</Button>
+ </div>
+ </form>
+ )
+}
export default withJournal(Decision)
diff --git a/packages/component-review/src/components/Review.js b/packages/component-review/src/components/Review.js
index fa802d4e21d5601a85630a9186fbd39167c8f42a..d356bcbf9e0a66eb7b492bc2c52a491fe37914a0 100644
--- a/packages/component-review/src/components/Review.js
+++ b/packages/component-review/src/components/Review.js
@@ -6,37 +6,41 @@ import { withJournal } from 'xpub-journal'
import { required } from '../lib/validators'
import classes from './Review.local.scss'
-const Review = ({ journal, review, valid, handleSubmit, uploadFile }) => (
- <form onSubmit={handleSubmit}>
- <div className={classes.section}>
- <ValidatedField
- name="note"
- validate={[required]}
- component={input =>
- <NoteEditor
- placeholder="Enter your review…"
- title="Review"
- {...input}/>
- }/>
- </div>
+const Review = ({ journal, review, valid, handleSubmit, uploadFile }) => {
+ const NoteInput = input =>
+ <NoteEditor
+ placeholder="Enter your review…"
+ title="Review"
+ {...input}/>
- <div className={classes.section}>
- <ValidatedField
- name="recommendation"
- validate={[required]}
- component={input =>
- <RadioGroup
- inline
- options={journal.recommendations}
- {...input}/>
- }/>
- </div>
+ const RecommendationInput = input =>
+ <RadioGroup
+ inline
+ options={journal.recommendations}
+ {...input}/>
- <div>
- {/*<Button type="button" onClick={handleSave}>Save</Button>*/}
- <Button type="submit" primary>Submit</Button>
- </div>
- </form>
-)
+ return (
+ <form onSubmit={handleSubmit}>
+ <div className={classes.section}>
+ <ValidatedField
+ name="note"
+ validate={[required]}
+ component={NoteInput}/>
+ </div>
+
+ <div className={classes.section}>
+ <ValidatedField
+ name="recommendation"
+ validate={[required]}
+ component={RecommendationInput}/>
+ </div>
+
+ <div>
+ {/*<Button type="button" onClick={handleSave}>Save</Button>*/}
+ <Button type="submit" primary>Submit</Button>
+ </div>
+ </form>
+ )
+}
export default withJournal(Review)
diff --git a/packages/component-submit/src/components/Declarations.js b/packages/component-submit/src/components/Declarations.js
index 6ab6d3f2e099eb4b0d8ffaa606064f3526dac389..be1899a95e75cace21dc6bc1d730dd73546bbf93 100644
--- a/packages/component-submit/src/components/Declarations.js
+++ b/packages/component-submit/src/components/Declarations.js
@@ -3,30 +3,34 @@ import classnames from 'classnames'
import { FormSection } from 'redux-form'
import { ValidatedField, YesOrNo } from 'xpub-ui'
import { withJournal } from 'xpub-journal'
-import { required, minChars } from '../lib/validators'
+import { required } from '../lib/validators'
import classes from './Declarations.local.scss'
-const Declarations = ({ journal }) => (
- <FormSection name="declarations">
- {journal.declarations.questions.map(question => (
- <div
- key={question.id}
- id={`declarations.${question.id}`}
- className={classnames(classes.section, classes.spread)}>
- <div className={classes.legend}>
- { question.legend }
- </div>
+const Declarations = ({ journal }) => {
+ const DeclarationInput = input => (
+ <YesOrNo inline={true} {...input}/>
+ )
+
+ return (
+ <FormSection name="declarations">
+ {journal.declarations.questions.map(question => (
+ <div
+ key={question.id}
+ id={`declarations.${question.id}`}
+ className={classnames(classes.section, classes.spread)}>
+ <div className={classes.legend}>
+ {question.legend}
+ </div>
- <ValidatedField
- name={question.id}
- required
- validate={[required]}
- component={input =>
- <YesOrNo inline={true} {...input}/>
- }/>
- </div>
- ))}
- </FormSection>
-)
+ <ValidatedField
+ name={question.id}
+ required
+ validate={[required]}
+ component={DeclarationInput}/>
+ </div>
+ ))}
+ </FormSection>
+ )
+}
export default withJournal(Declarations)
diff --git a/packages/component-submit/src/components/Metadata.js b/packages/component-submit/src/components/Metadata.js
index d02f3752157ff35f941e8a5d3ba0ed5d40673149..0d36ebcbc72d9c35d38338d410d08ab9494724e7 100644
--- a/packages/component-submit/src/components/Metadata.js
+++ b/packages/component-submit/src/components/Metadata.js
@@ -12,94 +12,102 @@ const minChars100 = minChars(100)
const maxChars500 = maxChars(500)
const maxChars5000 = maxChars(5000)
-const Metadata = ({ journal }) => (
- <FormSection name="metadata">
- <div className={classes.section} id="metadata.title">
- <ValidatedField
- name="title"
- required
- validate={[minChars20, maxChars500]}
- component={input =>
- <TitleEditor
- placeholder="Enter the title…"
- title="Title"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.section} id="metadata.abstract">
- <ValidatedField
- name="abstract"
- required
- validate={[minChars100, maxChars5000]}
- component={input =>
- <AbstractEditor
- title="Abstract"
- placeholder="Enter the abstract…"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.section} id="metadata.authors">
- <div className={classes.label}>Authors</div>
-
- <ValidatedField
- name="authors"
- required
- format={join()}
- parse={split()}
- validate={[minSize1]}
- component={input =>
- <TextField
- placeholder="Enter author names…"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.section} id="metadata.keywords">
- <div className={classes.label}>Keywords</div>
-
- <ValidatedField
- name="keywords"
- required
- format={join()}
- parse={split()}
- validate={[minSize1]}
- component={input =>
- <TextField
- placeholder="Enter keywords…"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.section} id="metadata.articleType">
- <div className={classes.label}>Type of article</div>
-
- <ValidatedField
- name="articleType"
- required
- validate={[required]}
- component={input =>
- <Menu
- options={journal.articleTypes}
- {...input}/>
- }/>
- </div>
-
- <div className={classes.section} id="metadata.articleSection">
- <div className={classes.label}>Section</div>
-
- <ValidatedField
- name="articleSection"
- required
- validate={[required]}
- component={input =>
- <CheckboxGroup
- options={journal.articleSections}
- {...input}/>
- }/>
- </div>
- </FormSection>
-)
+const Metadata = ({ journal }) => {
+ const TitleInput = input =>
+ <TitleEditor
+ placeholder="Enter the title…"
+ title="Title"
+ {...input}/>
+
+ const AbstractInput = input =>
+ <AbstractEditor
+ title="Abstract"
+ placeholder="Enter the abstract…"
+ {...input}/>
+
+ const AuthorsInput = input =>
+ <TextField
+ placeholder="Enter author names…"
+ {...input}/>
+
+ const KeywordsInput = input =>
+ <TextField
+ placeholder="Enter keywords…"
+ {...input}/>
+
+ const ArticleTypeInput = input =>
+ <Menu
+ options={journal.articleTypes}
+ {...input}/>
+
+ const ArticleSectionInput = input =>
+ <CheckboxGroup
+ options={journal.articleSections}
+ {...input}/>
+
+ return (
+ <FormSection name="metadata">
+ <div className={classes.section} id="metadata.title">
+ <ValidatedField
+ name="title"
+ required
+ validate={[minChars20, maxChars500]}
+ component={TitleInput}/>
+ </div>
+
+ <div className={classes.section} id="metadata.abstract">
+ <ValidatedField
+ name="abstract"
+ required
+ validate={[minChars100, maxChars5000]}
+ component={AbstractInput}/>
+ </div>
+
+ <div className={classes.section} id="metadata.authors">
+ <div className={classes.label}>Authors</div>
+
+ <ValidatedField
+ name="authors"
+ required
+ format={join()}
+ parse={split()}
+ validate={[minSize1]}
+ component={AuthorsInput}/>
+ </div>
+
+ <div className={classes.section} id="metadata.keywords">
+ <div className={classes.label}>Keywords</div>
+
+ <ValidatedField
+ name="keywords"
+ required
+ format={join()}
+ parse={split()}
+ validate={[minSize1]}
+ component={KeywordsInput}/>
+ </div>
+
+ <div className={classes.section} id="metadata.articleType">
+ <div className={classes.label}>Type of article</div>
+
+ <ValidatedField
+ name="articleType"
+ required
+ validate={[required]}
+ component={ArticleTypeInput}/>
+ </div>
+
+ <div className={classes.section} id="metadata.articleSection">
+ <div className={classes.label}>Section</div>
+
+ <ValidatedField
+ name="articleSection"
+ required
+ validate={[required]}
+ component={ArticleSectionInput}/>
+ </div>
+ </FormSection>
+ )
+}
export default withJournal(Metadata)
diff --git a/packages/component-submit/src/components/Notes.js b/packages/component-submit/src/components/Notes.js
index 03ee89be4c82f34d4f2f2a894d447da1b7d8c57f..37f9174e1439b5986b9e70cf4548f189d65a1c33 100644
--- a/packages/component-submit/src/components/Notes.js
+++ b/packages/component-submit/src/components/Notes.js
@@ -5,31 +5,35 @@ import { ValidatedField } from 'xpub-ui'
import { required } from '../lib/validators'
import classes from './Metadata.local.scss'
-const Notes = () => (
- <FormSection name="notes">
- <div className={classes.section} id="notes.fundingAcknowledgement">
- <ValidatedField
- name="fundingAcknowledgement"
- validate={[required]}
- component={input =>
- <NoteEditor
- placeholder="Enter an acknowledgment…"
- title="Funding body acknowledgement"
- {...input}/>
- }/>
- </div>
+const Notes = () => {
+ const FundingInput = input =>
+ <NoteEditor
+ placeholder="Enter an acknowledgment…"
+ title="Funding body acknowledgement"
+ {...input}/>
- <div className={classes.section} id="notes.specialInstructions">
- <ValidatedField
- name="specialInstructions"
- component={input =>
- <NoteEditor
- placeholder="Enter instructions for the editor…"
- title="Special instructions (confidential)"
- {...input}/>
- }/>
- </div>
- </FormSection>
-)
+ const InstructionsInput = input =>
+ <NoteEditor
+ placeholder="Enter instructions for the editor…"
+ title="Special instructions (confidential)"
+ {...input}/>
+
+ return (
+ <FormSection name="notes">
+ <div className={classes.section} id="notes.fundingAcknowledgement">
+ <ValidatedField
+ name="fundingAcknowledgement"
+ validate={[required]}
+ component={FundingInput}/>
+ </div>
+
+ <div className={classes.section} id="notes.specialInstructions">
+ <ValidatedField
+ name="specialInstructions"
+ component={InstructionsInput}/>
+ </div>
+ </FormSection>
+ )
+}
export default Notes
diff --git a/packages/component-submit/src/components/Suggestions.js b/packages/component-submit/src/components/Suggestions.js
index dbde9c2f6ea39e0cef53bba6fceb2e419664f06d..0e6886c72879c187bedbb6f794148f83612d58b6 100644
--- a/packages/component-submit/src/components/Suggestions.js
+++ b/packages/component-submit/src/components/Suggestions.js
@@ -7,80 +7,86 @@ import classes from './Suggestions.local.scss'
const joinComma = join(',')
const splitComma = split(',')
-const Suggestions = () => (
- <FormSection name="suggestions">
- <div className={classes.section} id="suggestions.reviewers">
- <FormSection name="reviewers">
- <div className={classes.legend}>
- Suggested or opposed reviewers
- </div>
-
- <div className={classes.inline}>
- <div className={classes.legend}>Suggested reviewers</div>
-
- <ValidatedField
- name="suggested"
- format={joinComma}
- parse={splitComma}
- component={input =>
- <TextField
- placeholder="Add reviewer names"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.inline}>
- <div className={classes.legend}>Opposed reviewers</div>
-
- <ValidatedField
- name="opposed"
- format={joinComma}
- parse={splitComma}
- component={input =>
- <TextField
- placeholder="Add reviewer names"
- {...input}/>
- }/>
- </div>
- </FormSection>
- </div>
-
- <div className={classes.section} id="suggestions.editors">
- <FormSection name="editors">
- <div className={classes.legend}>
- Suggested or opposed editors
- </div>
-
- <div className={classes.inline}>
- <div className={classes.legend}>Suggested editors</div>
-
- <ValidatedField
- name="suggested"
- format={joinComma}
- parse={splitComma}
- component={input =>
- <TextField
- placeholder="Add editor names"
- {...input}/>
- }/>
- </div>
-
- <div className={classes.inline}>
- <div className={classes.legend}>Opposed editors</div>
-
- <ValidatedField
- name="opposed"
- format={joinComma}
- parse={splitComma}
- component={input =>
- <TextField
- placeholder="Add editor names"
- {...input}/>
- }/>
- </div>
- </FormSection>
- </div>
- </FormSection>
-)
+const Suggestions = () => {
+ const SuggestedReviewerInput = input =>
+ <TextField
+ placeholder="Add reviewer names"
+ {...input}/>
+
+ const OpposedReviewerInput = input =>
+ <TextField
+ placeholder="Add reviewer names"
+ {...input}/>
+
+ const SuggestedEditorInput = input =>
+ <TextField
+ placeholder="Add editor names"
+ {...input}/>
+
+ const OpposedEditorInput = input =>
+ <TextField
+ placeholder="Add editor names"
+ {...input}/>
+
+ return (
+ <FormSection name="suggestions">
+ <div className={classes.section} id="suggestions.reviewers">
+ <FormSection name="reviewers">
+ <div className={classes.legend}>
+ Suggested or opposed reviewers
+ </div>
+
+ <div className={classes.inline}>
+ <div className={classes.legend}>Suggested reviewers</div>
+
+ <ValidatedField
+ name="suggested"
+ format={joinComma}
+ parse={splitComma}
+ component={SuggestedReviewerInput}/>
+ </div>
+
+ <div className={classes.inline}>
+ <div className={classes.legend}>Opposed reviewers</div>
+
+ <ValidatedField
+ name="opposed"
+ format={joinComma}
+ parse={splitComma}
+ component={OpposedReviewerInput}/>
+ </div>
+ </FormSection>
+ </div>
+
+ <div className={classes.section} id="suggestions.editors">
+ <FormSection name="editors">
+ <div className={classes.legend}>
+ Suggested or opposed editors
+ </div>
+
+ <div className={classes.inline}>
+ <div className={classes.legend}>Suggested editors</div>
+
+ <ValidatedField
+ name="suggested"
+ format={joinComma}
+ parse={splitComma}
+ component={SuggestedEditorInput}/>
+ </div>
+
+ <div className={classes.inline}>
+ <div className={classes.legend}>Opposed editors</div>
+
+ <ValidatedField
+ name="opposed"
+ format={joinComma}
+ parse={splitComma}
+ component={OpposedEditorInput}/>
+ </div>
+ </FormSection>
+ </div>
+ </FormSection>
+ )
+}
export default Suggestions
diff --git a/packages/component-submit/src/components/SupplementaryFiles.js b/packages/component-submit/src/components/SupplementaryFiles.js
index c0e76bab5e432a8461a0a9ce0a6637e266e1bd02..95875b1194ae14bed9cbeceb3746e6ac489dbca1 100644
--- a/packages/component-submit/src/components/SupplementaryFiles.js
+++ b/packages/component-submit/src/components/SupplementaryFiles.js
@@ -3,22 +3,26 @@ import { FormSection } from 'redux-form'
import { Files, ValidatedField } from 'xpub-ui'
import classes from './Metadata.local.scss'
-const SupplementaryFiles = ({ uploadFile }) => (
- <FormSection name="files">
- <div className={classes.section} id="files.supplementary">
- <div
- className={classes.label}
- htmlFor="supplementary">Upload supplementary materials</div>
+const SupplementaryFiles = ({ uploadFile }) => {
+ const FileInput = input =>
+ <Files
+ uploadFile={uploadFile}
+ {...input}/>
- <ValidatedField
- name="supplementary"
- component={input =>
- <Files
- uploadFile={uploadFile}
- {...input}/>
- }/>
- </div>
- </FormSection>
-)
+ return (
+ <FormSection name="files">
+ <div className={classes.section} id="files.supplementary">
+ <div
+ className={classes.label}
+ htmlFor="supplementary">Upload supplementary materials
+ </div>
+
+ <ValidatedField
+ name="supplementary"
+ component={FileInput}/>
+ </div>
+ </FormSection>
+ )
+}
export default SupplementaryFiles