From c29fb791af762bfa4fbcdbe8f5b976f813dc34e2 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 26 Apr 2018 18:18:20 +0300
Subject: [PATCH] feat(manuscript-details): use real data
---
.../src/components/Authors.js | 22 +++++---
.../src/components/Expandable.js | 3 +-
.../src/components/Files.js | 54 +++++++++++-------
.../src/components/ManuscriptDetails.js | 56 +++++++++++++------
.../src/components/ManuscriptLayout.js | 2 +-
packages/xpub-faraday/config/default.js | 2 +-
6 files changed, 89 insertions(+), 50 deletions(-)
diff --git a/packages/component-manuscript/src/components/Authors.js b/packages/component-manuscript/src/components/Authors.js
index 0e761b69f..afcf825b1 100644
--- a/packages/component-manuscript/src/components/Authors.js
+++ b/packages/component-manuscript/src/components/Authors.js
@@ -10,14 +10,7 @@ const TR = ({ name, email, affiliation }) => (
</Row>
)
-const authors = [
- { name: 'Pallavi1', email: 'cocojambo1@gmail.com', affiliation: 'UTI' },
- { name: 'Pallavi2', email: 'cocojambo2@gmail.com', affiliation: 'UTI' },
- { name: 'Pallavi3', email: 'cocojambo3@gmail.com', affiliation: 'UTI' },
- { name: 'Pallavi4', email: 'cocojambo4@gmail.com', affiliation: 'UTI' },
-]
-
-const Authors = () => (
+const Authors = ({ authors }) => (
<Table>
<thead>
<tr>
@@ -26,7 +19,18 @@ const Authors = () => (
<td>Affiliation</td>
</tr>
</thead>
- <tbody>{authors.map(a => <TR key={a.email} {...a} />)}</tbody>
+ <tbody>
+ {authors.map(
+ ({ firstName = '', lastName = '', email = '', affiliation = '' }) => (
+ <TR
+ affiliation={affiliation}
+ email={email}
+ key={email}
+ name={`${firstName} ${lastName}`}
+ />
+ ),
+ )}
+ </tbody>
</Table>
)
diff --git a/packages/component-manuscript/src/components/Expandable.js b/packages/component-manuscript/src/components/Expandable.js
index 122e0d13e..386fa22d2 100644
--- a/packages/component-manuscript/src/components/Expandable.js
+++ b/packages/component-manuscript/src/components/Expandable.js
@@ -18,7 +18,7 @@ const Expandable = ({ expanded, label, children, toggle }) => (
)
export default compose(
- withState('expanded', 'setExpanded', false),
+ withState('expanded', 'setExpanded', ({ startExpanded }) => startExpanded),
withHandlers({
toggle: ({ setExpanded }) => () => {
setExpanded(e => !e)
@@ -60,7 +60,6 @@ const Root = styled.div`
cursor: pointer;
display: flex;
flex-direction: column;
- /* height: ${({ expanded }) => `${expanded ? 160 : 40}px`}; */
transition: all 0.3s;
`
// #endregion
diff --git a/packages/component-manuscript/src/components/Files.js b/packages/component-manuscript/src/components/Files.js
index 7a5ff48b7..68678e3e8 100644
--- a/packages/component-manuscript/src/components/Files.js
+++ b/packages/component-manuscript/src/components/Files.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
import styled, { css } from 'styled-components'
import { th, Icon } from '@pubsweet/ui'
@@ -17,7 +17,7 @@ const parseFileSize = (size = 0) => {
return `${size} bytes`
}
-const File = ({ fileName = 'Some_awesome_stuff.pdf', fileSize }) => (
+const File = ({ name = 'filename', size }) => (
<FileRoot>
<IconButton>
<Icon primary size={3}>
@@ -29,28 +29,42 @@ const File = ({ fileName = 'Some_awesome_stuff.pdf', fileSize }) => (
download
</Icon>
</IconButton>
- <FileName>{fileName}</FileName>
- <FileSize>{parseFileSize(fileSize)}</FileSize>
+ <FileName>{name}</FileName>
+ <FileSize>{parseFileSize(size)}</FileSize>
</FileRoot>
)
-const Files = () => (
+const Files = ({
+ files: { manuscripts = [], coverLetter = [], supplementary = [] },
+}) => (
<Root>
- <Header>
- <span>Main manuscript</span>
- <div />
- </Header>
- <File fileName="file1.png" fileSize={212312312} />
- <File fileName="file2.png" fileSize={3231} />
- <File fileName="file3.png" fileSize={5521231} />
- <Header>
- <span>Supplimentary files</span>
- <div />
- </Header>
- <Header>
- <span>Cover letter</span>
- <div />
- </Header>
+ {manuscripts.length > 0 && (
+ <Fragment>
+ <Header>
+ <span>Main manuscript</span>
+ <div />
+ </Header>
+ {manuscripts.map(file => <File key={file.id} {...file} />)}
+ </Fragment>
+ )}
+ {supplementary.length > 0 && (
+ <Fragment>
+ <Header>
+ <span>Supplemetary files</span>
+ <div />
+ </Header>
+ {supplementary.map(file => <File key={file.id} {...file} />)}
+ </Fragment>
+ )}
+ {coverLetter.length > 0 && (
+ <Fragment>
+ <Header>
+ <span>Supplemetary files</span>
+ <div />
+ </Header>
+ {coverLetter.map(file => <File key={file.id} {...file} />)}
+ </Fragment>
+ )}
</Root>
)
diff --git a/packages/component-manuscript/src/components/ManuscriptDetails.js b/packages/component-manuscript/src/components/ManuscriptDetails.js
index ca2fcf96a..3e487e4e0 100644
--- a/packages/component-manuscript/src/components/ManuscriptDetails.js
+++ b/packages/component-manuscript/src/components/ManuscriptDetails.js
@@ -1,35 +1,56 @@
import React from 'react'
+import { isEmpty } from 'lodash'
import { th } from '@pubsweet/ui'
import styled from 'styled-components'
import { Authors, Expandable, Files } from './'
-const Conflict = () => (
- <Text>
- “Prevention is better than cure.†Well said and well understood! But there
+const defaultConflict = `
+“Prevention is better than cure.†Well said and well understood! But there
are certain types of headaches, which are part and parcel of you; gifted to
you by birth! Sinus headache is one of them, unfortunately. Many say about
sinus, “that which can not be cured, must be endured!’ You can control it,
reduce its impact. Can it be ever eradicated? The answer is in the negative,
as far as the present day medical research can take you! In sinus,
invariably you have the headache, but every headache is not sinus! Sinus and
- nasal passage problems are the cause of headache, mostly! It is not that you
- </Text>
+ nasal passage problems are the cause of headache, mostly! It is not that you`
+const Conflict = ({ conflict = defaultConflict }) => <Text>{conflict}</Text>
+
+const Abstract = ({ abstract }) => (
+ <Text dangerouslySetInnerHTML={{ __html: abstract }} />
)
-const ManuscriptDetails = () => (
+const ManuscriptDetails = ({
+ collection,
+ fragment: {
+ conflicts,
+ files = {},
+ authors = [],
+ metadata: { abstract = '' },
+ },
+}) => (
<Root>
- <Expandable label="Details">
- <Expandable label="abstract">wai sebi nu fi nasol</Expandable>
- <Expandable label="Conflict of interest">
- <Conflict />
- </Expandable>
- <Expandable label="authors">
- <Authors />
- </Expandable>
- <Expandable label="files">
- <Files />
- </Expandable>
+ <Expandable label="Details" startExpanded>
+ {!!abstract && (
+ <Expandable label="abstract">
+ <Abstract abstract={abstract} />
+ </Expandable>
+ )}
+ {conflicts.hasConflicts !== 'no' && (
+ <Expandable label="Conflict of interest">
+ <Conflict conflict={conflicts.conflict} />
+ </Expandable>
+ )}
+ {authors.length > 0 && (
+ <Expandable label="authors" startExpanded>
+ <Authors authors={authors} />
+ </Expandable>
+ )}
+ {!isEmpty(files) && (
+ <Expandable label="files">
+ <Files files={files} />
+ </Expandable>
+ )}
</Expandable>
</Root>
)
@@ -44,6 +65,7 @@ const Text = styled.span`
`
const Root = styled.div`
+ background-color: ${th('colorBackground')};
border: ${th('borderDefault')};
margin-top: calc(${th('subGridUnit')} * 2);
transition: height 0.3s;
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index c1289ce08..645d85132 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -28,7 +28,7 @@ const ManuscriptLayout = ({
<ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
</Header>
<ManuscriptHeader journal={journal} project={project} version={version} />
- <ManuscriptDetails />
+ <ManuscriptDetails collection={project} fragment={version} />
</Container>
<SideBar flex={1}>Sidebar</SideBar>
</Root>
diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js
index 3629049fa..be3a905e9 100644
--- a/packages/xpub-faraday/config/default.js
+++ b/packages/xpub-faraday/config/default.js
@@ -39,7 +39,7 @@ module.exports = {
'pubsweet-client': {
API_ENDPOINT: '/api',
'login-redirect': '/',
- 'redux-log': false,
+ 'redux-log': true,
theme: process.env.PUBSWEET_THEME,
},
'mail-transport': {
--
GitLab