diff --git a/packages/component-manuscript/src/components/ReviewerReportForm.js b/packages/component-manuscript/src/components/ReviewerReportForm.js index 2a62ea58832a86e892f27406b822f32aeb43d7eb..2e91779f1489a064817700d2089ddc2ed3eaee99 100644 --- a/packages/component-manuscript/src/components/ReviewerReportForm.js +++ b/packages/component-manuscript/src/components/ReviewerReportForm.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux' import { required } from 'xpub-validators' import styled, { css } from 'styled-components' import { compose, withHandlers, withProps } from 'recompose' -import { th, Menu, ValidatedField, Icon, Button, Spinner } from '@pubsweet/ui' +import { th, Menu, ValidatedField, Icon, Button } from '@pubsweet/ui' import { reduxForm, isSubmitting, @@ -15,6 +15,14 @@ import { autosaveRequest, autosaveSuccess, } from 'pubsweet-component-wizard/src/redux/autosave' +import { + ConfirmationModal, + withModal2, +} from 'pubsweet-component-modal/src/components' +import { + selectFetching, + selectError, +} from 'pubsweet-components-faraday/src/redux/recommendations' import { parseReviewResponseToForm, parseReviewRequest } from './utils' @@ -149,11 +157,7 @@ const ReviewerReportForm = ({ <Spacing /> <Row> - {isSubmitting ? ( - <Spinner size={4} /> - ) : ( - <ActionButton onClick={handleSubmit}> Submit report </ActionButton> - )} + <ActionButton onClick={handleSubmit}> Submit report </ActionButton> <AutosaveIndicator formName="reviewerReport" /> </Row> </Root> @@ -162,6 +166,15 @@ const ReviewerReportForm = ({ // To be removed const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) +const ModalWrapper = compose( + connect(state => ({ + fetching: selectFetching(state), + modalError: selectError(state), + })), +)(({ fetching, ...rest }) => ( + <ConfirmationModal {...rest} isFetching={fetching} /> +)) + export default compose( connect( state => ({ @@ -173,6 +186,9 @@ export default compose( withProps(() => ({ initialValues: parseReviewResponseToForm({}), })), + withModal2(props => ({ + modalComponent: ModalWrapper, + })), withHandlers({ changeField: ({ changeForm }) => (field, value) => { changeForm('reviewerReport', field, value) @@ -186,12 +202,25 @@ export default compose( dispatch(autosaveRequest()) sleep(1000).then(() => dispatch(autosaveSuccess(new Date()))) }, - onSubmit: (values, dispatch, { isSubmitting }) => - sleep(1000).then(() => { - // TODO: link to backend - const review = parseReviewRequest(values) - window.alert(`You submitted:\n\n${JSON.stringify(review, null, 2)}`) - }), + onSubmit: (values, dispatch, { isSubmitting, showModal, hideModal }) => { + showModal({ + title: 'Ready to Submit your Report?', + subtitle: 'Once submitted, the report can`t be modified', + confirmText: 'Submit report', + onConfirm: () => { + sleep(1000) + .then(hideModal) + .then(() => { + // TODO: link to backend + const review = parseReviewRequest(values) + window.alert( + `You submitted:\n\n${JSON.stringify(review, null, 2)}`, + ) + }) + }, + onCancel: hideModal, + }) + }, }), )(ReviewerReportForm) diff --git a/packages/components-faraday/src/redux/recommendations.js b/packages/components-faraday/src/redux/recommendations.js index 3a8cf0213622cf40184dc55569490d94aa865abd..b59d6abf4748ff2eb7e966677bfd9be7ae9ab7b2 100644 --- a/packages/components-faraday/src/redux/recommendations.js +++ b/packages/components-faraday/src/redux/recommendations.js @@ -1,3 +1,4 @@ +import { get } from 'lodash' import { get as apiGet, create, @@ -36,6 +37,12 @@ export const updateRecommendationSuccess = recommendation => ({ payload: { recommendation }, }) +// Selectors +export const selectFetching = state => + get(state, 'recommendations.fetching') || false + +export const selectError = state => get(state, 'recommendations.error') + // Actions // State