feat(PublonTable):front-end

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

 import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
-import { DateParser, Button } from '@pubsweet/ui'
-import { get, isEqual, orderBy } from 'lodash'
-import { compose, shouldUpdate, withHandlers, withProps } from 'recompose'
+import { Button } from '@pubsweet/ui'
+import { get } from 'lodash'
+import { compose, withHandlers } from 'recompose'
 
-import { Label, PersonInvitation, Text } from '../'
+import { Label, Text, OpenModal, withFetching } from '../'
 
 const PublonsTable = ({
   reviewers,
   onInviteReviewer,
-  renderAcceptedLabel,
-  onResendReviewerInvite,
-  onRevokeReviewerInvite,
+  setFetching,
+  isFetching,
 }) =>
   reviewers.length > 0 && (
     <Table>
@@ -41,9 +40,19 @@ const PublonsTable = ({
             </td>
             <td>{`${get(reviewer, 'numVerifiedReviews', '')}`}</td>
             <HiddenCell>
-              <Button secondary size="small" onClick={onInviteReviewer}>
-                SEND
-              </Button>
+              <OpenModal
+                isFetching={isFetching}
+                onConfirm={modalProps => onInviteReviewer(reviewer, modalProps)}
+                setFetching={setFetching}
+                subtitle={reviewer.email}
+                title="Send invitation to review?"
+              >
+                {showModal => (
+                  <Button onClick={showModal} secondary size="small">
+                    SEND
+                  </Button>
+                )}
+              </OpenModal>
             </HiddenCell>
           </TableRow>
         ))}
@@ -51,18 +60,21 @@ const PublonsTable = ({
     </Table>
   )
 
-export default withHandlers({
-  onInviteReviewer: props => reviewer => {
-    console.log(reviewer)
-  },
-})(PublonsTable)
+export default compose(
+  withFetching,
+  withHandlers({
+    onInviteReviewer: ({ onInviteReviwer }) => (reviewer, modalProps) => {
+      onInviteReviwer(reviewer, modalProps)
+    },
+  }),
+)(PublonsTable)
 
 // #region styles
 const Table = styled.table`
   border-collapse: collapse;
 
   & thead {
-    border-bottom: 1px solid ${th('colorBorder')};
+    border: 1px solid ${th('colorBorder')};
     background-color: ${th('colorBackgroundHue2')};
   }
 
@@ -88,34 +100,16 @@ const HidableCell = styled.td`
   padding-top: ${th('gridUnit')};
 `
 
-const CustomCell = styled.td`
-  &:hover {
-    ${Button} {
-      display: block;
-    }
-    ${Text} {
-      display: none;
-    }
-  }
-
-  ${Button} {
-    display: none;
-  }
-  ${Text} {
-    display: inline-block;
-  }
-`
-
 const TableRow = styled.tr`
   background-color: ${th('colorBackgroundHue2')};
   border-bottom: 1px solid ${th('colorBorder')};
 
   & td:first-child {
-    min-width: calc(${th('gridUnit')} * 30);
+    min: calc(${th('gridUnit')} * 30);
   }
 
   &:hover {
-    background-color: ${th('colorBackgroundHue3')};
+    background: ${th('colorBackgroundHue3')};
 
     ${HiddenCell} {
       opacity: 1;

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

@@ -3,6 +3,8 @@ A list of publon reviewers.
 ```js
 const reviewers = [
   {
+    id: 0,
+    email: 'asd@asddsda.com',
     publishingName: 'Vlad Corduneanu',
     recentOrganizations: {
       name: 'Facultatea Tehnica Iasi'
@@ -10,6 +12,8 @@ const reviewers = [
     numVerifiedReviews: '123'
   },
   {
+    id: 2,
+    email: 'asd@asddsda.com',
     publishingName: 'Dani Mocanu',
     recentOrganizations: {
       name: 'UAIC'
@@ -17,6 +21,8 @@ const reviewers = [
     numVerifiedReviews: '222'
   },
   {
+    id: 3,
+    email: 'asd@asddsda.com',
     publishingName: 'Gica Hagi',
     recentOrganizations: {
       name: 'Pixar'
@@ -25,5 +31,9 @@ const reviewers = [
   },
 ];
 
-<PublonsTable reviewers={reviewers}/>
+<PublonsTable reviewers={reviewers} onInviteReviwer={(reviewer, modalProps) => {
+  console.log('the reviewer', reviewer)
+  modalProps.setModalError('avem eroare boss')
+}}/>
 ```
+x
\ No newline at end of file

packages/component-faraday-ui/src/helpers/withFetching.js

@@ -2,12 +2,12 @@ import { withStateHandlers } from 'recompose'
 
 export default withStateHandlers(
   {
-    isFetchingg: false,
+    isFetching: false,
     fetchingError: '',
   },
   {
-    setFetching: ({ isFetchingg }) => value => ({
-      isFetchingg: value,
+    setFetching: ({ isFetching }) => value => ({
+      isFetching: value,
     }),
     toggleFetching: ({ isFetching }) => () => ({
       isFetching: !isFetching,