From b97544e46fad42be038bb1c30e723398251614d9 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 11 Apr 2018 17:12:43 +0300
Subject: [PATCH] fix multiple modals on the same page
---
.../component-modal/src/components/index.js | 1 +
.../src/components/withModal.js | 42 +++++++++++++++++++
.../src/components/Dashboard/DashboardCard.js | 5 ++-
.../components/Reviewers/InviteReviewers.js | 7 ++--
4 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/packages/component-modal/src/components/index.js b/packages/component-modal/src/components/index.js
index 724e8d887..6ff437ff2 100644
--- a/packages/component-modal/src/components/index.js
+++ b/packages/component-modal/src/components/index.js
@@ -1,3 +1,4 @@
export { default as withModal } from './withModal'
export { default as SuccessModal } from './SuccessModal'
export { default as ConfirmationModal } from './ConfirmationModal'
+export { withModal2 } from './withModal'
diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js
index 59f223682..60eaf034f 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -1,6 +1,7 @@
import React from 'react'
import { omit } from 'lodash'
import { connect } from 'react-redux'
+import { compose } from 'recompose'
import Modal from './Modal'
import { showModal, hideModal, setModalError } from '../redux/modal'
@@ -17,6 +18,47 @@ const mapDispatch = modalKey => (dispatch, propss) => ({
setModalError: errorMessage => dispatch(setModalError(errorMessage)),
})
+const mapDispatch2 = (dispatch, props) => ({
+ hideModal: () => dispatch(hideModal()),
+ showModal: (modalProps = {}) =>
+ dispatch(showModal(props.modalKey, modalProps)),
+ setModalError: errorMessage => dispatch(setModalError(errorMessage)),
+})
+
+export const withModal2 = mapperFn => BaseComponent =>
+ compose(connect(mapState, mapDispatch2))(baseProps => {
+ const { modalComponent: Component, overlayColor } = mapperFn(baseProps)
+ const {
+ hideModal,
+ modalProps,
+ modalError,
+ modalsVisibility,
+ modalKey,
+ ...rest
+ } = baseProps
+ return (
+ <React.Fragment>
+ {modalsVisibility[modalKey] && (
+ <Modal
+ {...modalProps}
+ component={Component}
+ hideModal={hideModal}
+ modalError={modalError}
+ overlayColor={overlayColor}
+ setModalError={setModalError}
+ showModal={showModal}
+ />
+ )}
+ <BaseComponent
+ hideModal={hideModal}
+ setModalError={setModalError}
+ showModal={showModal}
+ {...rest}
+ />
+ </React.Fragment>
+ )
+ })
+
const withModal = ({
modalKey,
modalComponent: Component,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 620eff5a3..17a97a943 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -140,7 +140,10 @@ const DashboardCard = ({
{renderHandlingEditorRow()}
</LeftDetails>
</Bottom>
- <InviteReviewers project={project} />
+ <InviteReviewers
+ modalKey={`invite-reviewers-${project.id}`}
+ project={project}
+ />
</DetailsView>
)}
</Card>
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index a23d2bca2..c4238c7f7 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -3,8 +3,8 @@ import { Icon, Button, th } from '@pubsweet/ui'
import styled, { css, withTheme } from 'styled-components'
import { compose, withHandlers, lifecycle, withState } from 'recompose'
import {
- withModal,
ConfirmationModal,
+ withModal2,
} from 'pubsweet-component-modal/src/components'
import { ReviewerForm, ReviewersList } from './'
@@ -69,10 +69,9 @@ const ModalSwitcher = ({ type, ...rest }) => {
}
export default compose(
- withModal({
- modalKey: 'invite-reviewers',
+ withModal2(props => ({
modalComponent: ModalSwitcher,
- }),
+ })),
withHandlers({
showInviteModal: ({ showModal, hideModal, project, reviewers }) => () => {
showModal({
--
GitLab