From f206fa58068e258c9a2280f044b3d7d0cf3e26c0 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Tue, 20 Feb 2018 13:32:15 +0200
Subject: [PATCH] remove unused code and use pubsweet-modal for dashboard
---
.../component-modal/src/components/Modal.js | 5 +-
packages/components-faraday/package.json | 1 -
.../src/components/Dashboard/AbstractModal.js | 65 ++++---------------
.../src/components/Dashboard/Dashboard.js | 44 +++----------
.../src/components/Dashboard/DashboardCard.js | 12 +---
.../components/Dashboard/DashboardItems.js | 8 ++-
.../src/components/Dashboard/DashboardPage.js | 17 +----
7 files changed, 36 insertions(+), 116 deletions(-)
diff --git a/packages/component-modal/src/components/Modal.js b/packages/component-modal/src/components/Modal.js
index 55ff87b60..09987d71b 100644
--- a/packages/component-modal/src/components/Modal.js
+++ b/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,
diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
index 1ecc99d92..048916978 100644
--- a/packages/components-faraday/package.json
+++ b/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",
diff --git a/packages/components-faraday/src/components/Dashboard/AbstractModal.js b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
index b2e02235a..108c02b4e 100644
--- a/packages/components-faraday/src/components/Dashboard/AbstractModal.js
+++ b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
@@ -1,61 +1,18 @@
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`
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 3b8b50aa7..fbf0cdcb4 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,7 +1,6 @@
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,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 1ea3969bc..085967228 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,10 +1,8 @@
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
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index a73f2346c..fa1703398 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/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>
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
index 0e5c23cc6..4154a7b1b 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardPage.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -1,10 +1,9 @@
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)
--
GitLab