diff --git a/packages/component-modal/src/components/ConfirmationModal.js b/packages/component-modal/src/components/ConfirmationModal.js index 7d1b6664396f7396d6ecfa8cb17d19464f743660..1271f62d4d9bea5496033628b5297350a848ce75 100644 --- a/packages/component-modal/src/components/ConfirmationModal.js +++ b/packages/component-modal/src/components/ConfirmationModal.js @@ -1,5 +1,6 @@ import React from 'react' import { Icon, Button, th } from '@pubsweet/ui' +import { compose, withHandlers } from 'recompose' import styled, { css, withTheme } from 'styled-components' const ConfirmationModal = ({ @@ -7,14 +8,14 @@ const ConfirmationModal = ({ subtitle, content, onConfirm, + onClose, confirmText = 'OK', cancelText = 'Cancel', - hideModal, theme, modalError, }) => ( <Root> - <CloseIcon data-test="icon-modal-hide" onClick={hideModal}> + <CloseIcon data-test="icon-modal-hide" onClick={onClose}> <Icon color={theme.colorPrimary}>x</Icon> </CloseIcon> {title && <Title dangerouslySetInnerHTML={{ __html: title }} />} @@ -24,7 +25,7 @@ const ConfirmationModal = ({ {modalError && <ErrorMessage>{modalError}</ErrorMessage>} <ButtonsContainer> - <Button data-test="button-modal-hide" onClick={hideModal}> + <Button data-test="button-modal-hide" onClick={onClose}> {cancelText} </Button> {onConfirm && ( @@ -36,7 +37,18 @@ const ConfirmationModal = ({ </Root> ) -export default withTheme(ConfirmationModal) +export default compose( + withTheme, + withHandlers({ + onClose: ({ onCancel, hideModal }) => () => { + if (onCancel && typeof onCancel === 'function') { + onCancel() + } else { + hideModal() + } + }, + }), +)(ConfirmationModal) // #region styled-components const defaultText = css` diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js index 84a7b51fd1a957730e963cde62d78db750082b87..37ad52995b4ee6335e8a6a15f75c169f28f52e3b 100644 --- a/packages/component-modal/src/components/withModal.js +++ b/packages/component-modal/src/components/withModal.js @@ -23,7 +23,15 @@ const withModal = ({ overlayColor, }) => WrappedComponent => connect(mapState, mapDispatch(modalKey))( - ({ modalsVisibility, modalProps, modalError, hideModal, ...rest }) => ( + ({ + modalsVisibility, + modalProps, + modalError, + hideModal, + showModal, + setModalError, + ...rest + }) => ( <React.Fragment> {modalsVisibility[modalKey] && ( <Modal @@ -32,9 +40,16 @@ const withModal = ({ hideModal={hideModal} modalError={modalError} overlayColor={overlayColor} + setModalError={setModalError} + showModal={showModal} /> )} - <WrappedComponent hideModal={hideModal} {...rest} /> + <WrappedComponent + hideModal={hideModal} + setModalError={setModalError} + showModal={showModal} + {...rest} + /> </React.Fragment> ), ) diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js index 0224066dffa0515155fcec67cb635e0c68e322f9..4e05ed4058588b872b16b4179f12224d9ab4fa26 100644 --- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js +++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js @@ -2,7 +2,10 @@ import React from 'react' import { Icon, Button, th } from '@pubsweet/ui' import { compose, withHandlers } from 'recompose' import styled, { css, withTheme } from 'styled-components' -import { withModal } from 'pubsweet-component-modal/src/components' +import { + withModal, + ConfirmationModal, +} from 'pubsweet-component-modal/src/components' import { ReviewerForm, ReviewersList } from './' @@ -10,30 +13,42 @@ const InviteReviewers = ({ showInviteModal }) => ( <AssignButton onClick={showInviteModal}>Invite reviewers</AssignButton> ) -const InviteReviewersModal = withTheme(({ theme, hideModal, onConfirm }) => ( - <Root> - <CloseIcon data-test="icon-modal-hide" onClick={hideModal}> - <Icon color={theme.colorPrimary}>x</Icon> - </CloseIcon> +const InviteReviewersModal = withTheme( + ({ theme, hideModal, onConfirm, showModal }) => ( + <Root> + <CloseIcon data-test="icon-modal-hide" onClick={hideModal}> + <Icon color={theme.colorPrimary}>x</Icon> + </CloseIcon> - <Title>Invite Reviewers</Title> + <Title>Invite Reviewers</Title> - <Subtitle>Invite reviewer</Subtitle> - <ReviewerForm /> + <Subtitle>Invite reviewer</Subtitle> + <ReviewerForm /> - <Subtitle>Reviewers Info</Subtitle> - <ReviewersList /> - </Root> -)) + <Subtitle>Reviewers Info</Subtitle> + <ReviewersList showModal={showModal} /> + </Root> + ), +) + +const ModalSwitcher = ({ type, ...rest }) => { + switch (type) { + case 'invite-reviewers': + return <InviteReviewersModal {...rest} /> + default: + return <ConfirmationModal {...rest} /> + } +} export default compose( withModal({ modalKey: 'invite-reviewers', - modalComponent: InviteReviewersModal, + modalComponent: ModalSwitcher, }), withHandlers({ showInviteModal: ({ showModal, hideModal }) => () => { showModal({ + type: 'invite-reviewers', onConfirm: () => { hideModal() }, diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js index 2bddb9226555ddb99e036e5d2a632764a5a46367..56a2770fb1ad0dc212afca2d8ba41139d9784700 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js @@ -1,5 +1,6 @@ import React from 'react' import { th, Icon } from '@pubsweet/ui' +import { compose, withHandlers } from 'recompose' import styled, { withTheme } from 'styled-components' const defaultReviewers = [ @@ -41,18 +42,24 @@ const defaultReviewers = [ }, ] -const ResendRevoke = withTheme(({ theme }) => ( - <ActionButtons> - <div onClick={() => {}}> - <Icon color={theme.colorPrimary}>refresh-cw</Icon> - </div> - <div onClick={() => {}}> - <Icon color={theme.colorPrimary}>x-circle</Icon> - </div> - </ActionButtons> -)) +const ResendRevoke = withTheme( + ({ theme, showConfirmResend, showConfirmRevoke }) => ( + <ActionButtons> + <div onClick={showConfirmResend}> + <Icon color={theme.colorPrimary}>refresh-cw</Icon> + </div> + <div onClick={showConfirmRevoke}> + <Icon color={theme.colorPrimary}>x-circle</Icon> + </div> + </ActionButtons> + ), +) -const ReviewersList = ({ reviewers = defaultReviewers }) => ( +const ReviewersList = ({ + reviewers = defaultReviewers, + showConfirmResend, + showConfirmRevoke, +}) => ( <Root> <ScrollContainer> {reviewers.map((r, index, arr) => ( @@ -70,14 +77,44 @@ const ReviewersList = ({ reviewers = defaultReviewers }) => ( <StatusText>{r.status}</StatusText> <StatusText>{r.lastUpdated}</StatusText> </Column> - <ResendRevoke /> + <ResendRevoke + showConfirmResend={showConfirmResend} + showConfirmRevoke={showConfirmRevoke} + /> </ReviewerItem> ))} </ScrollContainer> </Root> ) -export default ReviewersList +export default compose( + withHandlers({ + goBackToReviewers: ({ showModal, hideModal }) => () => { + showModal({ + type: 'invite-reviewers', + onConfirm: () => { + hideModal() + }, + }) + }, + }), + withHandlers({ + showConfirmResend: ({ showModal, goBackToReviewers }) => () => { + showModal({ + title: 'Resend confirmation', + onConfirm: goBackToReviewers, + onCancel: goBackToReviewers, + }) + }, + showConfirmRevoke: ({ showModal, hideModal, goBackToReviewers }) => () => { + showModal({ + title: 'Revoke confirmation', + onConfirm: goBackToReviewers, + onCancel: goBackToReviewers, + }) + }, + }), +)(ReviewersList) // #region styled-components const ReviewerEmail = styled.span` diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js index 9671e5bef74fdb508ed65eec3fcb22edc1a1feb7..c4f458ba495700544fb0160430f567ff7e5c2a8e 100644 --- a/packages/xpub-faraday/config/default.js +++ b/packages/xpub-faraday/config/default.js @@ -39,7 +39,7 @@ module.exports = { 'pubsweet-client': { API_ENDPOINT: '/api', 'login-redirect': '/', - 'redux-log': true, + 'redux-log': false, theme: process.env.PUBSWEET_THEME, }, 'mail-transport': {