add abstract modal

packages/components-faraday/package.json

@@ -11,6 +11,7 @@
     "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,
+  },
+}
+
+// #region styled-components
+const Root = styled.div`
+  background-color: #fff;
+  padding: 50px 32px 32px 32px;
+  border: 1px solid #667080;
+  position: relative;
+`
+
+const Title = styled.span`
+  font-family: Helvetica;
+  font-size: 18px;
+  text-align: left;
+  color: #667080;
+`
+
+const Subtitle = styled.span`
+  color: #667080;
+  font-family: Helvetica;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.57;
+  margin-bottom: 8px;
+  text-align: left;
+`
+
+const Content = styled.div`
+  color: #667080;
+  font-family: Helvetica;
+  font-size: 14px;
+  line-height: 1.57;
+  margin-top: 10px;
+  text-align: left;
+`
+
+const CloseIcon = styled.div`
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+`
+// #endregion
+
+const AbstractModal = ({ abstractModal, onClose }) => {
+  const isOpen = !!abstractModal
+  return (
+    <Modal
+      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>
+  )
+}
+
+export default AbstractModal

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

 import React from 'react'
-import { get, isEmpty } from 'lodash'
+import { get } from 'lodash'
 import { Button } from '@pubsweet/ui'
-import { connect } from 'react-redux'
 import { compose, withHandlers } from 'recompose'
 
 import classes from './Dashboard.local.scss'
+import AbstractModal from './AbstractModal'
 import DashboardItems from './DashboardItems'
 import DashboardFilters from './DashboardFilters'
 
@@ -45,25 +45,11 @@ const Dashboard = ({
       list={getItems()}
       listView={listView}
     />
-    {!isEmpty(abstractModal) && (
-      <div className={classes.modal}>
-        <div className={classes.modalContent}>
-          <div
-            className={classes.modalText}
-            dangerouslySetInnerHTML={{ __html: abstractModal }} // eslint-disable-line
-          />
-          <Button onClick={setModal()}>Close</Button>
-        </div>
-      </div>
-    )}
+    <AbstractModal abstractModal={abstractModal} onClose={setModal()} />
   </div>
 )
 
 export default compose(
-  connect(state => ({
-    filters: state.filters.filter,
-    sortOrder: state.filters.sortValue,
-  })),
   withHandlers({
     getItems: ({
       filters,

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

 import React from 'react'
 import PropTypes from 'prop-types'
-import { get, isEmpty } from 'lodash'
 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'
 
@@ -23,6 +24,7 @@ const DashboardCard = ({
   const status = get(project, 'status') || 'Draft'
   const hasFiles = !isEmpty(files)
   const abstract = get(version, 'metadata.abstract')
+  const metadata = get(version, 'metadata')
 
   return (
     <div className={classes.card}>
@@ -107,10 +109,33 @@ const DashboardCard = ({
           </div>
         </div>
       )}
+      {abstract && (
+        <ViewAbstractContainer onClick={setModal(metadata)}>
+          <Icon color="#667080" size={18}>
+            eye
+          </Icon>
+          <span>View Abstract</span>
+        </ViewAbstractContainer>
+      )}
     </div>
   )
 }
 
+const ViewAbstractContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+
+  & > span {
+    color: #667080;
+    font-family: Helvetica;
+    font-size: 14px;
+    margin-left: 8px;
+    text-align: left;
+    text-decoration: underline;
+  }
+`
+
 export default compose(
   getContext({
     setModal: PropTypes.func,

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

 import React from 'react'
-import { connect } from 'react-redux'
 import { Icon, Menu } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
 
 import classes from './Dashboard.local.scss'
-import { changeFilter, changeSort } from './redux/filters'
 
 const sortOptions = [
   { label: 'Newest first', value: 'newest' },
@@ -54,7 +52,6 @@ const DashboardFilters = ({
 )
 
 export default compose(
-  connect(null, { changeFilter, changeSort }),
   withHandlers({
     changeFilter: ({ changeFilter }) => filterKey => value => {
       changeFilter(filterKey, value)

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

@@ -19,17 +19,16 @@ export default compose(
     actions.getUsers(),
   ]),
   withState('listView', 'changeView', true),
-  withState('abstractModal', 'setAbstractModal', ''),
+  withState('abstractModal', 'setAbstractModal', null),
   withHandlers({
     changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
-    setModal: ({ setAbstractModal }) => abstract => () => {
-      setAbstractModal(abstract)
+    setModal: ({ setAbstractModal }) => (metadata = null) => () => {
+      setAbstractModal(metadata)
     },
   }),
   connect(
     state => {
-      const { collections } = state
-      const { conversion } = state
+      const { collections, conversion } = state
       const currentUser = selectCurrentUser(state)
 
       const sortedCollections = newestFirst(collections)
@@ -49,7 +48,6 @@ export default compose(
         ),
         all: sortedCollections,
       }
-
       return { collections, conversion, currentUser, dashboard }
     },
     (dispatch, { history }) => ({
@@ -95,7 +93,7 @@ export default compose(
   }),
   withContext(
     {
-      abstractModal: PropTypes.string,
+      abstractModal: PropTypes.object,
       setModal: PropTypes.func,
     },
     ({ abstractModal, setModal }) => ({

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

-const initialState = {
-  filter: {
-    status: 'all',
-    owner: 'all',
-  },
-  sortValue: 'newest',
-}
-
-const CHANGE_FILTER = 'filters/CHANGE_FILTER'
-const CHANGE_SORT = 'filters/CHANGE_SORT'
-
-export const changeFilter = (filterKey, value) => ({
-  type: CHANGE_FILTER,
-  filterKey,
-  value,
-})
-
-export const changeSort = value => ({
-  type: CHANGE_SORT,
-  value,
-})
-
-export default (state = initialState, action) => {
-  switch (action.type) {
-    case CHANGE_FILTER:
-      return {
-        ...state,
-        filter: {
-          ...state.filter,
-          [action.filterKey]: action.value,
-        },
-      }
-    case CHANGE_SORT:
-      return {
-        ...state,
-        sortValue: action.value,
-      }
-    default:
-      return state
-  }
-}

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

-export { default as filters } from './filters'

packages/components-faraday/src/index.js

@@ -4,7 +4,6 @@ module.exports = {
     reducers: {
       authors: () => require('./redux/authors').default,
       files: () => require('./redux/files').default,
-      filters: () => require('./components/Dashboard/redux/filters').default,
     },
   },
 }

yarn.lock

@@ -3585,6 +3585,10 @@ execall@^1.0.0:
   dependencies:
     clone-regexp "^1.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -8856,6 +8860,14 @@ react-input-autosize@^2.1.0:
   dependencies:
     prop-types "^15.5.8"
 
+react-modal@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.2.1.tgz#fa8f76aed55b67c22dcf1a1c15b05c8d11f18afe"
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    warning "^3.0.0"
+
 react-moment@^0.6.1:
   version "0.6.8"
   resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.6.8.tgz#8612a90f3c8afec26fef6844806d84b9d9e3b212"