decision control start review open and fix recommendation not showing

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

@@ -18,69 +18,71 @@ const Dashboard = ({
   deleteProject,
   reviewerResponse,
   uploadManuscript,
-}) => (
-  <div className={classes.root}>
-    <div className={classes.upload}>
-      <UploadManuscript
-        conversion={conversion}
-        uploadManuscript={uploadManuscript}
-      />
-    </div>
+}) => {
+  return (
+    <div className={classes.root}>
+      <div className={classes.upload}>
+        <UploadManuscript
+          conversion={conversion}
+          uploadManuscript={uploadManuscript}
+        />
+      </div>
 
-    {!dashboard.owner.length &&
-      !dashboard.reviewer.length &&
-      !dashboard.editor.length && (
-        <div className={classes.section}>
-          <div className={classes.empty}>
-            Nothing to do at the moment. Please upload a document.
+      {!dashboard.owner.length &&
+        !dashboard.reviewer.length &&
+        !dashboard.editor.length && (
+          <div className={classes.section}>
+            <div className={classes.empty}>
+              Nothing to do at the moment. Please upload a document.
+            </div>
           </div>
+        )}
+
+      {!!dashboard.owner.length && (
+        <div className={classes.section}>
+          <div className={classes.heading}>My Submissions</div>
+          {dashboard.owner.map(project => (
+            <OwnerItemWithVersion
+              deleteProject={() =>
+                window.confirm(
+                  'Are you sure you want to delete this submission?',
+                ) && deleteProject(project)
+              }
+              key={project.id}
+              project={project}
+            />
+          ))}
         </div>
       )}
 
-    {!!dashboard.owner.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>My Submissions</div>
-        {dashboard.owner.map(project => (
-          <OwnerItemWithVersion
-            deleteProject={() =>
-              window.confirm(
-                'Are you sure you want to delete this submission?',
-              ) && deleteProject(project)
-            }
-            key={project.id}
-            project={project}
-          />
-        ))}
-      </div>
-    )}
-
-    {!!dashboard.reviewer.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>To review</div>
-        {dashboard.reviewer.map(project => (
-          <ReviewerItemWithVersion
-            currentUser={currentUser}
-            key={project.id}
-            project={project}
-            reviewerResponse={reviewerResponse}
-          />
-        ))}
-      </div>
-    )}
+      {!!dashboard.reviewer.length && (
+        <div className={classes.section}>
+          <div className={classes.heading}>To review</div>
+          {dashboard.reviewer.map(project => (
+            <ReviewerItemWithVersion
+              currentUser={currentUser}
+              key={project.id}
+              project={project}
+              reviewerResponse={reviewerResponse}
+            />
+          ))}
+        </div>
+      )}
 
-    {!!dashboard.editor.length && (
-      <div className={classes.section}>
-        <div className={classes.heading}>My Manuscripts</div>
-        {dashboard.editor.map(project => (
-          <EditorItemWithVersion
-            AssignEditor={AssignEditor}
-            key={project.id}
-            project={project}
-          />
-        ))}
-      </div>
-    )}
-  </div>
-)
+      {!!dashboard.editor.length && (
+        <div className={classes.section}>
+          <div className={classes.heading}>My Manuscripts</div>
+          {dashboard.editor.map(project => (
+            <EditorItemWithVersion
+              AssignEditor={AssignEditor}
+              key={project.id}
+              project={project}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export default Dashboard

packages/component-review/src/components/decision/DecisionReview.js

@@ -4,39 +4,71 @@ import { withJournal } from 'xpub-journal'
 import Review from '../review/Review'
 import classes from './DecisionReview.local.scss'
 
-const DecisionReview = ({ review, reviewer, journal, open, toggleOpen }) => (
-  <div>
-    <div className={classes.heading}>
-      <span
-        className={classes.indicator}
-        style={{
-          backgroundColor: review.recommendation
-            ? journal.recommendations.find(
-                item => item.value === review.recommendation,
-              ).color
-            : 'black',
-        }}
-      />
+const ToggleReview = ({ open, toggle }) => (
+  <button className={classes.toggle} onClick={toggle}>
+    {open ? 'Hide' : 'Show'}
+  </button>
+)
 
-      <span className={classes.ordinal}>Review {reviewer.ordinal}</span>
+const Bullet = ({ journal, recommendation }) => {
+  const recommendationColor = journal.recommendations.find(
+    item => item.value === recommendation,
+  ).color
 
-      <span className={classes.name}>{reviewer.name || 'Anonymous'}</span>
+  return (
+    <span
+      className={classes.indicator}
+      style={{
+        backgroundColor: recommendation ? recommendationColor : 'black',
+      }}
+    />
+  )
+}
 
-      <span className={classes.dots} />
+const ReviewHeading = ({
+  journal,
+  name,
+  open,
+  ordinal,
+  recommendation,
+  toggleOpen,
+}) => (
+  <div className={classes.heading}>
+    <Bullet journal={journal} recommendation={recommendation} />
 
-      <button className={classes.toggle} onClick={toggleOpen}>
-        {open ? 'Hide' : 'Show'}
-      </button>
-    </div>
+    <span className={classes.ordinal}>Review {ordinal}</span>
+    <span className={classes.name}>{name || 'Anonymous'}</span>
 
-    {open && (
-      <div className={classes.review}>
-        <Review review={review} />
-      </div>
-    )}
+    <span className={classes.dots} />
+
+    <ToggleReview open toggle={toggleOpen} />
   </div>
 )
 
+const DecisionReview = ({ review, reviewer, journal, open, toggleOpen }) => {
+  const { recommendation } = review.Recommendation
+  const { name, ordinal } = reviewer
+
+  return (
+    <div>
+      <ReviewHeading
+        journal={journal}
+        name={name}
+        open={open}
+        ordinal={ordinal}
+        recommendation={recommendation}
+        toggleOpen={toggleOpen}
+      />
+
+      {open && (
+        <div className={classes.review}>
+          <Review review={review} />
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default compose(
   withJournal,
   withState('open', 'setOpen', ({ open }) => open),

packages/component-review/src/components/decision/DecisionReviews.js

@@ -13,6 +13,7 @@ const DecisionReviews = ({ journal, version }) => (
         .map((review, index) => (
           <div className={classes.review} key={review.id}>
             <DecisionReview
+              open
               review={review}
               reviewer={{
                 name: null,

packages/component-review/src/components/review/Review.js

@@ -40,7 +40,9 @@ const Review = ({ review }) => (
     <div>
       <div className={classes.heading}>Recommendation</div>
 
-      <div className={classes.recommendation}>{review.recommendation}</div>
+      <div className={classes.recommendation}>
+        {review.Recommendation.recommendation}
+      </div>
     </div>
   </div>
 )