From 85a050a0acb4c1cb36238b026fa656e5719a7962 Mon Sep 17 00:00:00 2001
From: Tamlyn Rhodes <tamlyn@tamlyn.org>
Date: Tue, 17 Apr 2018 17:23:02 +0100
Subject: [PATCH] feat: add progress bar to submission form
Also organise the submission form files and routes.
---
app/app.js | 2 +-
app/components/index.js | 8 -------
.../{ => AuthorDetails}/AuthorDetails.js | 5 ++++-
.../{ => AuthorDetails}/AuthorDetails.md | 0
.../{ => AuthorDetails}/AuthorDetailsPage.js | 0
.../AuthorDetailsSchema.js | 0
.../{ => FileUploads}/FileUploads.js | 7 +++++--
.../{ => FileUploads}/FileUploads.md | 0
.../{ => FileUploads}/FileUploadsPage.js | 0
.../ManuscriptMetadataPage.js | 5 ++++-
app/components/submission/ProgressBar.js | 21 +++++++++++++++++++
.../ReviewerSuggestions.js | 7 +++++--
.../ReviewerSuggestions.md | 0
.../ReviewerSuggestionsPage.js | 0
.../ReviewerSuggestionsSchema.js | 0
app/components/submission/SubmissionPage.js | 20 ++++++++++++++++++
app/routes.js | 20 +++---------------
17 files changed, 63 insertions(+), 32 deletions(-)
rename app/components/submission/{ => AuthorDetails}/AuthorDetails.js (94%)
rename app/components/submission/{ => AuthorDetails}/AuthorDetails.md (100%)
rename app/components/submission/{ => AuthorDetails}/AuthorDetailsPage.js (100%)
rename app/components/submission/{ => AuthorDetails}/AuthorDetailsSchema.js (100%)
rename app/components/submission/{ => FileUploads}/FileUploads.js (81%)
rename app/components/submission/{ => FileUploads}/FileUploads.md (100%)
rename app/components/submission/{ => FileUploads}/FileUploadsPage.js (100%)
rename app/components/submission/{ => ManuscriptMetadata}/ManuscriptMetadataPage.js (71%)
create mode 100644 app/components/submission/ProgressBar.js
rename app/components/submission/{ => ReviewerSuggestions}/ReviewerSuggestions.js (87%)
rename app/components/submission/{ => ReviewerSuggestions}/ReviewerSuggestions.md (100%)
rename app/components/submission/{ => ReviewerSuggestions}/ReviewerSuggestionsPage.js (100%)
rename app/components/submission/{ => ReviewerSuggestions}/ReviewerSuggestionsSchema.js (100%)
create mode 100644 app/components/submission/SubmissionPage.js
diff --git a/app/app.js b/app/app.js
index 1dc096d..90a0a19 100644
--- a/app/app.js
+++ b/app/app.js
@@ -9,7 +9,7 @@ import { configureStore, Root } from 'pubsweet-client'
import theme from '@pubsweet/elife-theme'
import Routes from './routes'
-import * as AuthorDetailsSchema from './components/submission/AuthorDetailsSchema'
+import * as AuthorDetailsSchema from './components/submission/AuthorDetails/AuthorDetailsSchema'
theme.space = [
0,
diff --git a/app/components/index.js b/app/components/index.js
index 7f08b3e..e83465d 100644
--- a/app/components/index.js
+++ b/app/components/index.js
@@ -4,11 +4,3 @@ export {
} from './global/AuthenticatedComponent'
export { default as Dashboard } from './dashboard/Dashboard'
export { default as LoginPage } from './login/LoginPage'
-export { default as AuthorDetailsPage } from './submission/AuthorDetailsPage'
-export { default as FileUploadsPage } from './submission/FileUploadsPage'
-export {
- default as ManuscriptMetadataPage,
-} from './submission/ManuscriptMetadataPage'
-export {
- default as ReviewerSuggestionsPage,
-} from './submission/ReviewerSuggestionsPage'
diff --git a/app/components/submission/AuthorDetails.js b/app/components/submission/AuthorDetails/AuthorDetails.js
similarity index 94%
rename from app/components/submission/AuthorDetails.js
rename to app/components/submission/AuthorDetails/AuthorDetails.js
index efa02b9..7fb8681 100644
--- a/app/components/submission/AuthorDetails.js
+++ b/app/components/submission/AuthorDetails/AuthorDetails.js
@@ -2,9 +2,10 @@ import React from 'react'
import { Flex, Box } from 'grid-styled'
import { Button, Heading, H1 } from '@pubsweet/ui'
-import ValidatedField from '../ui/atoms/ValidatedField'
+import ValidatedField from '../../ui/atoms/ValidatedField'
import { emptyAssignee } from './AuthorDetailsSchema'
+import ProgressBar from '../ProgressBar'
class AuthorDetails extends React.Component {
constructor() {
@@ -28,6 +29,8 @@ class AuthorDetails extends React.Component {
return (
<form noValidate onSubmit={handleSubmit}>
+ <ProgressBar currentStep={0} />
+
<H1>Are you handling this submission?</H1>
<Flex>
diff --git a/app/components/submission/AuthorDetails.md b/app/components/submission/AuthorDetails/AuthorDetails.md
similarity index 100%
rename from app/components/submission/AuthorDetails.md
rename to app/components/submission/AuthorDetails/AuthorDetails.md
diff --git a/app/components/submission/AuthorDetailsPage.js b/app/components/submission/AuthorDetails/AuthorDetailsPage.js
similarity index 100%
rename from app/components/submission/AuthorDetailsPage.js
rename to app/components/submission/AuthorDetails/AuthorDetailsPage.js
diff --git a/app/components/submission/AuthorDetailsSchema.js b/app/components/submission/AuthorDetails/AuthorDetailsSchema.js
similarity index 100%
rename from app/components/submission/AuthorDetailsSchema.js
rename to app/components/submission/AuthorDetails/AuthorDetailsSchema.js
diff --git a/app/components/submission/FileUploads.js b/app/components/submission/FileUploads/FileUploads.js
similarity index 81%
rename from app/components/submission/FileUploads.js
rename to app/components/submission/FileUploads/FileUploads.js
index a303f9b..d678ee2 100644
--- a/app/components/submission/FileUploads.js
+++ b/app/components/submission/FileUploads/FileUploads.js
@@ -1,11 +1,14 @@
import React from 'react'
import { Flex, Box } from 'grid-styled'
import { H1 } from '@pubsweet/ui'
-import FileUpload from '../ui/atoms/FileUpload'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import FileUpload from '../../ui/atoms/FileUpload'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
const FileUploads = () => (
<React.Fragment>
+ <ProgressBar currentStep={1} />
+
<H1>Upload your manuscript and cover letter</H1>
<Flex flexDirection="column">
diff --git a/app/components/submission/FileUploads.md b/app/components/submission/FileUploads/FileUploads.md
similarity index 100%
rename from app/components/submission/FileUploads.md
rename to app/components/submission/FileUploads/FileUploads.md
diff --git a/app/components/submission/FileUploadsPage.js b/app/components/submission/FileUploads/FileUploadsPage.js
similarity index 100%
rename from app/components/submission/FileUploadsPage.js
rename to app/components/submission/FileUploads/FileUploadsPage.js
diff --git a/app/components/submission/ManuscriptMetadataPage.js b/app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
similarity index 71%
rename from app/components/submission/ManuscriptMetadataPage.js
rename to app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
index e13ed46..233c78d 100644
--- a/app/components/submission/ManuscriptMetadataPage.js
+++ b/app/components/submission/ManuscriptMetadata/ManuscriptMetadataPage.js
@@ -1,9 +1,12 @@
import React from 'react'
import { H1 } from '@pubsweet/ui'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
export default () => (
<React.Fragment>
+ <ProgressBar currentStep={2} />
+
<H1>Help us get your work seen by the right people</H1>
<ButtonLink primary to="/submit/suggestions">
diff --git a/app/components/submission/ProgressBar.js b/app/components/submission/ProgressBar.js
new file mode 100644
index 0000000..afec1ef
--- /dev/null
+++ b/app/components/submission/ProgressBar.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Steps } from '@pubsweet/ui'
+import { Box } from 'grid-styled'
+import PropTypes from 'prop-types'
+
+const ProgressBar = ({ currentStep }) => (
+ <Box mx="auto" width={500}>
+ <Steps currentStep={currentStep}>
+ <Steps.Step />
+ <Steps.Step />
+ <Steps.Step />
+ <Steps.Step />
+ </Steps>
+ </Box>
+)
+
+ProgressBar.propTypes = {
+ currentStep: PropTypes.number.isRequired,
+}
+
+export default ProgressBar
diff --git a/app/components/submission/ReviewerSuggestions.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js
similarity index 87%
rename from app/components/submission/ReviewerSuggestions.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js
index 7d128c4..e2e9cfa 100644
--- a/app/components/submission/ReviewerSuggestions.js
+++ b/app/components/submission/ReviewerSuggestions/ReviewerSuggestions.js
@@ -2,11 +2,14 @@ import React from 'react'
import { Flex, Box } from 'grid-styled'
import { Button, H1 } from '@pubsweet/ui'
-import ValidatedField from '../ui/atoms/ValidatedField'
-import ButtonLink from '../ui/atoms/ButtonLink'
+import ValidatedField from '../../ui/atoms/ValidatedField'
+import ButtonLink from '../../ui/atoms/ButtonLink'
+import ProgressBar from '../ProgressBar'
const ReviewerSuggestions = ({ handleSubmit }) => (
<form noValidate onSubmit={handleSubmit}>
+ <ProgressBar currentStep={3} />
+
<H1>Who would you like to review your work?</H1>
<ValidatedField label="Suggested editor(s)" name="suggestedEditors" />
diff --git a/app/components/submission/ReviewerSuggestions.md b/app/components/submission/ReviewerSuggestions/ReviewerSuggestions.md
similarity index 100%
rename from app/components/submission/ReviewerSuggestions.md
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestions.md
diff --git a/app/components/submission/ReviewerSuggestionsPage.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestionsPage.js
similarity index 100%
rename from app/components/submission/ReviewerSuggestionsPage.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestionsPage.js
diff --git a/app/components/submission/ReviewerSuggestionsSchema.js b/app/components/submission/ReviewerSuggestions/ReviewerSuggestionsSchema.js
similarity index 100%
rename from app/components/submission/ReviewerSuggestionsSchema.js
rename to app/components/submission/ReviewerSuggestions/ReviewerSuggestionsSchema.js
diff --git a/app/components/submission/SubmissionPage.js b/app/components/submission/SubmissionPage.js
new file mode 100644
index 0000000..f84b2bc
--- /dev/null
+++ b/app/components/submission/SubmissionPage.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import AuthorDetailsPage from './AuthorDetails/AuthorDetailsPage'
+import FileUploadsPage from './FileUploads/FileUploadsPage'
+import ManuscriptMetadataPage from './ManuscriptMetadata/ManuscriptMetadataPage'
+import ReviewerSuggestionsPage from './ReviewerSuggestions/ReviewerSuggestionsPage'
+
+const SubmissionPage = ({ match }) => (
+ <Switch>
+ <Route component={FileUploadsPage} path={`${match.path}/upload`} />
+ <Route component={ManuscriptMetadataPage} path={`${match.path}/metadata`} />
+ <Route
+ component={ReviewerSuggestionsPage}
+ path={`${match.path}/suggestions`}
+ />
+ <Route component={AuthorDetailsPage} />
+ </Switch>
+)
+
+export default SubmissionPage
diff --git a/app/routes.js b/app/routes.js
index ae0c3fa..0218bd9 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -5,12 +5,9 @@ import {
AppBar,
AuthenticatedComponent,
Dashboard,
- AuthorDetailsPage,
- FileUploadsPage,
LoginPage,
- ManuscriptMetadataPage,
- ReviewerSuggestionsPage,
} from './components'
+import SubmissionPage from './components/submission/SubmissionPage'
const Routes = () => (
<Switch>
@@ -18,19 +15,8 @@ const Routes = () => (
<AuthenticatedComponent>
<AppBar />
<Switch>
- <Route component={AuthorDetailsPage} exact path="/submit" />
- <Route component={FileUploadsPage} exact path="/submit/upload" />
- <Route
- component={ManuscriptMetadataPage}
- exact
- path="/submit/metadata"
- />
- <Route
- component={ReviewerSuggestionsPage}
- exact
- path="/submit/suggestions"
- />
- <Route component={Dashboard} path="/" />
+ <Route component={SubmissionPage} path="/submit" />
+ <Route component={Dashboard} />
</Switch>
</AuthenticatedComponent>
</Switch>
--
GitLab