From 54e012da3231f8ada1ec48f40ea2a001f50f045e Mon Sep 17 00:00:00 2001
From: Caleb Ledi <caleb.gorrila@gmail.com>
Date: Wed, 10 Apr 2024 13:24:24 -0400
Subject: [PATCH] Add feedback to add senior form

---
 src/components/AddSenior.tsx | 105 +++++++++++++++++++----------------
 1 file changed, 56 insertions(+), 49 deletions(-)

diff --git a/src/components/AddSenior.tsx b/src/components/AddSenior.tsx
index 3330e89e..b3b076f0 100644
--- a/src/components/AddSenior.tsx
+++ b/src/components/AddSenior.tsx
@@ -6,8 +6,11 @@ import React, {
   useState,
 } from "react";
 import Image, { StaticImageData } from "next/legacy/image";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, SubmitHandler } from "react-hook-form";
 import FilterDropdown from "@components/FilterDropdown";
 import { Senior, User } from "@prisma/client";
+
 import ImageIcon from "../../public/icons/icon_add_photo.png";
 import { patchSenior } from "src/app/api/senior/[id]/route.client";
 import { postSenior } from "src/app/api/senior/route.client";
@@ -32,10 +35,14 @@ type AddSeniorTileProps = {
   setSeniorPatch: Dispatch<SetStateAction<string>>;
 };
 
