Add empty states for dashboard.

packages/component-dashboard/src/components/Dashboard.js

@@ -11,76 +11,73 @@ const OwnerItemWithVersion = withVersion(OwnerItem)
 const EditorItemWithVersion = withVersion(EditorItem)
 const ReviewerItemWithVersion = withVersion(ReviewerItem)
 
-const Dashboard = ({ AssignEditor, currentUser, dashboard, conversion, deleteProject, reviewerResponse, uploadManuscript }) => (
+const Dashboard = ({
+  AssignEditor,
+  currentUser,
+  dashboard,
+  conversion,
+  deleteProject,
+  reviewerResponse,
+  uploadManuscript
+}) => (
   <div className={classes.root}>
     <div className={classes.upload}>
-      <UploadManuscript
-        conversion={conversion}
-        uploadManuscript={uploadManuscript}/>
+      <UploadManuscript conversion={conversion} uploadManuscript={uploadManuscript} />
     </div>
 
     <div className={classes.section}>
-      <div className={classes.heading}>
-        My Submissions
-      </div>
+      <div className={classes.heading}>My Submissions</div>
 
-      {dashboard.owner ? (
+      {false ? (
         dashboard.owner.map(project => (
-          <OwnerItemWithVersion
-            key={project.id}
-            project={project}
-            deleteProject={deleteProject}/>
+          <OwnerItemWithVersion key={project.id} project={project} deleteProject={deleteProject} />
         ))
       ) : (
-        <EmptySubmissions/>
+        <EmptySubmissions
+          conversion={conversion}
+          uploadManuscript={uploadManuscript}
+          text={`You haven't submitted any manuscripts yet.`}
+        />
       )}
     </div>
 
-    {!!dashboard.reviewer.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>
-          My Reviews
-        </div>
-
-        {dashboard.reviewer.map(project => (
+    <div className={classes.section}>
+      <div className={classes.heading}>To review</div>
+      {!dashboard.reviewer.length ? (
+        <EmptySubmissions text={`You have no manuscripts to review for now.`} />
+      ) : (
+        dashboard.reviewer.map(project => (
           <ReviewerItemWithVersion
             key={project.id}
             project={project}
             currentUser={currentUser}
-            reviewerResponse={reviewerResponse}/>
-        ))}
-      </div>
-    )}
-
-    {!!dashboard.assign.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>
-          Assign
-        </div>
-
-        {dashboard.assign.map(project => (
-          <EditorItemWithVersion
-            key={project.id}
-            project={project}
-            AssignEditor={AssignEditor}/>
-        ))}
-      </div>
-    )}
+            reviewerResponse={reviewerResponse}
+          />
+        ))
+      )}
+    </div>
 
-    {!!dashboard.editor.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>
-          My Manuscripts
-        </div>
+    <div className={classes.section}>
+      <div className={classes.heading}>Assign</div>
+      {!dashboard.assign.length ? (
+        <EmptySubmissions text={`Nu este nimic nici aici.`} />
+      ) : (
+        dashboard.assign.map(project => (
+          <EditorItemWithVersion key={project.id} project={project} AssignEditor={AssignEditor} />
+        ))
+      )}
+    </div>
 
-        {dashboard.editor.map(project => (
-          <EditorItemWithVersion
-            key={project.id}
-            project={project}
-            AssignEditor={AssignEditor}/>
-        ))}
-      </div>
-    )}
+    <div className={classes.section}>
+      <div className={classes.heading}>My Manuscripts</div>
+      {!dashboard.editor.length ? (
+        <EmptySubmissions text={`You have no manuscripts.`} />
+      ) : (
+        dashboard.editor.map(project => (
+          <EditorItemWithVersion key={project.id} project={project} AssignEditor={AssignEditor} />
+        ))
+      )}
+    </div>
   </div>
 )
 

packages/component-dashboard/src/components/EmptySubmissions.js

 import React from 'react'
+import UploadManuscript from './UploadManuscript'
 import classes from './EmptySubmissions.local.scss'
 
-const EmptySubmissions = () => (
+const EmptySubmissions = ({ text, conversion, uploadManuscript }) => (
   <div className={classes.root}>
-    <div>You haven't submitted any manuscripts yet.</div>
+    <div>{text}</div>
+    {uploadManuscript && (
+      <UploadManuscript
+        conversion={conversion}
+        uploadManuscript={uploadManuscript}
+        text={'Click here to create a submission.'}
+      />
+    )}
   </div>
 )
 

packages/component-dashboard/src/components/EmptySubmissions.md

 A message that is displayed when the current user has no submissions.
 
 ```js
-<EmptySubmissions/>
+<EmptySubmissions text={'Text to be shown.'} conversion={'optional'} uploadManuscript={'optional'}/>
 ```

packages/component-dashboard/src/components/UploadManuscript.js

@@ -6,36 +6,41 @@ import classes from './UploadManuscript.local.scss'
 
 const isIdle = conversion => !(conversion.converting || conversion.complete || conversion.error)
 
-const UploadManuscript = ({ uploadManuscript, conversion }) => (
+const UploadManuscript = ({ uploadManuscript, conversion, text }) => (
   <Dropzone
     onDrop={uploadManuscript}
     accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-    className={classes.dropzone}>
+    className={classes.dropzone}
+  >
     <div className={classes.root}>
-      <div className={classnames({
-        [classes.idle]: isIdle(conversion),
-        [classes.converting]: conversion.converting,
-        [classes.error]: conversion.error,
-        [classes.complete]: conversion.complete
-      })}>
-        <span className={classes.icon}>
-          <Icon color="var(--color-primary)">
-            {conversion.complete ? 'check_circle' : 'plus_circle'}
-          </Icon>
-        </span>
-      </div>
-
-      <div className={classes.main}>
-        {conversion.error ? (
-          <div className={classes.error}>
-            {conversion.error.message}
-          </div>
-        ) : (
-          <div className={classes.info}>
-            {conversion.complete ? 'Submission created' : 'Create submission'}
+      {text ? (
+        <span className={classes['upload-text']}>{text}</span>
+      ) : (
+        [
+          <div
+            key="submitIcon"
+            className={classnames({
+              [classes.idle]: isIdle(conversion),
+              [classes.converting]: conversion.converting,
+              [classes.error]: conversion.error,
+              [classes.complete]: conversion.complete
+            })}
+          >
+            <span className={classes.icon}>
+              <Icon color="var(--color-primary)">{conversion.complete ? 'check_circle' : 'plus_circle'}</Icon>
+            </span>
+          </div>,
+          <div className={classes.main} key="submitText">
+            {conversion.error ? (
+              <div className={classes.error}>{conversion.error.message}</div>
+            ) : (
+              <div className={classes.info}>
+                {conversion.complete ? 'Submission created' : 'Create submission'}
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        ]
+      )}
     </div>
   </Dropzone>
 )

packages/component-dashboard/src/components/UploadManuscript.local.scss

@@ -125,3 +125,8 @@
     stroke-dashoffset: 0;
   }
 }
+
+.upload-text {
+  color: var(--color-primary);
+  line-height: 0.5;
+}

packages/xpub-collabra/config/client.js

@@ -2,7 +2,7 @@ module.exports = {
   'pubsweet-client': {
     'API_ENDPOINT': 'http://localhost:3000/api',
     'login-redirect': '/',
-    'redux-log': false,
+    'redux-log': true,
     theme: process.env.PUBSWEET_THEME
   },
 }