feat(HIN-904): publons work in progress

packages/component-faraday-ui/src/PublonsTable.js

 import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
-import { Button } from '@pubsweet/ui'
+import { Button, Spinner } from '@pubsweet/ui'
 import { get } from 'lodash'
 import { compose, withHandlers, withProps } from 'recompose'
 
@@ -12,8 +12,10 @@ const PublonsTable = ({
   onInviteReviewer,
   setFetching,
   isFetching,
+  isPublonsFetching,
 }) =>
-  reviewers.length > 0 && (
+  (isPublonsFetching && <Spinner />) ||
+  (reviewers.length > 0 && (
     <Table>
       <thead>
         <tr>
@@ -31,15 +33,15 @@ const PublonsTable = ({
       </thead>
       <tbody>
         {reviewers.map(reviewer => (
-          <TableRow key={reviewer.id}>
+          <TableRow key={reviewer.email}>
             <td>
-              <Text>{`${get(reviewer, 'publishingName', '')}`}</Text>
+              <Text>{`${get(reviewer, 'name', '')}`}</Text>
             </td>
             <td>
-              <Text>{`${get(reviewer, 'recentOrganizations.name', '')}`}</Text>
+              <Text>{`${get(reviewer, 'affiliation', '')}`}</Text>
             </td>
             <td>
-              <Text>{`${get(reviewer, 'numVerifiedReviews', '')}`}</Text>
+              <Text>{`${get(reviewer, 'reviews', '')}`}</Text>
             </td>
             <HiddenCell>
               <OpenModal
@@ -50,7 +52,7 @@ const PublonsTable = ({
                 title="Send invitation to review?"
               >
                 {showModal => (
-                  <Button onClick={showModal} secondary size="small">
+                  <Button onClick={showModal} primary size="small">
                     SEND
                   </Button>
                 )}
@@ -60,7 +62,7 @@ const PublonsTable = ({
         ))}
       </tbody>
     </Table>
-  )
+  ))
 
 export default compose(
   withFetching,

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

@@ -26,6 +26,7 @@ const ReviewerDetails = ({
   fragment,
   invitations,
   publons,
+  isPublonsFetching,
   previewFile,
   downloadFile,
   canInviteReviewers,
@@ -93,7 +94,10 @@ const ReviewerDetails = ({
                   {publons.length === 0 && (
                     <Text align="center">No suggestions yet.</Text>
                   )}
-                  <PublonsTable reviewers={publons} />
+                  <PublonsTable
+                    isPublonsFetching={isPublonsFetching}
+                    reviewers={publons}
+                  />
                 </Fragment>
               )}
               {selectedTab === 2 && (

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

@@ -57,6 +57,7 @@ const ManuscriptLayout = ({
   toggleReviewerResponse,
   invitationsWithReviewers,
   publonReviewers,
+  isPublonsFetching,
   reviewerResponseExpanded,
   pendingOwnRecommendation,
   toggleReviewerRecommendations,
@@ -178,6 +179,7 @@ const ManuscriptLayout = ({
             fragment={fragment}
             getSignedUrl={getSignedUrl}
             invitations={invitationsWithReviewers}
+            isPublonsFetching={isPublonsFetching}
             journal={journal}
             onInvitePublonReviewer={onInvitePublonReviewer}
             onInviteReviewer={onInviteReviewer}

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

@@ -25,7 +25,6 @@ import {
   inviteReviewer,
   revokeReviewer,
   reviewerDecision,
-  getPublonReviewers,
 } from 'pubsweet-components-faraday/src/redux/reviewers'
 import {
   hasManuscriptFailure,
@@ -55,7 +54,11 @@ import {
   getFragmentReviewerRecommendations,
   getInvitationsWithReviewersForFragment,
 } from 'pubsweet-component-faraday-selectors'
-import { RemoteOpener, handleError } from 'pubsweet-component-faraday-ui'
+import {
+  RemoteOpener,
+  handleError,
+  withFetching,
+} from 'pubsweet-component-faraday-ui'
 
 import ManuscriptLayout from './ManuscriptLayout'
 import { parseEicDecision, parseSearchParams, redirectToError } from './utils'
@@ -73,6 +76,7 @@ export default compose(
   setDisplayName('ManuscriptPage'),
   withJournal,
   withRouter,
+  withFetching,
   withState('publonReviewers', 'setPub', []),
   withState('editorInChief', 'setEiC', 'N/A'),
   ConnectPage(({ match }) => [
@@ -169,7 +173,6 @@ export default compose(
         state,
         get(fragment, 'id', ''),
       ),
-      publonReviewers: getPublonReviewers(get(fragment, 'id', '')),
     }),
   ),
   ConnectPage(({ currentUser }) => {
@@ -417,12 +420,12 @@ export default compose(
     toggleReviewerRecommendations: toggle,
     reviewerRecommendationExpanded: expanded,
   })),
-  withProps(({ currentUser, submittedOwnRecommendation }) => ({
+  withProps(({ currentUser, submittedOwnRecommendation, isFetching }) => ({
     getSignedUrl,
-    publonReviewers: [],
     shouldReview:
       get(currentUser, 'isReviewer', false) &&
       isUndefined(submittedOwnRecommendation),
+    isPublonFetching: isFetching,
   })),
   lifecycle({
     componentDidMount() {
@@ -436,12 +439,15 @@ export default compose(
         clearCustomError,
         hasManuscriptFailure,
         fetchUpdatedCollection,
-        currentUser: { isInvitedHE, isInvitedToReview },
-        publonReviewers,
+        currentUser: {
+          isInvitedHE,
+          isInvitedToReview,
+          permissions: { canInviteReviewers },
+        },
+        setFetching,
+        isFetching,
       } = this.props
 
-      // publonReviewers.then(publons => console.log('PUBLONS', publons))
-
       if (hasManuscriptFailure) {
         history.push('/not-found')
         clearCustomError()
@@ -461,11 +467,14 @@ export default compose(
         setEditorInChief(head(res.users)),
       )
 
-      apiGet(`/fragments/${fragmentId}/publons`).then(res => {
-        if (!publonReviewers) {
+      if (canInviteReviewers) {
+        setFetching({ isFetching: true })
+        console.log(isFetching)
+        apiGet(`/fragments/${fragmentId}/publons`).then(res => {
+          setFetching({ isFetching: false })
           setPublons(res)
-        }
-      })
+        })
+      }
 
       if (isInvitedHE) {
         this.props.toggleHEResponse()

packages/components-faraday/src/redux/reviewers.js

@@ -57,9 +57,6 @@ export const getCollectionReviewers = (collectionId, fragmentId) => dispatch =>
   apiGet(
     `/collections/${collectionId}/fragments/${fragmentId}/invitations?role=reviewer`,
   )
-
-export const getPublonReviewers = fragmentId =>
-  apiGet(`/fragments/${fragmentId}/publons`)
 // #endregion
 
 export const inviteReviewer = ({