feat: improvements for the dashboard component

app/components/component-xpub-dashboard/src/components/Dashboard.js → app/components/component-dashboard/src/components/Dashboard.js

 import React from 'react'
-import { useQuery, useMutation, ApolloConsumer } from '@apollo/react-hooks'
-import Authorize from 'pubsweet-client/src/helpers/Authorize'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import { Action, Button } from '@pubsweet/ui'
+// import Authorize from 'pubsweet-client/src/helpers/Authorize'
 
-import config from 'config'
 import queries from '../graphql/queries/'
 import mutations from '../graphql/mutations/'
-import { Page, Section, Heading, UploadContainer } from './molecules/Page'
-import UploadManuscript from './UploadManuscript'
+import { Container, Section, Heading, Content } from '../style'
 import EditorItem from './sections/EditorItem'
 import OwnerItem from './sections/OwnerItem'
 import ReviewerItem from './sections/ReviewerItem'
-
-const { acceptUploadFiles } = config['pubsweet-component-xpub-dashboard'] || {}
-
-const acceptFiles =
-  acceptUploadFiles.length > 0
-    ? acceptUploadFiles.join()
-    : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+import { Spinner } from '../../../shared'
 
 const updateReviewer = (proxy, { data: { reviewerResponse } }) => {
   const id = reviewerResponse.object.objectId
@@ -36,40 +29,15 @@ const updateReviewer = (proxy, { data: { reviewerResponse } }) => {
   proxy.writeQuery({ query: queries.dashboard, data })
 }
 
-// export default compose(
-//   withProps(({ journals, currentUser }) => ({
-//     dashboard: (journals || {}).manuscripts || [],
-//     journals,
-//     currentUser,
-//     acceptFiles,
-//   })),
-//   upload,
-// )(Dashboard)
-
-const Dashboard = ({
-  // acceptFiles,
-  // currentUser, // graphql
-  // dashboard, // graphql
-  // journals, // graphql
-  // deleteManuscript, // graphql
-  // reviewerResponse, // graphql
-  // uploadManuscript, // from compose
-  ...props
-}) => {
+const Dashboard = ({ history, ...props }) => {
   // const uploadManuscript = upload()
-
   // const [conversion] = useContext(XpubContext)
 
   const { loading, data } = useQuery(queries.dashboard)
-  const dashboard = ((data && data.journals) || {}).manuscripts || []
-  const journals = data && data.journals
-  const currentUser = data && data.currentUser
-
   const [reviewerRespond] = useMutation(mutations.reviewerResponseMutation, {
     // variables: { currentUserId, action, teamId },
     update: updateReviewer,
   })
-
   const [deleteManuscript] = useMutation(mutations.deleteManuscriptMutation, {
     // variables: { id: manuscript.id },
     update: (proxy, { data: { deleteManuscript } }) => {
@@ -84,79 +52,74 @@ const Dashboard = ({
     },
   })
 
-  if (loading) return <div>Loading...</div>
+  if (loading) return <Spinner />
+
+  const dashboard = (data && data.manuscripts) || []
+  const currentUser = data && data.currentUser
 
   return (
-    <Page>
-      <UploadContainer>
-        <ApolloConsumer>
-          {client => (
-            <UploadManuscript
-              acceptFiles={acceptFiles}
-              client={client}
-              currentUser={currentUser}
-              history={props.history}
-              journals={journals}
-            />
-          )}
-        </ApolloConsumer>
-      </UploadContainer>
+    <Container>
+      <Button onClick={() => history.push('/journal/newSubmission')} primary>
+        New submission
+      </Button>
 
-      {!dashboard.length && (
-        <UploadContainer>Nothing to do at the moment.</UploadContainer>
-      )}
+      {!dashboard.length && <Section>Nothing to do at the moment.</Section>}
       {/* <Authorize object={dashboard} operation="can view my submission section"> */}
       {dashboard.length > 0 ? (
-        <Section>
-          <Heading>My Submissions</Heading>
-          {dashboard.map(submission => (
-            <OwnerItem
-              deleteManuscript={() =>
-                // eslint-disable-next-line no-alert
-                window.confirm(
-                  'Are you sure you want to delete this submission?',
-                ) && deleteManuscript({ variables: { id: submission.id } })
-              }
-              journals={journals}
-              key={`submission-${submission.id}`}
-              version={submission}
-            />
-          ))}
-        </Section>
+        <Content>
+          <Section>
+            <Heading>My Submissions</Heading>
+
+            {dashboard.map(submission => (
+              <OwnerItem
+                deleteManuscript={() =>
+                  // eslint-disable-next-line no-alert
+                  window.confirm(
+                    'Are you sure you want to delete this submission?',
+                  ) && deleteManuscript({ variables: { id: submission.id } })
+                }
+                key={`submission-${submission.id}`}
+                version={submission}
+              />
+            ))}
+          </Section>
+        </Content>
       ) : null}
       {/* </Authorize>
       <Authorize object={dashboard} operation="can view review section"> */}
       {dashboard.length > 0 ? (
-        <Section>
-          <Heading>To review</Heading>
-          {dashboard.map(review => (
-            <ReviewerItem
-              currentUser={currentUser}
-              journals={journals}
-              key={review.id}
-              reviewerRespond={reviewerRespond}
-              version={review}
-            />
-          ))}
-        </Section>
+        <Content>
+          <Section>
+            <Heading>To review</Heading>
+            {dashboard.map(review => (
+              <ReviewerItem
+                currentUser={currentUser}
+                key={review.id}
+                reviewerRespond={reviewerRespond}
+                version={review}
+              />
+            ))}
+          </Section>
+        </Content>
       ) : null}
       {/* </Authorize> */}
 
       {/* <Authorize object={dashboard} operation="can view my manuscripts section"> */}
       {dashboard.length > 0 ? (
-        <Section>
-          <Heading>My Manuscripts</Heading>
-          {dashboard.map(manuscript => (
-            <EditorItem
-              journals={journals}
-              key={`manuscript-${manuscript.id}`}
-              version={manuscript}
-            />
-          ))}
-        </Section>
+        <Content>
+          <Section>
+            <Heading>My Manuscripts</Heading>
+            {dashboard.map(manuscript => (
+              <EditorItem
+                key={`manuscript-${manuscript.id}`}
+                version={manuscript}
+              />
+            ))}
+          </Section>
+        </Content>
       ) : null}
       {/* </Authorize> */}
-    </Page>
+    </Container>
   )
 }
 export default Dashboard

app/components/component-xpub-dashboard/src/components/sections/EditorItem.js → app/components/component-dashboard/src/components/sections/EditorItem.js

@@ -3,7 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 // import Authorize from 'pubsweet-client/src/helpers/Authorize'
 import { Action, ActionGroup } from '@pubsweet/ui'
-import { Item, Header, Body } from '../molecules/Item'
+import { Item, Header, Body } from '../../style'
 import Status from '../Status'
 import Meta from '../metadata/Meta'
 import MetadataSections from '../metadata/MetadataSections'

app/components/component-xpub-dashboard/src/components/sections/OwnerItem.js → app/components/component-dashboard/src/components/sections/OwnerItem.js

@@ -4,7 +4,7 @@ import { pickBy } from 'lodash'
 import { Action, ActionGroup } from '@pubsweet/ui'
 // import Authorize from 'pubsweet-client/src/helpers/Authorize'
 
-import { Item, Header, Body } from '../molecules/Item'
+import { Item, Header, Body } from '../../style'
 import Status from '../Status'
 import VersionTitle from './VersionTitle'
 

app/components/component-xpub-dashboard/src/components/sections/ReviewerItem.js → app/components/component-dashboard/src/components/sections/ReviewerItem.js

 import React from 'react'
 import { Button } from '@pubsweet/ui'
 // import Authorize from 'pubsweet-client/src/helpers/Authorize'
-import { Item, Body, Divider } from '../molecules/Item'
-import { Links, LinkContainer } from '../molecules/Links'
-import { Actions, ActionContainer } from '../molecules/Actions'
+import {
+  Item,
+  Body,
+  Divider,
+  Links,
+  LinkContainer,
+  Actions,
+  ActionContainer,
+} from '../../style'
 
 import JournalLink from '../JournalLink'
 import VersionTitle from './VersionTitle'

app/components/component-xpub-dashboard/src/graphql/queries/index.js → app/components/component-dashboard/src/graphql/queries/index.js

@@ -27,7 +27,6 @@ export default {
         teams {
           id
           role
-          type
           name
           object {
             objectId