fix multiple modals on the same page

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

 export { default as withModal } from './withModal'
 export { default as SuccessModal } from './SuccessModal'
 export { default as ConfirmationModal } from './ConfirmationModal'
+export { withModal2 } from './withModal'

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

 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,

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>

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