Merge pull request #1521 from cityofaustin/19655_add_error_snackbar_t…

…o_datagrid_tables 19655 adds reusable snackbar component to all project view tables
cityofaustin · Jan 30, 2025 · b6e15a7 · b6e15a7
2 parents 40d8ef2 + 590bb58
commit b6e15a7
Show file tree

Hide file tree

Showing 35 changed files with 502 additions and 366 deletions.
diff --git a/.../ProjectSummary/ProjectSummarySnackbar.js → ...editor/src/components/FeedbackSnackbar.js b/.../ProjectSummary/ProjectSummarySnackbar.js → ...editor/src/components/FeedbackSnackbar.js
@@ -5,20 +5,20 @@ import { Snackbar } from "@mui/material";
 /**
  * A project summary snackbar
  * @param {Object} snackbarState - The message you would like to see
- * @param {function} snackbarHandle - The function to update state
+ * @param {function} handleSnackbar - The function to update state
  * @param {Number} timeOut - Time out in milliseconds (default: 5000 milliseconds--for five seconds)
  * @returns {JSX.Element}
  * @constructor
  */
-const ProjectSummarySnackbar = ({
+const FeedbackSnackbar = ({
   snackbarState,
-  snackbarHandle,
+  handleSnackbar,
   timeOut = 7000,
 }) => {
   // Careful not to update your own state, break cycle here...
   if (snackbarState?.open === false) return null;
   // Close event
-  const handleSnackbarClose = () => snackbarHandle(false, "", "");
+  const handleSnackbarClose = () => handleSnackbar(false, "", "");
   // Timeout closure
   setTimeout(() => handleSnackbarClose(), timeOut);
 
@@ -36,4 +36,4 @@ const ProjectSummarySnackbar = ({
   );
 };
 
-export default ProjectSummarySnackbar;
+export default FeedbackSnackbar;
diff --git a/moped-editor/src/views/dashboard/DashboardStatusModal.js b/moped-editor/src/views/dashboard/DashboardStatusModal.js
@@ -19,6 +19,7 @@ const DashboardStatusModal = ({
   modalParent,
   statusUpdate,
   queryRefetch,
+  handleSnackbar,
   children,
   classes,
 }) => {
@@ -77,6 +78,7 @@ const DashboardStatusModal = ({
             projectId={projectId}
             currentPhaseId={currentPhaseId}
             closeModalDialog={handleDialogClose}
+            handleSnackbar={handleSnackbar}
           />
         </DialogContent>
       </Dialog>

diff --git a/moped-editor/src/views/projects/projectView/ProjectFiles.js b/moped-editor/src/views/projects/projectView/ProjectFiles.js
@@ -237,7 +237,7 @@ const useColumns = ({
  * @return {JSX.Element}
  * @constructor
  */
-const ProjectFiles = () => {
+const ProjectFiles = ({ handleSnackbar }) => {
   const apiRef = useGridApiRef();
   const classes = useStyles();
   const { projectId } = useParams();
@@ -294,8 +294,11 @@ const ProjectFiles = () => {
     })
       .then(() => {
         setDialogOpen(false);
+        handleSnackbar(true, "File saved", "success");
+      })
+      .catch((error) => {
+        handleSnackbar(true, "Error saving file", "error", error);
       })
-      .catch((error) => console.error(error))
       .finally(() => {
         refetch();
       });
@@ -363,12 +366,15 @@ const ProjectFiles = () => {
         },
       })
         .then(() => refetch())
-        .then(() => setIsDeleteConfirmationOpen(false))
+        .then(() => {
+          setIsDeleteConfirmationOpen(false);
+          handleSnackbar(true, "File deleted", "success");
+        })
         .catch((error) => {
-          console.error(error);
+          handleSnackbar(true, "Error deleting file", "error", error);
         });
     },
-    [rows, deleteProjectFileAttachment, refetch]
+    [rows, deleteProjectFileAttachment, refetch, handleSnackbar]
   );
 
   // saves row update after editing an existing row
@@ -394,19 +400,20 @@ const ProjectFiles = () => {
             fileUrl: updateProjectFilesData.file_url || null,
           },
         })
-          .then(() => refetch())
+          .then(() => {
+            refetch();
+            handleSnackbar(true, "File updated", "success");
+          })
           // from the data grid docs:
           // Please note that the processRowUpdate must return the row object to update the Data Grid internal state.
           .then(() => updateProjectFilesData)
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            handleSnackbar(true, "Error updating file", "error", error);
+          })
       );
     }
   };
 
