From a736e647b5e47b6de9a4fe8aceea6d5cabf48160 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Tue, 24 Apr 2018 17:00:09 +0300
Subject: [PATCH] feat(details): wip: refactor structure manuscript details
view
---
packages/component-manuscript/package.json | 14 ++++-
.../component-manuscript/src/atoms/index.js | 60 +++++++++++++++++++
.../src/components/Details.js | 30 ----------
.../src/components/ManuscriptLayout.js | 23 +++++++
.../src/components/ManuscriptPage.js | 51 ++++++++++++++++
.../src/components/index.js | 2 +-
.../src/components/Dashboard/DashboardCard.js | 2 +-
packages/xpub-faraday/app/routes.js | 4 +-
8 files changed, 151 insertions(+), 35 deletions(-)
create mode 100644 packages/component-manuscript/src/atoms/index.js
delete mode 100644 packages/component-manuscript/src/components/Details.js
create mode 100644 packages/component-manuscript/src/components/ManuscriptLayout.js
create mode 100644 packages/component-manuscript/src/components/ManuscriptPage.js
diff --git a/packages/component-manuscript/package.json b/packages/component-manuscript/package.json
index 110b73775..2aab328d2 100644
--- a/packages/component-manuscript/package.json
+++ b/packages/component-manuscript/package.json
@@ -2,5 +2,17 @@
"name": "pubsweet-component-manuscript",
"version": "0.0.1",
"main": "src",
- "license": "MIT"
+ "license": "MIT",
+ "dependencies": {
+ "prop-types": "^15.5.10",
+ "recompose": "^0.26.0",
+ "xpub-connect": "^0.0.10",
+ "xpub-selectors": "^0.0.5"
+ },
+ "peerDependencies": {
+ "pubsweet-client": ">=2.1.0",
+ "react": ">=16",
+ "react-redux": ">=5.0.2",
+ "react-router-dom": ">=4.2.2"
+ }
}
diff --git a/packages/component-manuscript/src/atoms/index.js b/packages/component-manuscript/src/atoms/index.js
new file mode 100644
index 000000000..69667e73d
--- /dev/null
+++ b/packages/component-manuscript/src/atoms/index.js
@@ -0,0 +1,60 @@
+import { th } from '@pubsweet/ui'
+import styled, { css } from 'styled-components'
+
+const defaultText = css`
+ color: ${th('colorText')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
+const Root = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ max-width: 60em;
+`
+const Title = styled.div`
+ ${defaultText};
+ font-size: ${th('fontSizeBase')};
+ color: ${th('colorPrimary')};
+ margin-bottom: ${th('gridUnit')};
+ text-align: left;
+`
+
+const Header = styled.div`
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+`
+
+const BreadCrumbs = styled.div`
+ & span {
+ color: ${th('colorPrimary')};
+ cursor: pointer;
+ font-size: ${th('fontSizeBase')};
+ text-align: left;
+
+ &:after {
+ content: '>';
+ padding: 0 calc(${th('subGridUnit')}*2);
+ }
+
+ &:last-child {
+ font-size: ${th('fontSizeBase')};
+ font-weight: bold;
+ margin-right: ${th('subGridUnit')};
+ &:after {
+ display: none;
+ }
+ }
+`
+const ManuscriptId = styled.div`
+ ${defaultText};
+ color: ${th('colorPrimary')};
+ font-size: ${th('fontSizeBase')};
+ margin-right: 8px;
+ text-align: left;
+ text-transform: uppercase;
+ white-space: nowrap;
+`
+
+export { Root, BreadCrumbs, Header, Title, ManuscriptId }
diff --git a/packages/component-manuscript/src/components/Details.js b/packages/component-manuscript/src/components/Details.js
deleted file mode 100644
index 1445da287..000000000
--- a/packages/component-manuscript/src/components/Details.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { replace } from 'react-router-redux'
-import { compose, lifecycle } from 'recompose'
-import { selectCurrentUser } from 'xpub-selectors'
-
-import { parseSearchParams } from './utils'
-import { reviewerDecision } from '../../../components-faraday/src/redux/reviewers'
-
-const Details = () => <div>eu sunt manuscript details</div>
-
-export default compose(
- connect(
- state => ({
- currentUser: selectCurrentUser(state),
- }),
- { reviewerDecision, replace },
- ),
- lifecycle({
- componentDidMount() {
- const { reviewerDecision, location, match, replace } = this.props
- const collectionId = match.params.project
- const { agree, invitationId } = parseSearchParams(location.search)
- if (agree === 'true') {
- reviewerDecision(invitationId, collectionId, true)
- replace(location.pathname)
- }
- },
- }),
-)(Details)
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
new file mode 100644
index 000000000..3935b6404
--- /dev/null
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { Root, BreadCrumbs, Title, Header, ManuscriptId } from '../atoms'
+
+const ManuscriptLayout = ({
+ currentUser,
+ updateManuscript,
+ project,
+ version,
+}) => (
+ <Root>
+ <Header>
+ <BreadCrumbs>
+ <span>Dashboard</span>
+ <span>Manuscript Details</span>
+ </BreadCrumbs>
+ <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+ </Header>
+ <Title dangerouslySetInnerHTML={{ __html: version.metadata.title }} />
+ </Root>
+)
+
+export default ManuscriptLayout
diff --git a/packages/component-manuscript/src/components/ManuscriptPage.js b/packages/component-manuscript/src/components/ManuscriptPage.js
new file mode 100644
index 000000000..7fc178ee6
--- /dev/null
+++ b/packages/component-manuscript/src/components/ManuscriptPage.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { actions } from 'pubsweet-client'
+import { ConnectPage } from 'xpub-connect'
+import {
+ selectCurrentUser,
+ selectCollection,
+ selectFragment,
+} from 'xpub-selectors'
+import { replace } from 'react-router-redux'
+import { compose, lifecycle, withHandlers } from 'recompose'
+
+import ManuscriptLayout from './ManuscriptLayout'
+import { parseSearchParams } from './utils'
+import { reviewerDecision } from '../../../components-faraday/src/redux/reviewers'
+
+export default compose(
+ ConnectPage(({ match }) => [
+ actions.getCollection({ id: match.params.project }),
+ actions.getFragment(
+ { id: match.params.project },
+ { id: match.params.version },
+ ),
+ ]),
+ connect(
+ (state, { match }) => ({
+ currentUser: selectCurrentUser(state),
+ project: selectCollection(state, match.params.project),
+ version: selectFragment(state, match.params.version),
+ }),
+ { reviewerDecision, replace, updateVersion: actions.updateFragment },
+ ),
+ lifecycle({
+ componentDidMount() {
+ const { reviewerDecision, replace, location, match, project } = this.props
+ const collectionId = match.params.project
+ const { agree, invitationId } = parseSearchParams(location.search)
+ if (agree === 'true') {
+ reviewerDecision(invitationId, collectionId, true)
+ replace(location.pathname)
+ }
+ },
+ }),
+ withHandlers({
+ updateManuscript: ({ updateVersion, project, version }) => data =>
+ updateVersion(project, {
+ id: version.id,
+ ...data,
+ }),
+ }),
+)(ManuscriptLayout)
diff --git a/packages/component-manuscript/src/components/index.js b/packages/component-manuscript/src/components/index.js
index 08c9ae908..e2e5b2d91 100644
--- a/packages/component-manuscript/src/components/index.js
+++ b/packages/component-manuscript/src/components/index.js
@@ -1 +1 @@
-export { default as ManuscriptDetails } from './Details'
+export { default as ManuscriptPage } from './ManuscriptPage'
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 12c52f0f6..dfcffae03 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -92,7 +92,7 @@ const DashboardCard = ({
data-test="button-details"
onClick={() =>
history.push(
- `/projects/${project.id}/versions/${version.id}/manuscript`,
+ `/projects/${project.id}/versions/${version.id}/details`,
)
}
>
diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js
index 4eca5f8fc..704daa775 100644
--- a/packages/xpub-faraday/app/routes.js
+++ b/packages/xpub-faraday/app/routes.js
@@ -6,7 +6,7 @@ import Login from 'pubsweet-component-login/LoginContainer'
import Signup from 'pubsweet-component-signup/SignupContainer'
import { Wizard } from 'pubsweet-component-wizard/src/components'
-import { ManuscriptDetails } from 'pubsweet-component-manuscript/src/components'
+import { ManuscriptPage } from 'pubsweet-component-manuscript/src/components'
import DashboardPage from 'pubsweet-components-faraday/src/components/Dashboard'
import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage'
@@ -63,7 +63,7 @@ const Routes = () => (
<Route component={SignUpInvitationPage} exact path="/invite" />
<Route component={ReviewerSignUp} exact path="/invite-reviewer" />
<PrivateRoute
- component={ManuscriptDetails}
+ component={ManuscriptPage}
exact
path="/projects/:project/versions/:version/details"
/>
--
GitLab