feat: Add snack bar messages

src/components/AdminDashboard/ClientManagementDashboard/ClientProgramManagementForm/index.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";
+import LoadingButton from "@mui/lab/LoadingButton";
 import {
   Box,
   Button,
@@ -11,10 +12,14 @@ import {
   Modal,
   Typography,
 } from "@mui/material";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import {
+  approveProgramEnrollment,
+  rejectProgramEnrollment,
+} from "@/server/api/program-enrollments/private-mutations";
 import { Program, ProgramEnrollment } from "@/types";
 
 const style = {
@@ -81,14 +86,39 @@ const getClientManagementFormDefaultValues = (
   } as ClientManagementFormValues;
 };
 
+const fieldToProgramEnrollment = (
+  field: keyof ClientManagementFormValues,
+  programEnrollments: ProgramEnrollment[],
+): ProgramEnrollment | undefined => {
+  const fieldToProgram: Record<keyof ClientManagementFormValues, Program> = {
+    enrolledInHealthyHabits: "Healthy Habits For The Long Haul",
+    enrolledInDiabetesPrevention: "Diabetes Prevention",
+    enrolledInRigsWithoutCigs: "Rigs Without Cigs",
+    enrolledInVaccineVoucher: "Vaccine Voucher",
+    enrolledInGetPreventativeScreenings: "GPS (Get Preventative Screenings)",
+  };
+
+  return programEnrollments.find(
+    (programEnrollment) => programEnrollment.program === fieldToProgram[field],
+  );
+};
+
 type ClientManagementDashboardProps = {
   programEnrollments: ProgramEnrollment[];
+  setSnackbarOpen: Dispatch<SetStateAction<boolean>>;
+  setSnackbarMessage: Dispatch<SetStateAction<string>>;
+  fullName: string;
 };
 
 export default function ClientProgramManagementForm({
   programEnrollments,
+  setSnackbarOpen,
+  setSnackbarMessage,
+  fullName,
 }: ClientManagementDashboardProps) {
   const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [disabled, setDisabled] = useState(false);
   const {
     control,
     handleSubmit,
@@ -101,22 +131,57 @@ export default function ClientProgramManagementForm({
 
   const onCancel = () => {
     setOpen(false);
-
     reset();
   };
 
-  const onSubmit = (data: ClientManagementFormValues) => {
-    setOpen(false);
+  const onSubmit = async (data: ClientManagementFormValues) => {
+    setIsLoading(true);
+    setDisabled(true);
+
+    let error = false;
 
     for (const dirtyField in dirtyFields) {
       const field = dirtyField as keyof ClientManagementFormValues;
+      const programEnrollment = fieldToProgramEnrollment(
+        field,
+        programEnrollments,
+      );
+
+      if (!programEnrollment) {
+        return;
+      }
 
       if (data[field]) {
         console.log("Enroll", field);
+        // error = await approveProgramEnrollment(programEnrollment)[1];
+        if (error) {
+          break;
+        }
       } else {
         console.log("Unenroll", field);
+        // error = await rejectProgramEnrollment(programEnrollment)[1];
+        if (error) {
+          break;
+        }
       }
     }
+
+    setIsLoading(false);
+    setDisabled(false);
+    setOpen(false);
+
+    if (!error) {
+      setSnackbarMessage(
+        `You have successfully updated ${fullName} enrolled programs`,
+      );
+    } else {
+      reset();
+      setSnackbarMessage(
+        `There was a issue updating ${fullName} enrolled programs`,
+      );
+    }
+
+    setSnackbarOpen(true);
   };
 
   return (
@@ -191,9 +256,15 @@ export default function ClientProgramManagementForm({
                 <Button variant="outlined" onClick={onCancel} fullWidth>
                   Cancel
                 </Button>
-                <Button variant="contained" type="submit" fullWidth>
+                <LoadingButton
+                  variant="contained"
+                  type="submit"
+                  loading={isLoading}
+                  disabled={disabled}
+                  fullWidth
+                >
                   Save
-                </Button>
+                </LoadingButton>
               </Box>
             </form>
           </Box>

src/components/AdminDashboard/ClientManagementDashboard/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Search } from "@mui/icons-material";
-import { Box, TextField, Typography } from "@mui/material";
+import { Box, Snackbar, TextField, Typography } from "@mui/material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { useState } from "react";
 
@@ -44,6 +44,8 @@ export default function ClientManagementDashboard({
 }: ClientManagementDashboardProps) {
   const [rows] = useState(getRows(clients));
   const [searchQuery, setSearchQuery] = useState("");
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   const columns: GridColDef<Row>[] = [
     {
@@ -75,6 +77,7 @@ export default function ClientManagementDashboard({
       flex: 1,
       renderCell: (params) => {
         const user = params.row.client;
+        const fullName = user.firstName + " " + user.lastName;
         return (
           <>
             <Box
@@ -90,6 +93,9 @@ export default function ClientManagementDashboard({
               />
               <ClientProgramManagementForm
                 programEnrollments={params.row.programEnrollments}
+                setSnackbarMessage={setSnackbarMessage}
+                setSnackbarOpen={setSnackbarOpen}
+                fullName={fullName}
               />
             </Box>
           </>
@@ -108,6 +114,12 @@ export default function ClientManagementDashboard({
 
   return (
     <>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={() => setSnackbarOpen(false)}
+        message={snackbarMessage}
+      />
       <Box sx={{ width: "95%", height: "75%", marginTop: "100px" }}>
         <Typography align="center" variant="h4" sx={{ m: 2 }}>
           Clients