feat: Create form

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

@@ -1,19 +1,21 @@
 "use client";
 
+import { zodResolver } from "@hookform/resolvers/zod";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import {
   Box,
   Button,
   Checkbox,
   Fade,
   FormControlLabel,
-  FormGroup,
   Modal,
   Typography,
 } from "@mui/material";
 import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
 
-import { ProgramEnrollment } from "@/types";
+import { Program, ProgramEnrollment } from "@/types";
 
 const style = {
   position: "absolute",
@@ -31,56 +33,90 @@ const style = {
   gap: 2,
 };
 
-type ProgramCheckbox = {
-  isDirty: boolean;
-  isChecked: boolean;
-  programEnrollment: ProgramEnrollment;
+const ClientManagementFormSchema = z.object({
+  enrolledInHealthyHabits: z.boolean(),
+  enrolledInDiabetesPrevention: z.boolean(),
+  enrolledInRigsWithoutCigs: z.boolean(),
+  enrolledInVaccineVoucher: z.boolean(),
+  enrolledInGetPreventativeScreenings: z.boolean(),
+});
+
+type ClientManagementFormValues = z.infer<typeof ClientManagementFormSchema>;
+
+const isEnrolledIn = (
+  programEnrollments: ProgramEnrollment[],
+  program: Program,
+) => {
+  return programEnrollments.some(
+    (programEnrollment) =>
+      programEnrollment.program === program &&
+      programEnrollment.status === "accepted",
+  );
 };
 
-type ClientManagementDashboardProps = {
-  programEnrollments: ProgramEnrollment[];
+const getClientManagementFormDefaultValues = (
+  programEnrollments: ProgramEnrollment[],
+): ClientManagementFormValues => {
+  return {
+    enrolledInHealthyHabits: isEnrolledIn(
+      programEnrollments,
+      "Healthy Habits For The Long Haul",
+    ),
+    enrolledInDiabetesPrevention: isEnrolledIn(
+      programEnrollments,
+      "Diabetes Prevention",
+    ),
+    enrolledInRigsWithoutCigs: isEnrolledIn(
+      programEnrollments,
+      "Rigs Without Cigs",
+    ),
+    enrolledInVaccineVoucher: isEnrolledIn(
+      programEnrollments,
+      "Vaccine Voucher",
+    ),
+    enrolledInGetPreventativeScreenings: isEnrolledIn(
+      programEnrollments,
+      "GPS (Get Preventative Screenings)",
+    ),
+  } as ClientManagementFormValues;
 };
 
-const programEnrollmentToCheckBox = (programEnrollment: ProgramEnrollment) => {
-  const checkbox: ProgramCheckbox = {
-    isDirty: false,
-    isChecked: programEnrollment.status == "accepted",
-    programEnrollment,
-  };
-  return checkbox;
+type ClientManagementDashboardProps = {
+  programEnrollments: ProgramEnrollment[];
 };
 
 export default function ClientProgramManagementForm({
   programEnrollments,
 }: ClientManagementDashboardProps) {
   const [open, setOpen] = useState(false);
-  const [programCheckboxes, setProgramCheckboxes] = useState(
-    programEnrollments.map((programEnrollment) =>
-      programEnrollmentToCheckBox(programEnrollment),
-    ),
-  );
-  const initialState = { ...programCheckboxes };
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { dirtyFields },
+  } = useForm<ClientManagementFormValues>({
+    resolver: zodResolver(ClientManagementFormSchema),
+    defaultValues: getClientManagementFormDefaultValues(programEnrollments),
+  });
 
-  const handleCheck = (index: number) => {
-    setProgramCheckboxes(
-      programCheckboxes.map((checkbox, i) => {
-        if (index === i) {
-          checkbox.isDirty == true;
-          checkbox.isChecked = !checkbox.isChecked;
-        }
+  const onCancel = () => {
+    setOpen(false);
 
-        return checkbox;
-      }),
-    );
+    reset();
   };
 
-  const handelCancel = () => {
+  const onSubmit = (data: ClientManagementFormValues) => {
     setOpen(false);
-    setProgramCheckboxes(initialState);
-  };
 
-  const handelSubmit = () => {
-    setOpen(false);
+    for (const dirtyField in dirtyFields) {
+      const field = dirtyField as keyof ClientManagementFormValues;
+
+      if (data[field]) {
+        console.log("Enroll", field);
+      } else {
+        console.log("Unenroll", field);
+      }
+    }
   };
 
   return (
@@ -91,31 +127,75 @@ export default function ClientProgramManagementForm({
       <Modal open={open}>
         <Fade in={open}>
           <Box sx={style}>
-            <Typography id="transition-modal-title" variant="h4">
-              Mange Enrolled Programs
-            </Typography>
-            <FormGroup>
-              {programCheckboxes.map((programCheckbox, index) => (
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={programCheckbox.isChecked}
-                      onChange={() => handleCheck(index)}
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <Typography id="transition-modal-title" variant="h4">
+                Mange Enrolled Programs
+              </Typography>
+              <Box
+                sx={{ display: "flex", flexDirection: "column", paddingY: 1 }}
+              >
+                <Controller
+                  name="enrolledInHealthyHabits"
+                  control={control}
+                  render={({ field }) => (
+                    <>
+                      <FormControlLabel
+                        control={<Checkbox {...field} checked={field.value} />}
+                        label="Healthy Habits"
+                      />
+                    </>
+                  )}
+                />
+                <Controller
+                  name="enrolledInDiabetesPrevention"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControlLabel
+                      control={<Checkbox {...field} checked={field.value} />}
+                      label="Diabetes Prevention"
+                    />
+                  )}
+                />
+                <Controller
+                  name="enrolledInRigsWithoutCigs"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControlLabel
+                      control={<Checkbox {...field} checked={field.value} />}
+                      label="Rigs Without Cigs"
+                    />
+                  )}
+                />
+                <Controller
+                  name="enrolledInVaccineVoucher"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControlLabel
+                      control={<Checkbox {...field} checked={field.value} />}
+                      label="Vaccine Voucher"
+                    />
+                  )}
+                />
+                <Controller
+                  name="enrolledInGetPreventativeScreenings"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControlLabel
+                      control={<Checkbox {...field} checked={field.value} />}
+                      label="Get Preventative Screenings"
                     />
-                  }
-                  label={programCheckbox.programEnrollment.program}
-                  key={index}
+                  )}
                 />
-              ))}
-            </FormGroup>
-            <Box display="flex" gap={2}>
-              <Button variant="outlined" onClick={handelCancel} fullWidth>
-                Cancel
-              </Button>
-              <Button variant="contained" onClick={handelSubmit} fullWidth>
-                Save
-              </Button>
-            </Box>
+              </Box>
+              <Box display="flex" gap={2}>
+                <Button variant="outlined" onClick={onCancel} fullWidth>
+                  Cancel
+                </Button>
+                <Button variant="contained" type="submit" fullWidth>
+                  Save
+                </Button>
+              </Box>
+            </form>
           </Box>
         </Fade>
       </Modal>