-type SeniorData = Pick<
-  z.infer<typeof seniorSchema>,
-  "firstname" | "lastname" | "location" | "description"
->;
+const seniorFormSchema = seniorSchema.pick({
+  firstname: true,
+  lastname: true,
+  location: true,
+  description: true,
+});
+
+type SeniorData = z.infer<typeof seniorFormSchema>;
 
 const EMPTY_SENIOR: SeniorData = {
   firstname: "",
@@ -114,13 +121,26 @@ const AddSenior = ({
   seniorPatch,
   setSeniorPatch,
 }: AddSeniorProps) => {
-  const [seniorData, setSeniorData] = useState<SeniorData>(EMPTY_SENIOR);
   const [selectedStudents, setSelectedStudents] = useState<User[]>([]);
   const [currentImage, setCurrentImage] = useState<string | StaticImageData>(
     ImageIcon
   );
   const [confirm, setConfirm] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
+  const [edited, setEdited] = useState<boolean>(false);
+
+  const { register, handleSubmit, reset, setValue } = useForm<SeniorData>({
+    resolver: zodResolver(seniorFormSchema),
+  });
+
+  const onSubmit: SubmitHandler<SeniorData> = async (data, event) => {
+    event?.preventDefault();
+    if (seniorPatch) {
+      patchAddSenior(data);
+    } else {
+      postAddSenior(data);
+    }
+  };
 
   const initialSenior: Senior | undefined = useMemo(() => {
     const senior = seniors.find((senior) => senior.id === seniorPatch);
@@ -128,14 +148,15 @@ const AddSenior = ({
   }, [seniorPatch, seniors]);
 
   useEffect(() => {
-    if (initialSenior)
-      setSeniorData({
-        firstname: initialSenior.firstname,
-        lastname: initialSenior.lastname,
-        location: initialSenior.location,
-        description: initialSenior.description,
+    if (initialSenior) {
+      setValue("firstname", initialSenior.firstname, { shouldValidate: true });
+      setValue("lastname", initialSenior.lastname, { shouldValidate: true });
+      setValue("location", initialSenior.location, { shouldValidate: true });
+      setValue("description", initialSenior.description, {
+        shouldValidate: true,
       });
-  }, [initialSenior]);
+    }
+  }, [initialSenior, setValue]);
 
   useEffect(() => {
     if (initialSenior) {
@@ -149,10 +170,11 @@ const AddSenior = ({
 
   const handlePopUp = () => {
     setShowAddSeniorPopUp(!showAddSeniorPopUp);
-    setSeniorData(EMPTY_SENIOR);
     setSelectedStudents([]);
     setCurrentImage(ImageIcon);
     setSeniorPatch(""); // empty string used as falsey value to indicate update or patch
+    setEdited(false);
+    reset();
   };
 
   const handleConfirm = () => {
@@ -161,7 +183,7 @@ const AddSenior = ({
     setError(false);
   };
 
-  const patchAddSenior = async () => {
+  const patchAddSenior = async (seniorData: SeniorData) => {
     // put accumulated students into senior model data
     const seniorModel = {
       ...seniorData,
@@ -185,7 +207,7 @@ const AddSenior = ({
     }
   };
 
-  const postAddSenior = async () => {
+  const postAddSenior = async (seniorData: SeniorData) => {
     // put accumulated students into senior model data
     const seniorModel = {
       ...seniorData,
@@ -227,7 +249,7 @@ const AddSenior = ({
       {showAddSeniorPopUp && (
         <Popup className="h-fit w-[36rem]">
           {!confirm && !error ? (
-            <div className="text-white">
+            <form className="text-white" onSubmit={handleSubmit(onSubmit)}>
               <div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
                 {seniorPatch ? "Update" : "Add New"} Senior
               </div>
@@ -241,9 +263,6 @@ const AddSenior = ({
                   />
                 </div>
               </div>
-
-              {/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
-                  later as seniorData.name propgates to backend*/}
               <div className="flex">
                 <div className="mr-2 flex-1 flex-col">
                   <div className=" mb-2 h-[19px] w-full text-base text-white">
@@ -252,13 +271,8 @@ const AddSenior = ({
                   <input
                     className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
                     type="text"
-                    value={seniorData.firstname}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      setSeniorData({
-                        ...seniorData,
-                        firstname: e.target.value,
-                      })
-                    }
+                    {...register("firstname")}
+                    onChange={() => setEdited(true)}
                   />
                 </div>
 
@@ -269,13 +283,8 @@ const AddSenior = ({
                   <input
                     className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
                     type="text"
-                    value={seniorData.lastname}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      setSeniorData((seniorData) => ({
-                        ...seniorData,
-                        lastname: e.target.value,
-                      }))
-                    }
+                    {...register("lastname")}
+                    onChange={() => setEdited(true)}
                   />
                 </div>
               </div>
@@ -287,11 +296,9 @@ const AddSenior = ({
               <input
                 className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
                 type="text"
-                value={seniorData.location}
                 placeholder="Where are you and your senior meeting?"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setSeniorData({ ...seniorData, location: e.target.value })
-                }
+                {...register("location")}
+                onChange={() => setEdited(true)}
               />
 
               <div className="mb-5 h-2 w-full text-base text-white">
@@ -301,13 +308,8 @@ const AddSenior = ({
               <textarea
                 className="h-25 mb-3 min-h-[20px] w-full resize-none rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-dark-teal placeholder:text-dark-teal"
                 placeholder="Write a brief description about the senior"
-                value={seniorData.description}
-                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                  setSeniorData({
-                    ...seniorData,
-                    description: e.target.value,
-                  })
-                }
+                {...register("description")}
+                onChange={() => setEdited(true)}
               />
 
               <StudentSelector
@@ -318,21 +320,26 @@ const AddSenior = ({
 
               <div className="top-0 mt-6 flex max-h-[36px] w-full flex-row justify-center">
                 <button
-                  className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
-                                  px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
+                  className=" hover:off-white mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl 
+                                  bg-white px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md"
                   onClick={handlePopUp}
                 >
                   Cancel
                 </button>
                 <button
                   className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
-                      px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
-                  onClick={seniorPatch ? patchAddSenior : postAddSenior}
+                      px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md duration-300 hover:bg-off-white"
+                  type="submit"
+                  style={
+                    edited
+                      ? { visibility: "visible", opacity: 1 }
+                      : { visibility: "hidden", opacity: 0 }
+                  }
                 >
                   {seniorPatch ? "Update" : "Save"}
                 </button>
               </div>
-            </div>
+            </form>
           ) : (
             <>
               {confirm ? (