-  const handleProcessUpdateError = (error) => {
-    console.error(error);
-  };
-
   // Validate the input for the file url or file Key field
   // returns Object: ...params.props and if there is an error
   const validateFileInput = (params) => {
@@ -449,7 +456,9 @@ const ProjectFiles = () => {
           rowModesModel={rowModesModel}
           onRowModesModelChange={handleRowModesModelChange}
           processRowUpdate={processRowUpdate}
-          onProcessRowUpdateError={handleProcessUpdateError}
+          onProcessRowUpdateError={(error) =>
+            handleSnackbar(true, "Error updating table", "error", error)
+          }
           disableRowSelectionOnClick
           toolbar
           density="comfortable"

diff --git a/moped-editor/src/views/projects/projectView/ProjectFunding.js b/moped-editor/src/views/projects/projectView/ProjectFunding.js
@@ -5,16 +5,22 @@ import ProjectFundingTable from "./ProjectFunding/ProjectFundingTable";
 import ProjectWorkActivitiesTable from "./ProjectWorkActivity/ProjectWorkActivityTable";
 import { useParams } from "react-router-dom";
 
-const ProjectFunding = () => {
+const ProjectFunding = ({ handleSnackbar }) => {
   const { projectId } = useParams();
   return (
     <CardContent>
       <Grid container spacing={6}>
         <Grid item xs={12}>
-          <ProjectFundingTable projectId={projectId} />
+          <ProjectFundingTable
+            projectId={projectId}
+            handleSnackbar={handleSnackbar}
+          />
         </Grid>
         <Grid item xs={12}>
-          <ProjectWorkActivitiesTable projectId={projectId} />
+          <ProjectWorkActivitiesTable
+            projectId={projectId}
+            handleSnackbar={handleSnackbar}
+          />
         </Grid>
       </Grid>
     </CardContent>

diff --git a/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingTable.js b/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingTable.js
@@ -4,7 +4,7 @@ import { useQuery, useMutation } from "@apollo/client";
 import isEqual from "lodash/isEqual";
 
 // Material
-import { Alert, CircularProgress, Snackbar, Box } from "@mui/material";
+import { CircularProgress, Box } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import {
   DataGridPro,
@@ -240,7 +240,7 @@ const useColumns = ({
     handleEditClick,
   ]);
 
-const ProjectFundingTable = () => {
+const ProjectFundingTable = ({ handleSnackbar }) => {
   const apiRef = useGridApiRef();
   const classes = useStyles();
 
@@ -262,12 +262,6 @@ const ProjectFundingTable = () => {
   const [updateProjectFunding] = useMutation(UPDATE_PROJECT_FUNDING);
   const [deleteProjectFunding] = useMutation(DELETE_PROJECT_FUNDING);
 
-  const DEFAULT_SNACKBAR_STATE = {
-    open: false,
-    message: null,
-    severity: "success",
-  };
-  const [snackbarState, setSnackbarState] = useState(DEFAULT_SNACKBAR_STATE);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   // rows and rowModesModel used in DataGrid
   const [rows, setRows] = useState([]);
@@ -329,27 +323,6 @@ const ProjectFundingTable = () => {
     [apiRef]
   );
 
-  /**
-   * Wrapper around snackbar state setter
-   * @param {boolean} open - The new state of open
-   * @param {String} message - The message for the snackbar
-   * @param {String} severity - The severity color of the snackbar
-   */
-  const snackbarHandle = (open = true, message, severity = "success") => {
-    setSnackbarState({
-      open: open,
-      message: message,
-      severity: severity,
-    });
-  };
-
-  /**
-   * Return Snackbar state to default, closed state
-   */
-  const handleSnackbarClose = () => {
-    setSnackbarState(DEFAULT_SNACKBAR_STATE);
-  };
-
   const handleRowModesModelChange = (newRowModesModel) => {
     setRowModesModel(newRowModesModel);
   };
@@ -409,22 +382,21 @@ const ProjectFundingTable = () => {
           },
         })
           .then(() => refetch())
-          .then(() => setIsDeleteConfirmationOpen(false))
+          .then(() => {
+            setIsDeleteConfirmationOpen(false);
+            handleSnackbar(true, "Funding source deleted", "success");
+          })
           .catch((error) => {
-            setSnackbarState({
-              open: true,
-              message: (
-                <span>
-                  There was a problem deleting funding. Error message:{" "}
-                  {error.message}
-                </span>
-              ),
-              severity: "error",
-            });
+            handleSnackbar(
+              true,
+              "Error deleting funding source",
+              "error",
+              error
+            );
           });
       }
     },
-    [rows, deleteProjectFunding, refetch]
+    [rows, deleteProjectFunding, refetch, handleSnackbar]
   );
 
   // when a user cancels editing by clicking the X in the actions
@@ -478,21 +450,20 @@ const ProjectFundingTable = () => {
                 .proj_funding_id;
             updatedRow.proj_funding_id = record_id;
           })
-          .then(() => refetch())
+          .then(() => {
+            refetch();
+            handleSnackbar(true, "Funding source added", "success");
+          })
           // from the data grid docs:
           // Please note that the processRowUpdate must return the row object to update the Data Grid internal state.
           .then(() => updatedRow)
           .catch((error) => {
-            setSnackbarState({
-              open: true,
-              message: (
-                <span>
-                  There was a problem adding funding. Error message:{" "}
-                  {error.message}
-                </span>
-              ),
-              severity: "error",
-            });
+            handleSnackbar(
+              true,
+              "Error adding funding source",
+              "error",
+              error
+            );
           })
       );
     } else {
@@ -507,39 +478,26 @@ const ProjectFundingTable = () => {
           updateProjectFunding({
             variables: updateProjectFundingData,
           })
-            .then(() => refetch())
+            .then(() => {
+              refetch();
+              handleSnackbar(true, "Funding source updated", "success");
+            })
             // from the data grid docs:
             // Please note that the processRowUpdate must return the row object to update the Data Grid internal state.
             .then(() => updatedRow)
             .catch((error) => {
-              setSnackbarState({
-                open: true,
-                message: (
-                  <span>
-                    There was a problem updating funding. Error message:{" "}
-                    {error.message}
-                  </span>
-                ),
-                severity: "error",
-              });
+              handleSnackbar(
+                true,
+                "Error updating funding source",
+                "error",
+                error
+              );
             })
         );
       }
     }
   };
 
