fix(modal-component): fix rendering multiple modals

packages/component-modal/src/components/withModal.js

 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}

packages/component-modal/src/redux/modal.js

 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
   }

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",

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({

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>

packages/components-faraday/src/components/Dashboard/DashboardCard.js

 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 = ({

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,
     },
   },

packages/components-faraday/src/redux/index.js

-export { default as modal } from './modal'
 export { default as authors } from './authors'
 export { default as editors } from './editors'

packages/components-faraday/src/redux/modal.js

-import { modalReducer } from 'portal-modal'
-
-export default modalReducer