From 4a6e68a6d39ef3c7514b6029555c5bbc62bd5498 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Fri, 23 Mar 2018 15:43:43 +0200
Subject: [PATCH] fix(modal-component): fix rendering multiple modals
---
.../src/components/withModal.js | 19 +++++++--------
packages/component-modal/src/redux/modal.js | 23 +++++++++++++++----
packages/components-faraday/package.json | 1 -
.../src/components/Dashboard/AssignEditor.js | 1 +
.../src/components/Dashboard/AssignHEModal.js | 1 +
.../src/components/Dashboard/DashboardCard.js | 5 ++--
packages/components-faraday/src/index.js | 1 -
.../components-faraday/src/redux/index.js | 1 -
.../components-faraday/src/redux/modal.js | 3 ---
9 files changed, 32 insertions(+), 23 deletions(-)
delete mode 100644 packages/components-faraday/src/redux/modal.js
diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js
index 0ee82669d..1d5c786c7 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -1,28 +1,29 @@
import React from 'react'
+import { omit } from 'lodash'
import { connect } from 'react-redux'
import Modal from './Modal'
-import { setModalVisibility } from '../redux/modal'
+import { showModal, hideModal } from '../redux/modal'
const mapState = state => ({
- modalVisible: state.modal.visible,
+ modalsVisibility: omit(state.modal, 'props'),
modalProps: state.modal.props,
})
-const mapDispatch = dispatch => ({
- hideModal: e => dispatch(setModalVisibility(false)),
- showModal: (modalProps = {}) =>
- dispatch(setModalVisibility(true, modalProps)),
+const mapDispatch = modalKey => (dispatch, propss) => ({
+ hideModal: () => dispatch(hideModal()),
+ showModal: (modalProps = {}) => dispatch(showModal(modalKey, modalProps)),
})
const withModal = ({
+ modalKey,
modalComponent: Component,
overlayColor,
}) => WrappedComponent =>
- connect(mapState, mapDispatch)(
- ({ modalVisible, modalProps, hideModal, ...rest }) => (
+ connect(mapState, mapDispatch(modalKey))(
+ ({ modalsVisibility, modalProps, hideModal, ...rest }) => (
<React.Fragment>
- {modalVisible && (
+ {modalsVisibility[modalKey] && (
<Modal
{...modalProps}
component={Component}
diff --git a/packages/component-modal/src/redux/modal.js b/packages/component-modal/src/redux/modal.js
index 8730d7598..cba9f707d 100644
--- a/packages/component-modal/src/redux/modal.js
+++ b/packages/component-modal/src/redux/modal.js
@@ -1,20 +1,33 @@
const initialState = {
- visible: false,
props: {},
}
-const SET_MODAL_VISIBILTY = 'modal/SET_MODAL_VISIBILTY'
+const SHOW_MODAL = 'modal/SHOW_MODAL'
+const HIDE_MODAL = 'modal/HIDE_MODAL'
-export const setModalVisibility = (visible, props = {}) => ({
- type: SET_MODAL_VISIBILTY,
+export const showModal = (modalKey, props = {}) => ({
+ type: SHOW_MODAL,
payload: {
- visible,
+ modalKey,
props,
},
})
+export const hideModal = () => ({
+ type: HIDE_MODAL,
+})
+
+export const getModalVisibility = (state, modalKey) => state[modalKey]
+
export default (state = initialState, action = {}) => {
switch (action.type) {
+ case SHOW_MODAL:
+ return {
+ [action.payload.modalKey]: true,
+ props: action.payload.props,
+ }
+ case HIDE_MODAL:
+ return initialState
default:
return state
}
diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
index e9712a020..d262d3dbd 100644
--- a/packages/components-faraday/package.json
+++ b/packages/components-faraday/package.json
@@ -6,7 +6,6 @@
"dependencies": {
"@pubsweet/ui": "^3.1.0",
"moment": "^2.20.1",
- "portal-modal": "^1.0.3",
"prop-types": "^15.5.10",
"react": "^16.1.0",
"react-dnd": "^2.5.4",
diff --git a/packages/components-faraday/src/components/Dashboard/AssignEditor.js b/packages/components-faraday/src/components/Dashboard/AssignEditor.js
index 1e05fedce..0ae9d05aa 100644
--- a/packages/components-faraday/src/components/Dashboard/AssignEditor.js
+++ b/packages/components-faraday/src/components/Dashboard/AssignEditor.js
@@ -8,6 +8,7 @@ const AssignEditor = ({ assign }) => <button onClick={assign}>ASSIGN</button>
export default compose(
withModal({
+ modalKey: 'assignHEmodal',
modalComponent: HEModal,
}),
withHandlers({
diff --git a/packages/components-faraday/src/components/Dashboard/AssignHEModal.js b/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
index f6694a7e6..86e6d1438 100644
--- a/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
+++ b/packages/components-faraday/src/components/Dashboard/AssignHEModal.js
@@ -37,6 +37,7 @@ class AssignHEModal extends React.Component {
const filteredEditors = this.filterEditors(editors)
return (
<RootModal>
+ <button onClick={this.props.hideModal}>CLOSE</button>
<ModalTitle>Assign Handling Editor</ModalTitle>
<ModalHeader>
<span>HANDLING EDITORS</span>
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 02a1c5618..9401acd55 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,13 +1,12 @@
import React from 'react'
import { get } from 'lodash'
import PropTypes from 'prop-types'
+import { compose, getContext } from 'recompose'
import { Button, Icon, th } from '@pubsweet/ui'
import styled, { css, withTheme } from 'styled-components'
-import { compose, getContext } from 'recompose'
-
-import { parseVersion, parseJournalIssue } from './utils'
import ZipFiles from './ZipFiles'
+import { parseVersion, parseJournalIssue } from './utils'
import HandlingEditorActions from './HandlingEditorActions'
const DashboardCard = ({
diff --git a/packages/components-faraday/src/index.js b/packages/components-faraday/src/index.js
index 1565988f7..babba89a0 100644
--- a/packages/components-faraday/src/index.js
+++ b/packages/components-faraday/src/index.js
@@ -4,7 +4,6 @@ module.exports = {
reducers: {
authors: () => require('./redux/authors').default,
files: () => require('./redux/files').default,
- modal: () => require('./redux/modal').default,
editors: () => require('./redux/editors').default,
},
},
diff --git a/packages/components-faraday/src/redux/index.js b/packages/components-faraday/src/redux/index.js
index 8e6ed7c70..cf03e87f3 100644
--- a/packages/components-faraday/src/redux/index.js
+++ b/packages/components-faraday/src/redux/index.js
@@ -1,3 +1,2 @@
-export { default as modal } from './modal'
export { default as authors } from './authors'
export { default as editors } from './editors'
diff --git a/packages/components-faraday/src/redux/modal.js b/packages/components-faraday/src/redux/modal.js
deleted file mode 100644
index ba8a4ba26..000000000
--- a/packages/components-faraday/src/redux/modal.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { modalReducer } from 'portal-modal'
-
-export default modalReducer
--
GitLab