Pull state and snackbar up a level; pass to status update component too

cityofaustin · Jan 30, 2025 · aac358c · aac358c
1 parent 6e97cf5
commit aac358c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 39 deletions.
diff --git a/moped-editor/src/views/dashboard/DashboardTimelineModal.js b/moped-editor/src/views/dashboard/DashboardTimelineModal.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import {
   Box,
   CardContent,
@@ -15,7 +15,6 @@ import { useQuery } from "@apollo/client";
 import ApolloErrorHandler from "src/components/ApolloErrorHandler";
 import ProjectMilestones from "../projects/projectView/ProjectMilestones";
 import ProjectPhases from "../projects/projectView/ProjectPhases";
-import FeedbackSnackbar from "src/components/FeedbackSnackbar";
 
 const useStyles = makeStyles((theme) => ({
   clickableDiv: {
@@ -28,6 +27,7 @@ const DashboardTimelineModal = ({
   projectId,
   projectName,
   dashboardRefetch,
+  handleSnackbar,
   children,
 }) => {
   const classes = useStyles();
@@ -50,38 +50,6 @@ const DashboardTimelineModal = ({
     dashboardRefetch();
   };
 
-  /* Snackbar state and handler for phase and milestone update feedback */
-  const [snackbarState, setSnackbarState] = useState(false);
-
-  /**
-   * 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
-   * @param {Object} error - The error to be displayed and logged
-   */
-  const handleSnackbar = useCallback(
-    (open, message, severity, error) => {
-      // if there is an error, render error message,
-      // otherwise, render success message
-      if (error) {
-        setSnackbarState({
-          open: open,
-          message: `${message}. Refresh the page to try again.`,
-          severity: severity,
-        });
-        console.error(error);
-      } else {
-        setSnackbarState({
-          open: open,
-          message: message,
-          severity: severity,
-        });
-      }
-    },
-    [setSnackbarState]
-  );
-
   return (
     <>
       <div
@@ -140,10 +108,6 @@ const DashboardTimelineModal = ({
           </ApolloErrorHandler>
         </DialogContent>
       </Dialog>
-      <FeedbackSnackbar
-        snackbarState={snackbarState}
-        handleSnackbar={handleSnackbar}
-      />
     </>
   );
 };

diff --git a/moped-editor/src/views/dashboard/DashboardView.js b/moped-editor/src/views/dashboard/DashboardView.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useQuery } from "@apollo/client";
 import { format } from "date-fns";
 
@@ -24,6 +24,7 @@ import DashboardStatusModal from "./DashboardStatusModal";
 import DashboardTimelineModal from "./DashboardTimelineModal";
 import ProjectStatusBadge from "../projects/projectView/ProjectStatusBadge";
 import MilestoneProgressMeter from "./MilestoneProgressMeter";
+import FeedbackSnackbar from "src/components/FeedbackSnackbar";
 
 import typography from "../../theme/typography";
 
@@ -111,6 +112,38 @@ const DashboardView = () => {
     fetchPolicy: "no-cache",
   });
 
+  /* Snackbar state and handler for phase and milestone update feedback */
+  const [snackbarState, setSnackbarState] = useState(false);
+
+  /**
+   * 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
+   * @param {Object} error - The error to be displayed and logged
+   */
+  const handleSnackbar = useCallback(
+    (open, message, severity, error) => {
+      // if there is an error, render error message,
+      // otherwise, render success message
+      if (error) {
+        setSnackbarState({
+          open: open,
+          message: `${message}. Refresh the page to try again.`,
+          severity: severity,
+        });
+        console.error(error);
+      } else {
+        setSnackbarState({
+          open: open,
+          message: message,
+          severity: severity,
+        });
+      }
+    },
+    [setSnackbarState]
+  );
+
   if (error) {
     console.log(error);
   }
@@ -204,6 +237,7 @@ const DashboardView = () => {
           projectId={entry.project_id}
           projectName={entry.project.project_name_full}
           dashboardRefetch={refetch}
+          handleSnackbar={handleSnackbar}
         >
           <ProjectStatusBadge
             phaseName={entry.phase_name}
@@ -227,6 +261,7 @@ const DashboardView = () => {
           modalParent="dashboard"
           statusUpdate={entry.status_update}
           queryRefetch={refetch}
+          handleSnackbar={handleSnackbar}
           classes={classes}
         >
           {parse(String(entry.status_update))}
@@ -333,6 +368,10 @@ const DashboardView = () => {
             </Grid>
           </Card>
         </Container>
+        <FeedbackSnackbar
+          snackbarState={snackbarState}
+          handleSnackbar={handleSnackbar}
+        />
       </Page>
     </ActivityMetrics>
   );