From cbbf931e060afeb918286073e9bb5945cf90a9db Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Thu, 13 Aug 2020 20:35:25 +0200
Subject: [PATCH] feat: add form submission feedback for decisions
---
.../src/components/DecisionPage.js | 37 +++++-----
.../src/components/decision/DecisionForm.js | 67 ++++++++++++-------
.../component-review/src/components/style.js | 6 ++
cypress/integration/decision_spec.js | 1 +
4 files changed, 67 insertions(+), 44 deletions(-)
diff --git a/app/components/component-review/src/components/DecisionPage.js b/app/components/component-review/src/components/DecisionPage.js
index 09ba62e323..cb4a9d57ab 100644
--- a/app/components/component-review/src/components/DecisionPage.js
+++ b/app/components/component-review/src/components/DecisionPage.js
@@ -178,6 +178,8 @@ const decisionSections = ({
isValid,
updateReview,
uploadFile,
+ isSubmitting,
+ submitCount,
}) => {
const decisionSections = []
const manuscriptVersions = manuscript.manuscriptVersions || []
@@ -215,7 +217,9 @@ const decisionSections = ({
<AdminSection key="decision-form">
<DecisionForm
handleSubmit={handleSubmit}
+ isSubmitting={isSubmitting}
isValid={isValid}
+ submitCount={submitCount}
updateReview={updateReview}
uploadFile={uploadFile}
/>
@@ -372,13 +376,22 @@ const DecisionPage = ({ match }) => {
}
// const editorSectionsResult = editorSections({ manuscript })
+ const sections = props =>
+ decisionSections({
+ manuscript,
+ handleSubmit: props.handleSubmit,
+ isValid: props.isValid,
+ updateReview,
+ isSubmitting: props.isSubmitting,
+ submitCount: props.submitCount,
+ })
+
return (
<Columns>
<Manuscript>
<Formik
displayName="decision"
- enableReinitialize
- initialValues={existingReview}
+ initialValues={reviewOrInitial(data.manuscript)}
// isInitialValid={({ manuscript }) => {
// const rv =
// manuscript.reviews.find(review => review.isDecision) || {}
@@ -387,7 +400,7 @@ const DecisionPage = ({ match }) => {
// return isCommented && isRecommendation
// }}
- onSubmit={() => {
+ onSubmit={() =>
makeDecision({
variables: {
id: manuscript.id,
@@ -395,7 +408,7 @@ const DecisionPage = ({ match }) => {
.recommendation,
},
})
- }}
+ }
// validate={(values, props) => {
// const errors = {}
// if (values.decisionComment?.content === '') {
@@ -419,20 +432,8 @@ const DecisionPage = ({ match }) => {
title="Versions"
/> */}
<Tabs
- activeKey={
- decisionSections({
- manuscript,
- handleSubmit: props.handleSubmit,
- isValid: props.isValid,
- updateReview,
- })[decisionSections.length - 1].key
- }
- sections={decisionSections({
- manuscript,
- handleSubmit: props.handleSubmit,
- isValid: props.isValid,
- updateReview,
- })}
+ activeKey={sections(props)[decisionSections.length - 1].key}
+ sections={sections(props)}
title="Versions"
/>
</>
diff --git a/app/components/component-review/src/components/decision/DecisionForm.js b/app/components/component-review/src/components/decision/DecisionForm.js
index 6a501deada..b418778291 100644
--- a/app/components/component-review/src/components/decision/DecisionForm.js
+++ b/app/components/component-review/src/components/decision/DecisionForm.js
@@ -22,6 +22,7 @@ import {
SectionRowGrid,
SectionRow,
SectionAction,
+ FormStatus,
} from '../style'
const NoteDecision = ({ updateReview }) => (
@@ -29,7 +30,6 @@ const NoteDecision = ({ updateReview }) => (
<Field key="noteField" name="decisionComment">
{formikBag => (
<>
- <p>NoteDecision: {JSON.stringify(formikBag.form.values)}</p>
<NoteInput updateReview={updateReview} {...formikBag} />
<FilesUpload
containerId={formikBag.field.value?.id}
@@ -123,31 +123,46 @@ const RecommendationInput = ({
)
}
-const DecisionForm = ({ handleSubmit, updateReview, isValid }) => (
- <Container key="decisionform">
- <form onSubmit={handleSubmit}>
- <SectionHeader>
- <Title>Decision</Title>
- </SectionHeader>
- <SectionRow key="note">
- <NoteDecision updateReview={updateReview} />
- </SectionRow>
- <SectionRowGrid>
- <Field
- component={RecommendationInput}
- name="recommendation"
- updateReview={updateReview}
- validate={required}
- />
+const DecisionForm = ({
+ handleSubmit,
+ updateReview,
+ isValid,
+ isSubmitting,
+ submitCount,
+}) => {
+ let status = null
+ if (isSubmitting) {
+ status = 'Your decision is submitting...'
+ } else if (submitCount) {
+ status = 'Your decision has been saved.'
+ }
- <SectionAction key="submit">
- <Button disabled={!isValid} primary type="submit">
- Submit
- </Button>
- </SectionAction>
- </SectionRowGrid>
- </form>
- </Container>
-)
+ return (
+ <Container key="decisionform">
+ <form onSubmit={handleSubmit}>
+ <SectionHeader>
+ <Title>Decision</Title>
+ </SectionHeader>
+ <SectionRow key="note">
+ <NoteDecision updateReview={updateReview} />
+ </SectionRow>
+ <SectionRowGrid>
+ <Field
+ component={RecommendationInput}
+ name="recommendation"
+ updateReview={updateReview}
+ validate={required}
+ />
+ <FormStatus>{status}</FormStatus>
+ <SectionAction key="submit">
+ <Button disabled={!isValid || isSubmitting} primary type="submit">
+ Submit
+ </Button>
+ </SectionAction>
+ </SectionRowGrid>
+ </form>
+ </Container>
+ )
+}
export default DecisionForm
diff --git a/app/components/component-review/src/components/style.js b/app/components/component-review/src/components/style.js
index c4b49a22d7..2d0f1ca3ad 100644
--- a/app/components/component-review/src/components/style.js
+++ b/app/components/component-review/src/components/style.js
@@ -77,6 +77,12 @@ export const Container = styled.div`
}
`
+export const FormStatus = styled.div`
+ line-height: ${grid(5)};
+ text-align: center;
+ color: ${th('colorSecondary')};
+`
+
export {
Title,
SectionHeader,
diff --git a/cypress/integration/decision_spec.js b/cypress/integration/decision_spec.js
index a5137e8255..8780bd7206 100644
--- a/cypress/integration/decision_spec.js
+++ b/cypress/integration/decision_spec.js
@@ -12,6 +12,7 @@ describe('Completing a review', () => {
cy.contains('Accept').click()
cy.contains('Submit').click()
+ cy.contains('Your decision has been saved.')
cy.visit('/journal/dashboard')
cy.contains('Accepted')
--
GitLab