feat(log payment): update view automatically when payment is logged

gwynndp · Feb 8, 2022 · 17a5de2 · 17a5de2
1 parent 0a995af
commit 17a5de2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js
@@ -182,6 +182,7 @@ function EarningsTable() {
         <CustomTableItemDetails
           selectedItem={selectedEarning}
           closeDetails={() => setSelectedEarning(null)}
+          refreshData={getEarnings}
         />
       }
       actionButtonType="export"

diff --git a/src/components/common/CustomTableItemDetails/CustomTableItemDetails.js b/src/components/common/CustomTableItemDetails/CustomTableItemDetails.js
@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import Select from '@material-ui/core/Select';
 import Drawer from '@material-ui/core/Drawer';
 import CloseIcon from '@material-ui/icons/Close';
-import InputLabel from '@material-ui/core/InputLabel';
 import Grid from '@material-ui/core/Grid';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
@@ -22,10 +19,11 @@ import useStyles from './CustomTableItemDetails.styles';
  * @param {object} props - properties  passed to the component
  * @param {object} props.selectedItem - item
  * @param {function} props.closeForm - function used to close form
+ * @param {function} props.refreshData - function refresh table data when item is updated
  * @returns {React.Component} - form to log payment
  */
 function LogPaymentForm(props) {
-  const { selectedItem, closeForm } = props;
+  const { selectedItem, closeForm, refreshData } = props;
   const [payload, setPayload] = useState({});
   const classes = useStyles();
 
@@ -38,7 +36,10 @@ function LogPaymentForm(props) {
 
   const handleOnFormSubmit = () => {
     const { id, worker_id, amount, currency } = selectedItem;
-    earningsAPI.patchEarning({ id, worker_id, amount, currency, ...payload });
+    earningsAPI
+      .patchEarning({ id, worker_id, amount, currency, ...payload })
+      .then(() => refreshData())
+      .catch((e) => console.log('error logging payment', e));
     closeForm();
   };
 
@@ -76,22 +77,6 @@ function LogPaymentForm(props) {
             />
           </FormControl>
         </Grid>
-
-        <Grid item className={classes.itemGrowerDetail}>
-          <Grid item>
-            <Typography>Payment Confirmed by</Typography>
-            <Typography variant="b">
-              {selectedItem.payment_confirmed_by}
-            </Typography>
-          </Grid>
-
-          <Grid item className={classes.itemGrowerDetail}>
-            <Typography>Payment confirmation method</Typography>
-            <Typography variant="b">
-              {selectedItem.payment_confirmation_method}
-            </Typography>
-          </Grid>
-        </Grid>
       </Grid>
 
       <Divider className={classes.itemDetailsContentsDivider} />
@@ -126,6 +111,7 @@ function LogPaymentForm(props) {
 LogPaymentForm.propTypes = {
   selectedItem: PropTypes.object.isRequired,
   closeForm: PropTypes.func.isRequired,
+  refreshData: PropTypes.func.isRequired,
 };
 
 /**
@@ -136,11 +122,12 @@ LogPaymentForm.propTypes = {
  * @param {boolean} props.isDetailsDrawerOpen - flag that decides wheather details drawer should open/close
  * @param {object} props.selectedItem - custom table item
  * @param {Function} props.setSelectedItem - sets/resets selected item
+ * @param {Function} props.refreshData - refresh table data after updating an item
  *
  * @returns {React.Component}
  */
 function CustomTableItemDetails(props) {
-  const { selectedItem, closeDetails } = props;
+  const { selectedItem, closeDetails, refreshData } = props;
   const classes = useStyles();
 
   return selectedItem ? (
@@ -212,7 +199,7 @@ function CustomTableItemDetails(props) {
                   className={classes.infoIconOutlined}
                 />
               </Typography>
-              <Typography variant="b">{selectedItem.paid_at}</Typography>
+              <Typography variant="b">{selectedItem.calculated_at}</Typography>
             </Grid>
           </Grid>
 
@@ -251,8 +238,27 @@ function CustomTableItemDetails(props) {
             <LogPaymentForm
               selectedItem={selectedItem}
               closeForm={closeDetails}
+              refreshData={refreshData}
             />
           )}
+
+          {selectedItem?.status === 'paid' && (
+            <Grid item className={classes.itemGrowerDetail}>
+              <Grid item>
+                <Typography>Payment Confirmed by</Typography>
+                <Typography variant="b">
+                  {selectedItem.payment_confirmed_by}
+                </Typography>
+              </Grid>
+
+              <Grid item className={classes.itemGrowerDetail}>
+                <Typography>Payment confirmation method</Typography>
+                <Typography variant="b">
+                  {selectedItem.payment_confirmation_method}
+                </Typography>
+              </Grid>
+            </Grid>
+          )}
         </Grid>
       </Grid>
     </Drawer>
@@ -266,4 +272,9 @@ export default CustomTableItemDetails;
 CustomTableItemDetails.propTypes = {
   selectedItem: PropTypes.object.isRequired,
   closeDetails: PropTypes.func.isRequired,
+  refreshData: PropTypes.func,
+};
+
+CustomTableItemDetails.defaultProps = {
+  refreshData: () => {},
 };