feat(details): wip: refactor structure manuscript details view

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"
+  }
 }

packages/component-manuscript/src/atoms/index.js

+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 }

packages/component-manuscript/src/components/ManuscriptLayout.js

+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

packages/component-manuscript/src/components/Details.js → packages/component-manuscript/src/components/ManuscriptPage.js

 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 } from 'recompose'
-import { selectCurrentUser } from 'xpub-selectors'
+import { compose, lifecycle, withHandlers } from 'recompose'
 
+import ManuscriptLayout from './ManuscriptLayout'
 import { parseSearchParams } from './utils'
 import { reviewerDecision } from '../../../components-faraday/src/redux/reviewers'
 
-const Details = () => <div>eu sunt manuscript details</div>
-
 export default compose(
+  ConnectPage(({ match }) => [
+    actions.getCollection({ id: match.params.project }),
+    actions.getFragment(
+      { id: match.params.project },
+      { id: match.params.version },
+    ),
+  ]),
   connect(
-    state => ({
+    (state, { match }) => ({
       currentUser: selectCurrentUser(state),
+      project: selectCollection(state, match.params.project),
+      version: selectFragment(state, match.params.version),
     }),
-    { reviewerDecision, replace },
+    { reviewerDecision, replace, updateVersion: actions.updateFragment },
   ),
   lifecycle({
     componentDidMount() {
-      const { reviewerDecision, location, match, replace } = this.props
+      const { reviewerDecision, replace, location, match, project } = this.props
       const collectionId = match.params.project
       const { agree, invitationId } = parseSearchParams(location.search)
       if (agree === 'true') {
@@ -27,4 +41,11 @@ export default compose(
       }
     },
   }),
-)(Details)
+  withHandlers({
+    updateManuscript: ({ updateVersion, project, version }) => data =>
+      updateVersion(project, {
+        id: version.id,
+        ...data,
+      }),
+  }),
+)(ManuscriptLayout)

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

-export { default as ManuscriptDetails } from './Details'
+export { default as ManuscriptPage } from './ManuscriptPage'

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`,
                   )
                 }
               >

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"
       />