remove unused code and use pubsweet-modal for dashboard

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

@@ -16,7 +16,10 @@ class Modal extends React.Component {
   render() {
     const { component: Component, overlayColor, ...rest } = this.props
     return ReactDOM.createPortal(
-      <ModalRoot overlayColor={overlayColor}>
+      <ModalRoot
+        onClick={rest.dismissable ? rest.hideModal : null}
+        overlayColor={overlayColor}
+      >
         <Component {...rest} />
       </ModalRoot>,
       modalRoot,

packages/components-faraday/package.json

@@ -12,7 +12,6 @@
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^15.6.1",
-    "react-modal": "^3.2.1",
     "react-router-dom": "^4.2.2",
     "recompose": "^0.26.0",
     "redux": "^3.6.0",

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

 import React from 'react'
 import { get } from 'lodash'
-import Modal from 'react-modal'
 import { Icon } from '@pubsweet/ui'
 import styled from 'styled-components'
 
-const customStyles = {
-  overlay: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(102, 112, 128, 0.8)',
-  },
-  content: {
-    top: '50%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    transform: 'translate(-50%, -50%)',
-    width: 600,
-    maxHeight: 500,
-    padding: 0,
-    overflowY: 'auto',
-    opacity: 1,
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 0,
-  },
-}
-
-const AbstractModal = ({ abstractModal, onClose }) => {
-  const isOpen = !!abstractModal
-  return (
-    <Modal
-      ariaHideApp={false}
-      isOpen={isOpen}
-      onRequestClose={onClose}
-      shouldCloseOnOverlayClick
-      style={customStyles}
-    >
-      <Root>
-        <CloseIcon onClick={onClose}>
-          <Icon color="#667080">x</Icon>
-        </CloseIcon>
-        <Title
-          dangerouslySetInnerHTML={{ __html: get(abstractModal, 'title') }}
-        />
-        <Subtitle>Abstract</Subtitle>
-        <Content
-          dangerouslySetInnerHTML={{ __html: get(abstractModal, 'abstract') }}
-        />
-      </Root>
-    </Modal>
-  )
-}
+const AbstractModal = ({ metadata, hideModal }) => (
+  <Root>
+    <CloseIcon onClick={hideModal}>
+      <Icon color="#667080">x</Icon>
+    </CloseIcon>
+    <Title dangerouslySetInnerHTML={{ __html: get(metadata, 'title') }} />
+    <Subtitle>Abstract</Subtitle>
+    <Content dangerouslySetInnerHTML={{ __html: get(metadata, 'abstract') }} />
+  </Root>
+)
 
 export default AbstractModal
 
@@ -65,6 +22,8 @@ const Root = styled.div`
   padding: 50px 32px 32px 32px;
   border: 1px solid #667080;
   position: relative;
+  width: 600px;
+  max-height: 500px;
 `
 
 const Title = styled.div`

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

 import React from 'react'
 import { get } from 'lodash'
 import { Button } from '@pubsweet/ui'
-import styled from 'styled-components'
 import { compose, withHandlers } from 'recompose'
 import { withModal } from 'pubsweet-component-modal/src/components'
 
@@ -23,9 +22,7 @@ const Dashboard = ({
   changeFilterValue,
   filterValues,
   filterItems,
-  abstractModal,
-  setModal,
-  showModal,
+  showAbstractModal,
   ...rest
 }) => (
   <div className={classes.root}>
@@ -35,17 +32,6 @@ const Dashboard = ({
         <Button onClick={createDraftSubmission} primary>
           New
         </Button>
-        <Button
-          onClick={() =>
-            showModal({
-              onConfirm: () => alert('confirm'),
-              costel: true,
-            })
-          }
-          primary
-        >
-          Show modal
-        </Button>
       </div>
     </div>
     <DashboardFilters
@@ -58,34 +44,22 @@ const Dashboard = ({
       deleteProject={deleteProject}
       list={getItems()}
       listView={listView}
+      showAbstractModal={showAbstractModal}
     />
-    <AbstractModal abstractModal={abstractModal} onClose={setModal()} />
   </div>
 )
 
-const ModalRoot = styled.div`
-  width: 300px;
-  height: 400px;
-  background-color: gray;
-`
-
-const ModalComponent = ({ hideModal, dismissable, onConfirm, costel }) => (
-  <ModalRoot onClick={dismissable ? hideModal : null}>
-    This is our custom modal component.
-    <div>
-      <button onClick={onConfirm}>Yes</button>
-      <button onClick={hideModal}>Hide modal</button>
-      <span>{costel ? 'e costel' : 'nu e'}</span>
-    </div>
-  </ModalRoot>
-)
-
 export default compose(
   withModal({
-    modalComponent: ModalComponent,
-    overlayColor: 'rgba(255, 0,0,0.8)',
+    modalComponent: AbstractModal,
   }),
   withHandlers({
+    showAbstractModal: ({ showModal }) => metadata => () => {
+      showModal({
+        metadata,
+        dismissable: true,
+      })
+    },
     getItems: ({
       filters,
       sortOrder,

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

 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { get, isEmpty } from 'lodash'
 import styled from 'styled-components'
 import { Button, Icon } from '@pubsweet/ui'
-import { compose, getContext } from 'recompose'
 
 import { parseVersion, getFilesURL, downloadAll } from './utils'
 import classes from './Dashboard.local.scss'
@@ -15,7 +13,7 @@ const DashboardCard = ({
   listView,
   project,
   version,
-  setModal,
+  showAbstractModal,
 }) => {
   const { submitted, author, title, type, version: vers } = parseVersion(
     version,
@@ -75,7 +73,7 @@ const DashboardCard = ({
             <div className={classes.column2}>
               <div>{author}</div>
               {abstract && (
-                <ViewAbstractContainer onClick={setModal(metadata)}>
+                <ViewAbstractContainer onClick={showAbstractModal(metadata)}>
                   <Icon color="#667080" size={18}>
                     eye
                   </Icon>
@@ -131,8 +129,4 @@ const ViewAbstractContainer = styled.div`
   }
 `
 
-export default compose(
-  getContext({
-    setModal: PropTypes.func,
-  }),
-)(DashboardCard)
+export default DashboardCard

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

@@ -6,7 +6,12 @@ import classes from './Dashboard.local.scss'
 
 const DashboardItem = withVersion(Item)
 
-const DashboardItems = ({ list, listView = true, deleteProject }) => (
+const DashboardItems = ({
+  list,
+  listView = true,
+  deleteProject,
+  showAbstractModal,
+}) => (
   <div>
     {!list.length && (
       <div className={classes.empty}>
@@ -22,6 +27,7 @@ const DashboardItems = ({ list, listView = true, deleteProject }) => (
             key={p.id}
             listView={listView}
             project={p}
+            showAbstractModal={showAbstractModal}
           />
         ))}
       </div>

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

 import { get } from 'lodash'
-import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { actions } from 'pubsweet-client'
 import { ConnectPage } from 'xpub-connect'
 import { withRouter } from 'react-router-dom'
-import { compose, withState, withHandlers, withContext } from 'recompose'
+import { compose, withState, withHandlers } from 'recompose'
 import { newestFirst, selectCurrentUser } from 'xpub-selectors'
 import { createDraftSubmission } from 'pubsweet-component-wizard/src/redux/conversion'
 
@@ -19,12 +18,8 @@ export default compose(
     actions.getUsers(),
   ]),
   withState('listView', 'changeView', true),
-  withState('abstractModal', 'setAbstractModal', null),
   withHandlers({
     changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
-    setModal: ({ setAbstractModal }) => (metadata = null) => () => {
-      setAbstractModal(metadata)
-    },
   }),
   connect(
     state => {
@@ -91,14 +86,4 @@ export default compose(
       },
     },
   }),
-  withContext(
-    {
-      abstractModal: PropTypes.object,
-      setModal: PropTypes.func,
-    },
-    ({ abstractModal, setModal }) => ({
-      abstractModal,
-      setModal,
-    }),
-  ),
 )(Dashboard)