From ef0e50c6190cddc919d12d64bc80c973c141ec70 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 17 May 2018 14:19:39 +0300
Subject: [PATCH] refactor(form-items): move form items into UIComponents
---
.../MakeRecommendation/RecommendWizard.js | 16 +++--
.../MakeRecommendation/Recommendation.js | 12 +++-
.../components/MakeRecommendation/StepOne.js | 15 +++--
.../components/MakeRecommendation/StepTwo.js | 14 ++--
.../components/MakeRecommendation/index.js | 4 +-
.../components/MakeRecommendation/utils.js | 10 +++
.../src/components/SignUp/FormItems.js | 65 -------------------
.../src/components/SignUp/ReviewerDecline.js | 8 ++-
.../SignUp/ReviewerInviteDecision.js | 12 ++--
.../src/components/SignUp/ReviewerSignUp.js | 4 +-
.../components/SignUp/SignUpInvitationForm.js | 14 ++--
.../components/SignUp/SignUpInvitationPage.js | 4 +-
.../src/components/SignUp/SignUpStep0.js | 4 +-
.../src/components/SignUp/SignUpStep1.js | 4 +-
.../FormItems.js | 12 ++--
.../src/components/UIComponents/index.js | 3 +
16 files changed, 87 insertions(+), 114 deletions(-)
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/utils.js
delete mode 100644 packages/components-faraday/src/components/SignUp/FormItems.js
rename packages/components-faraday/src/components/{MakeRecommendation => UIComponents}/FormItems.js (97%)
diff --git a/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
index 3519e1a5e..f34bc77be 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
@@ -3,10 +3,11 @@ import { get } from 'lodash'
import { Icon } from '@pubsweet/ui'
import { connect } from 'react-redux'
import styled from 'styled-components'
-import { getFormValues, reset as resetForm } from 'redux-form'
import { compose, withState, withHandlers } from 'recompose'
+import { getFormValues, reset as resetForm } from 'redux-form'
-import { StepOne, StepTwo, RootContainer } from './'
+import { StepOne, StepTwo } from './'
+import { FormItems } from '../UIComponents'
import {
selectError,
selectFetching,
@@ -24,12 +25,17 @@ const RecommendWizard = ({
recommendationError,
...rest
}) => (
- <RootContainer>
+ <FormItems.RootContainer>
<IconButton onClick={hideModal}>
<Icon primary>x</Icon>
</IconButton>
{step === 0 && (
- <StepOne disabled={!decision} onSubmit={nextStep} {...rest} />
+ <StepOne
+ disabled={!decision}
+ hideModal={hideModal}
+ onSubmit={nextStep}
+ {...rest}
+ />
)}
{step === 1 && (
<StepTwo
@@ -40,7 +46,7 @@ const RecommendWizard = ({
recommendationError={recommendationError}
/>
)}
- </RootContainer>
+ </FormItems.RootContainer>
)
export default compose(
diff --git a/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
index 004eb9ebe..dd47f928d 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
@@ -29,11 +29,17 @@ export default compose(
modalComponent: ModalComponent,
})),
withHandlers({
- showFirstStep: ({ collectionId, fragmentId, showModal }) => () => {
+ showFirstStep: ({
+ showModal,
+ hideModal,
+ fragmentId,
+ collectionId,
+ }) => () => {
showModal({
- type: SHOW_WIZARD,
- collectionId,
+ hideModal,
fragmentId,
+ collectionId,
+ type: SHOW_WIZARD,
})
},
}),
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepOne.js b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
index 5ce88ae43..fc20adb61 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
@@ -2,13 +2,10 @@ import React from 'react'
import { reduxForm } from 'redux-form'
import { RadioGroup, ValidatedField, Button } from '@pubsweet/ui'
-import { RootContainer, Row, RowItem, Title } from './'
+import { utils } from './'
+import { FormItems } from '../UIComponents'
-const radioOptions = [
- { value: 'reject', label: 'Reject' },
- { value: 'publish', label: 'Publish' },
- { value: 'revise', label: 'Request revision' },
-]
+const { RootContainer, Row, RowItem, Title } = FormItems
const StepOne = ({ hideModal, disabled, onSubmit }) => (
<RootContainer>
@@ -17,7 +14,11 @@ const StepOne = ({ hideModal, disabled, onSubmit }) => (
<RowItem>
<ValidatedField
component={input => (
- <RadioGroup name="decision" options={radioOptions} {...input} />
+ <RadioGroup
+ name="decision"
+ options={utils.recommendationOptions}
+ {...input}
+ />
)}
name="decision"
/>
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
index 1f7f86db2..90f948484 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -14,7 +14,10 @@ import {
ValidatedField,
} from '@pubsweet/ui'
-import {
+import { utils } from './'
+import { FormItems } from '../UIComponents'
+
+const {
Row,
Err,
Label,
@@ -23,12 +26,7 @@ import {
Textarea,
RootContainer,
FormContainer,
-} from './'
-
-const revisionOptions = [
- { value: 'minor', label: 'Minor' },
- { value: 'major', label: 'Major' },
-]
+} = FormItems
const Form = RootContainer.withComponent(FormContainer)
@@ -86,7 +84,7 @@ const StepTwo = ({
<RadioGroup
name="revision.revision-type"
{...input}
- options={revisionOptions}
+ options={utils.revisionOptions}
/>
)}
name="revision.revisionType"
diff --git a/packages/components-faraday/src/components/MakeRecommendation/index.js b/packages/components-faraday/src/components/MakeRecommendation/index.js
index a8545992f..9eb54e667 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/index.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/index.js
@@ -1,4 +1,6 @@
-export * from './FormItems'
+import * as utils from './utils'
+
+export { utils }
export { default as StepOne } from './StepOne'
export { default as StepTwo } from './StepTwo'
export { default as Recommendation } from './Recommendation'
diff --git a/packages/components-faraday/src/components/MakeRecommendation/utils.js b/packages/components-faraday/src/components/MakeRecommendation/utils.js
new file mode 100644
index 000000000..fd9ebee92
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/utils.js
@@ -0,0 +1,10 @@
+export const recommendationOptions = [
+ { value: 'reject', label: 'Reject' },
+ { value: 'publish', label: 'Publish' },
+ { value: 'revise', label: 'Request revision' },
+]
+
+export const revisionOptions = [
+ { value: 'minor', label: 'Minor' },
+ { value: 'major', label: 'Major' },
+]
diff --git a/packages/components-faraday/src/components/SignUp/FormItems.js b/packages/components-faraday/src/components/SignUp/FormItems.js
deleted file mode 100644
index 22089ca2c..000000000
--- a/packages/components-faraday/src/components/SignUp/FormItems.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { th } from '@pubsweet/ui'
-import styled from 'styled-components'
-
-export const RootContainer = styled.div`
- background-color: ${th('backgroundColorReverse')};
- border: ${th('borderDefault')};
- display: flex;
- flex-direction: column;
- margin: 0 auto;
- max-width: 550px;
- min-width: 300px;
- padding: 20px;
-`
-
-export const Title = styled.div`
- color: ${th('colorPrimary')};
- font-family: ${th('fontHeading')};
- font-size: ${th('fontSizeHeading5')};
- font-weight: bold;
- margin: 10px auto;
- text-align: center;
-`
-export const Subtitle = styled.div`
- font-family: ${th('fontReading')};
- font-size: ${th('fontSizeBase')};
- font-weight: normal;
- margin: 10px auto;
- text-align: center;
-`
-
-export const Email = styled.div`
- font-family: ${th('fontReading')};
- font-size: ${th('fontSizeBase')};
- font-weight: normal;
- margin: 10px auto;
- text-align: center;
-`
-
-export const FormContainer = styled.form``
-
-export const Row = styled.div`
- align-items: center;
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- margin: ${th('gridUnit')} 0;
-`
-
-export const RowItem = styled.div`
- flex: 1;
- margin-right: ${th('gridUnit')};
-`
-
-export const Label = styled.div`
- font-family: ${th('fontReading')};
- font-size: ${th('fontSizeBaseSmall')};
- text-transform: uppercase;
-`
-export const Err = styled.span`
- color: ${th('colorError')};
- font-family: ${th('fontReading')};
- font-size: ${th('fontSizeBase')};
- margin-top: calc(${th('gridUnit')}*-1);
- text-align: center;
-`
diff --git a/packages/components-faraday/src/components/SignUp/ReviewerDecline.js b/packages/components-faraday/src/components/SignUp/ReviewerDecline.js
index 455db357d..74f726dd8 100644
--- a/packages/components-faraday/src/components/SignUp/ReviewerDecline.js
+++ b/packages/components-faraday/src/components/SignUp/ReviewerDecline.js
@@ -6,12 +6,14 @@ import { withJournal } from 'xpub-journal'
import { replace } from 'react-router-redux'
import { compose, lifecycle } from 'recompose'
-import { RootContainer, Title } from './FormItems'
-import { reviewerDecline } from '../../redux/reviewers'
import { redirectToError } from '../utils'
+import { FormItems } from '../UIComponents'
+import { reviewerDecline } from '../../redux/reviewers'
+
+const { RootContainer, Title } = FormItems
const ReviewerDecline = ({ journal: { metadata: { email } } }) => (
- <RootContainer>
+ <RootContainer bordered>
<Title>Thank you for letting us know.</Title>
<div>
<Description>
diff --git a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
index 8065fa65e..c47b24cc6 100644
--- a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
+++ b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
@@ -8,7 +8,11 @@ import { compose, withState, lifecycle } from 'recompose'
import { loginUser } from 'pubsweet-component-login/actions'
import { Button, ValidatedField, TextField } from '@pubsweet/ui'
-import {
+import { redirectToError } from '../utils'
+import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
+import { FormItems } from '../UIComponents'
+
+const {
Row,
Err,
Title,
@@ -18,9 +22,7 @@ import {
Subtitle,
RootContainer,
FormContainer,
-} from './FormItems'
-import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'
-import { redirectToError } from '../utils'
+} = FormItems
const agreeText = `You have been invited to review a manuscript on the Hindawi platform. Please set a password and proceed to the manuscript.`
const declineText = `You have decline to work on a manuscript.`
@@ -33,7 +35,7 @@ const ReviewerInviteDecision = ({
reviewerEmail,
errorMessage,
}) => (
- <RootContainer>
+ <RootContainer bordered>
<Title>Hindawi Invitation</Title>
<Subtitle>{agree === 'true' ? agreeText : declineText}</Subtitle>
<Email>{reviewerEmail}</Email>
diff --git a/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js b/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js
index d1771f7bd..cda07d2d2 100644
--- a/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js
+++ b/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js
@@ -3,8 +3,8 @@ import { isEmpty } from 'lodash'
import { Route } from 'react-router-dom'
import { AuthenticatedComponent } from 'pubsweet-client'
-import { ReviewerInviteDecision, ReviewerDecline } from './'
import { parseSearchParams } from './utils'
+import { ReviewerInviteDecision, ReviewerDecline } from './'
const PrivateRoute = ({ component: Component, token, ...rest }) => (
<Route
@@ -28,8 +28,8 @@ const ReviewerSignUp = ({ location }) => {
<Route
component={props => (
<ReviewerDecline
- {...props}
invitationToken={invitationToken}
+ {...props}
{...rest}
/>
)}
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index eae8daeff..f7b21c178 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -2,19 +2,21 @@ import React from 'react'
import Step0 from './SignUpStep0'
import Step1 from './SignUpStep1'
-import { RootContainer, Title, Subtitle, Email, Err } from './FormItems'
+import { FormItems } from '../UIComponents'
+
+const { RootContainer, Title, Subtitle, Email, Err } = FormItems
const SignUpInvitation = ({
- journal,
+ step,
email,
token,
- step,
+ error,
+ journal,
nextStep,
- submitConfirmation,
initialValues,
- error,
+ submitConfirmation,
}) => (
- <RootContainer>
+ <RootContainer bordered>
<Title>Add New Account Details</Title>
<Subtitle>
Your details have been pre-filled, please review and confirm before set
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
index c6c01d53d..508ecf4d0 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
@@ -1,8 +1,8 @@
import { get } from 'lodash'
-import { create } from 'pubsweet-client/src/helpers/api'
import { withJournal } from 'xpub-journal'
-import { loginUser } from 'pubsweet-component-login/actions'
import { SubmissionError } from 'redux-form'
+import { create } from 'pubsweet-client/src/helpers/api'
+import { loginUser } from 'pubsweet-component-login/actions'
import { compose, withState, withProps, withHandlers } from 'recompose'
import SignUpInvitation from './SignUpInvitationForm'
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 03c8d2812..93c863e78 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -4,7 +4,9 @@ import { isUndefined } from 'lodash'
import { required } from 'xpub-validators'
import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui'
-import { FormContainer, Row, RowItem, Label } from './FormItems'
+import { FormItems } from '../UIComponents'
+
+const { FormContainer, Row, RowItem, Label } = FormItems
const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
!isUndefined(initialValues) ? (
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index 706961d98..f5469320f 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -3,7 +3,9 @@ import { reduxForm } from 'redux-form'
import { required } from 'xpub-validators'
import { Button, ValidatedField, TextField } from '@pubsweet/ui'
-import { FormContainer, Row, RowItem, Label, Err } from './FormItems'
+import { FormItems } from '../UIComponents'
+
+const { FormContainer, Row, RowItem, Label, Err } = FormItems
const Step1 = ({ journal, handleSubmit, error }) => (
<FormContainer onSubmit={handleSubmit}>
diff --git a/packages/components-faraday/src/components/MakeRecommendation/FormItems.js b/packages/components-faraday/src/components/UIComponents/FormItems.js
similarity index 97%
rename from packages/components-faraday/src/components/MakeRecommendation/FormItems.js
rename to packages/components-faraday/src/components/UIComponents/FormItems.js
index 66534ec0c..83a36e4dc 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
+++ b/packages/components-faraday/src/components/UIComponents/FormItems.js
@@ -58,22 +58,24 @@ export const Label = styled.div`
font-size: ${th('fontSizeBaseSmall')};
text-transform: uppercase;
`
+
export const Err = styled.span`
color: ${th('colorError')};
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBase')};
- margin-top: calc(${th('gridUnit')}*-1);
+ margin-top: calc(${th('gridUnit')} * -1);
text-align: center;
`
export const Textarea = styled.textarea`
- width: 400px;
- padding: calc(${th('subGridUnit')}*2);
- font-size: ${th('fontSizeBaseSmall')};
- font-family: ${th('fontWriting')};
border-color: ${({ hasError }) =>
hasError ? th('colorError') : th('colorPrimary')};
+ font-size: ${th('fontSizeBaseSmall')};
+ font-family: ${th('fontWriting')};
+ padding: calc(${th('subGridUnit')}*2);
transition: all 300ms linear;
+ width: 400px;
+
&:read-only {
background-color: ${th('colorBackgroundHue')};
}
diff --git a/packages/components-faraday/src/components/UIComponents/index.js b/packages/components-faraday/src/components/UIComponents/index.js
index 0b3250328..738dc3c98 100644
--- a/packages/components-faraday/src/components/UIComponents/index.js
+++ b/packages/components-faraday/src/components/UIComponents/index.js
@@ -1,3 +1,6 @@
+import * as FormItems from './FormItems'
+
+export { FormItems }
export { default as Logo } from './Logo'
export { default as Spinner } from './Spinner'
export { default as NotFound } from './NotFound'
--
GitLab