Hin 904

packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js

@@ -12,6 +12,7 @@ import {
   marginHelper,
   ContextualBox,
   ReviewersTable,
+  PublonsTable,
   ReviewerReport,
   InviteReviewers,
   ReviewerBreakdown,
@@ -24,10 +25,14 @@ const ReviewerDetails = ({
   reports,
   fragment,
   invitations,
+  publonReviewers,
+  isFetching,
   previewFile,
   downloadFile,
+  fetchingError,
   canInviteReviewers,
   onInviteReviewer,
+  onInvitePublonReviewer,
   onResendReviewerInvite,
   onRevokeReviewerInvite,
   canViewReviewersDetails,
@@ -52,12 +57,19 @@ const ReviewerDetails = ({
               >
                 <H4>Reviewer Details</H4>
               </TabButton>
-
               <TabButton
                 ml={1}
                 mr={1}
                 onClick={() => changeTab(1)}
                 selected={selectedTab === 1}
+              >
+                <H4>Reviewer Suggestions</H4>
+              </TabButton>
+              <TabButton
+                ml={1}
+                mr={1}
+                onClick={() => changeTab(2)}
+                selected={selectedTab === 2}
               >
                 <H4>Reviewer Reports</H4>
                 <Tag mr={1}>{reports.length}</Tag>
@@ -80,6 +92,14 @@ const ReviewerDetails = ({
                 </Fragment>
               )}
               {selectedTab === 1 && (
+                <PublonsTable
+                  onInvite={onInvitePublonReviewer}
+                  publonsError={fetchingError}
+                  publonsFetching={isFetching}
+                  reviewers={publonReviewers}
+                />
+              )}
+              {selectedTab === 2 && (
                 <Fragment>
                   {reports.length === 0 && (
                     <Text align="center">No reports submitted yet.</Text>
@@ -107,14 +127,22 @@ const ReviewerDetails = ({
 export default compose(
   withFilePreview,
   withFileDownload,
-  withProps(({ invitations = [], reviewerReports = [], currentUser }) => ({
-    token: get(currentUser, 'token', ''),
-    invitations: invitations.map(i => ({
-      ...i,
-      review: reviewerReports.find(r => r.userId === i.userId),
-    })),
-    reports: reviewerReports.filter(r => r.submittedOn),
-  })),
+  withProps(
+    ({
+      invitations = [],
+      publonReviewers = [],
+      reviewerReports = [],
+      currentUser,
+    }) => ({
+      token: get(currentUser, 'token', ''),
+      publonReviewers,
+      invitations: invitations.map(i => ({
+        ...i,
+        review: reviewerReports.find(r => r.userId === i.userId),
+      })),
+      reports: reviewerReports.filter(r => r.submittedOn),
+    }),
+  ),
   withProps(({ currentUser }) => ({
     canInviteReviewers: get(currentUser, 'permissions.canInviteReviewers'),
     canViewReviewersDetails: get(

[Alexandru Munteanu]

You don't need the publonsFetching prop. You already wrapped your PublonsTable with withFetching and now the caller is responsible with setting the correct fetching state and that will get passed down to your component.