feat(manuscript-details): use real data

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>
 )
 

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

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

-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>
 )
 

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

 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;

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>

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': {