Merge pull request #1530 from cityofaustin/mike/add-snackbar-to-dashb…

…oard

Add snackbar to dashboard view

moped-editor/src/views/dashboard/DashboardTimelineModal.js

@@ -27,6 +27,7 @@ const DashboardTimelineModal = ({
   projectId,
   projectName,
   dashboardRefetch,
+  handleSnackbar,
   children,
 }) => {
   const classes = useStyles();
@@ -88,6 +89,7 @@ const DashboardTimelineModal = ({
                         loading={loading}
                         data={data}
                         refetch={refetch}
+                        handleSnackbar={handleSnackbar}
                       />
                     )}
                     {table === "milestones" && (
@@ -96,6 +98,7 @@ const DashboardTimelineModal = ({
                         loading={loading}
                         data={data}
                         refetch={refetch}
+                        handleSnackbar={handleSnackbar}
                       />
                     )}
                   </Box>

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))}
@@ -242,6 +277,7 @@ const DashboardView = () => {
           table="milestones"
           projectId={entry.project_id}
           projectName={entry.project.project_name_full}
+          handleSnackbar={handleSnackbar}
           dashboardRefetch={refetch}
         >
           <MilestoneProgressMeter
@@ -333,6 +369,10 @@ const DashboardView = () => {
             </Grid>
           </Card>
         </Container>
+        <FeedbackSnackbar
+          snackbarState={snackbarState}
+          handleSnackbar={handleSnackbar}
+        />
       </Page>
     </ActivityMetrics>
   );