-  const handleProcessUpdateError = (error) => {
-    setSnackbarState({
-      open: true,
-      message: (
-        <span>
-          There was a problem updating funding. Error message: {error.message}
-        </span>
-      ),
-      severity: "error",
-    });
-  };
-
   const dataGridColumns = useColumns({
     data,
     rowModesModel,
@@ -568,7 +526,6 @@ const ProjectFundingTable = () => {
           rowModesModel={rowModesModel}
           onRowModesModelChange={handleRowModesModelChange}
           processRowUpdate={processRowUpdate}
-          onProcessRowUpdateError={handleProcessUpdateError}
           disableRowSelectionOnClick
           toolbar
           density="comfortable"
@@ -587,7 +544,7 @@ const ProjectFundingTable = () => {
               eCaprisID: eCaprisID,
               data: data,
               refetch: refetch,
-              snackbarHandle: snackbarHandle,
+              handleSnackbar: handleSnackbar,
               classes: classes,
               noWrapper: true,
               setIsDialogOpen: setIsDialogOpen,
@@ -601,24 +558,14 @@ const ProjectFundingTable = () => {
         isDeleteConfirmationOpen={isDeleteConfirmationOpen}
         setIsDeleteConfirmationOpen={setIsDeleteConfirmationOpen}
       />
-      <Snackbar
-        anchorOrigin={{ vertical: "top", horizontal: "right" }}
-        open={snackbarState.open}
-        onClose={handleSnackbarClose}
-        key={"datatable-snackbar"}
-      >
-        <Alert onClose={handleSnackbarClose} severity={snackbarState.severity}>
-          {snackbarState.message}
-        </Alert>
-      </Snackbar>
       <SubprojectFundingModal
         isDialogOpen={isDialogOpen}
         handleDialogClose={handleSubprojectDialogClose}
         eCaprisID={eCaprisID}
         fdusArray={fdusArray}
         addProjectFunding={addProjectFunding}
         projectId={projectId}
-        setSnackbarState={setSnackbarState}
+        handleSnackbar={handleSnackbar}
         refetch={refetch}
       />
     </ApolloErrorHandler>

diff --git a/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingToolbar.js b/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingToolbar.js
@@ -11,7 +11,7 @@ const ProjectFundingToolbar = ({
   projectId,
   data,
   refetch,
-  snackbarHandle,
+  handleSnackbar,
   setIsDialogOpen,
   classes,
 }) => (
@@ -24,7 +24,7 @@ const ProjectFundingToolbar = ({
         projectId={projectId}
         data={data}
         refetch={refetch}
-        snackbarHandle={snackbarHandle}
+        handleSnackbar={handleSnackbar}
         classes={classes}
         noWrapper
       />