From 114a13e05d9f29a1e403abdb529b00ed21a4be8c Mon Sep 17 00:00:00 2001
From: John Paul Larkin <johnplarkin@gmail.com>
Date: Tue, 27 Feb 2024 21:28:55 +0000
Subject: [PATCH] refactor slide2 to add useform

---
 .../alpha/additional-details/_client.tsx      | 275 ++++++++++--------
 1 file changed, 147 insertions(+), 128 deletions(-)

diff --git a/app/(app)/alpha/additional-details/_client.tsx b/app/(app)/alpha/additional-details/_client.tsx
index 74c25f78..cdef119b 100644
--- a/app/(app)/alpha/additional-details/_client.tsx
+++ b/app/(app)/alpha/additional-details/_client.tsx
@@ -5,7 +5,9 @@ import { redirect, useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import {
   type TypeSlideOneSchema,
+  type TypeSlideTwoSchema,
   slideOneSchema,
+  slideTwoSchema,
 } from "@/schema/additionalUserDetails";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, useFormContext } from "react-hook-form";
@@ -50,7 +52,7 @@ export default function AdditionalSignUpDetails({
       <SignupProgressBar currentSlide={slide} />
 
       {slide === 1 && <SlideOne details={details} />}
-      {/* {slide === 2 && <SlideTwo details={details} />} */}
+      {slide === 2 && <SlideTwo details={details} />}
       {/* {slide === 3 && <SlideThree details={details} />} */}
     </div>
   );
@@ -192,21 +194,27 @@ function SlideOne({ details }: { details: UserDetails }) {
   );
 }
 
-function SlideTwo() {
+function SlideTwo({ details }: { details: UserDetails }) {
   const router = useRouter();
+  const { dateOfBirth, gender } = details;
 
   const {
-    getValues,
-    setValue,
     register,
-    trigger,
-    formState: { errors },
-  } = useFormContext();
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<TypeSlideTwoSchema>({
+    resolver: zodResolver(slideTwoSchema),
+    defaultValues: { dateOfBirth, gender },
+  });
 
-  const dob = getValues("dateOfBirth");
-  const [year, setYear] = useState<number | undefined>(dob?.getFullYear());
-  const [month, setMonth] = useState<number | undefined>(dob?.getMonth());
-  const [day, setDay] = useState<number | undefined>(dob?.getDate());
+  const [year, setYear] = useState<number | undefined>(
+    dateOfBirth?.getFullYear(),
+  );
+  const [month, setMonth] = useState<number | undefined>(
+    dateOfBirth?.getMonth(),
+  );
+  const [day, setDay] = useState<number | undefined>(dateOfBirth?.getDate());
 
   const [listOfDaysInSelectedMonth, setListOfDaysInSelectedMonth] = useState([
     0,
@@ -246,139 +254,150 @@ function SlideTwo() {
     (_, index) => startYearAgeDropdown + index,
   ).reverse();
 
-  const handleClickNextSlide = async (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) => {
-    e.preventDefault();
-
-    const isError = await trigger(["dateOfBirth", "gender"], {
-      shouldFocus: true,
-    });
-
-    if (isError && dob !== undefined) {
-      router.push(`?slide=${3}`, { scroll: false });
+  const onFormSubmit = async (data: TypeSlideTwoSchema) => {
+    try {
+      // const isSuccess = await handleFormSlideTwoSubmit(data); TODO add server action
+      const isSuccess = true;
+      if (isSuccess) {
+        toast.success("Saved");
+        router.push(`?slide=${3}`, { scroll: false });
+      } else {
+        toast.error("Error, saving was unsuccessful.");
+      }
+    } catch (error) {
+      toast.error("An unexpected error occurred.");
     }
   };
 
-  const handleClickPreviousSlide = () => {
-    router.push(`?slide=${1}`, { scroll: false });
-  };
-
   return (
-    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-      <div className="h-[9rem] sm:mx-auto sm:w-full sm:max-w-sm">
-        <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-white">
-          Demographic
-        </h2>
-        <p>This information is private, but helps us improve</p>
-      </div>
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <div className="h-[9rem] sm:mx-auto sm:w-full sm:max-w-sm">
+          <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-white">
+            Demographic
+          </h2>
+          <p>This information is private, but helps us improve</p>
+        </div>
 
-      <div className="mt-10... sm:mx-auto sm:w-full sm:max-w-sm ">
-        <div className="h-[21.75rem] space-y-6">
-          <div>
-            <label
-              htmlFor="gender"
-              className="block text-sm font-medium leading-6 text-gray-900"
-            >
-              Gender
-            </label>
-            <select
-              id="gender"
-              {...register("gender")}
-              className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-            >
-              <option value="" disabled>
+        <div className="mt-10... sm:mx-auto sm:w-full sm:max-w-sm ">
+          <div className="h-[21.75rem] space-y-6">
+            <div>
+              <label
+                htmlFor="gender"
+                className="block text-sm font-medium leading-6 text-gray-900"
+              >
                 Gender
-              </option>
-              {genderOptions.map((gender: string) => (
-                <option key={gender}>{gender}</option>
-              ))}
-            </select>
+              </label>
+              <select
+                id="gender"
+                {...register("gender")}
+                className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
+              >
+                <option value="" disabled>
+                  Gender
+                </option>
+                {genderOptions.map((gender: string) => (
+                  <option key={gender}>{gender}</option>
+                ))}
+              </select>
 
-            {errors.gender && <p>{`${errors.gender.message}`}</p>}
-          </div>
+              {errors.gender && <p>{`${errors.gender.message}`}</p>}
+            </div>
 
-          <fieldset>
-            <legend>Date of Birth</legend>
+            <fieldset>
+              <legend>Date of Birth</legend>
 
-            <div className="flex justify-between gap-1 sm:gap-8">
-              <div className="flex-grow">
-                <label htmlFor="year" className="hidden">
-                  Year
-                </label>
-                <select
-                  id="year"
-                  name="year"
-                  value={year ? year : ""}
-                  required
-                  onChange={(e) => setYear(Number(e.target.value))}
-                  className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                >
-                  <option value="" disabled>
+              <div className="flex justify-between gap-1 sm:gap-8">
+                <div className="flex-grow">
+                  <label htmlFor="year" className="hidden">
                     Year
-                  </option>
-                  {years.map((year) => (
-                    <option key={year}>{year}</option>
-                  ))}
-                </select>
-              </div>
+                  </label>
+                  <select
+                    id="year"
+                    name="year"
+                    value={year ? year : ""}
+                    required
+                    onChange={(e) => setYear(Number(e.target.value))}
+                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
+                  >
+                    <option value="" disabled>
+                      Year
+                    </option>
+                    {years.map((year) => (
+                      <option key={year}>{year}</option>
+                    ))}
+                  </select>
+                </div>
 
-              <div className="flex-grow">
-                <label htmlFor="month" className="hidden">
-                  Month
-                </label>
-                <select
-                  id="month"
-                  name="month"
-                  value={month !== undefined ? monthsOptions[month] : ""}
-                  required
-                  className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                  onChange={(e) =>
-                    setMonth(monthsOptions.indexOf(e.target.value))
-                  }
-                >
-                  <option value="" disabled>
+                <div className="flex-grow">
+                  <label htmlFor="month" className="hidden">
                     Month
-                  </option>
-                  {monthsOptions.map((month) => (
-                    <option key={month}>{month}</option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="flex-grow">
-                <label htmlFor="day" className="hidden">
-                  day
-                </label>
-                <select
-                  id="day"
-                  name="day"
-                  value={day ? day : ""}
-                  className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
-                  disabled={!year || month === undefined}
-                  required
-                  onChange={(e) => setDay(Number(e.target.value))}
-                >
-                  <option value="" disabled>
-                    Day
-                  </option>
+                  </label>
+                  <select
+                    id="month"
+                    name="month"
+                    value={month !== undefined ? monthsOptions[month] : ""}
+                    required
+                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
+                    onChange={(e) =>
+                      setMonth(monthsOptions.indexOf(e.target.value))
+                    }
+                  >
+                    <option value="" disabled>
+                      Month
+                    </option>
+                    {monthsOptions.map((month) => (
+                      <option key={month}>{month}</option>
+                    ))}
+                  </select>
+                </div>
 
-                  {listOfDaysInSelectedMonth.map((day) => (
-                    <option key={day}>{day}</option>
-                  ))}
-                </select>
+                <div className="flex-grow">
+                  <label htmlFor="day" className="hidden">
+                    day
+                  </label>
+                  <select
+                    id="day"
+                    name="day"
+                    value={day ? day : ""}
+                    className="mt-2 block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6"
+                    disabled={!year || month === undefined}
+                    required
+                    onChange={(e) => setDay(Number(e.target.value))}
+                  >
+                    <option value="" disabled>
+                      Day
+                    </option>
+
+                    {listOfDaysInSelectedMonth.map((day) => (
+                      <option key={day}>{day}</option>
+                    ))}
+                  </select>
+                </div>
               </div>
-            </div>
-            {errors.dateOfBirth && <p>{`${errors.dateOfBirth.message}`}</p>}
-          </fieldset>
-        </div>
+              {errors.dateOfBirth && <p>{`${errors.dateOfBirth.message}`}</p>}
+            </fieldset>
+          </div>
 
-        <SlideButtons
-          handleClickNextSlide={handleClickNextSlide}
-          handleClickPreviousSlide={handleClickPreviousSlide}
-        />
+          <div className="mt-6 flex justify-end">
+            <button
+              type="button"
+              onClick={() => router.push(`?slide=${1}`, { scroll: false })}
+              className="mr-4 flex w-[6rem] justify-center rounded-md bg-slate-100 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
+            >
+              Go back
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="flex w-[6rem] justify-center rounded-md bg-red-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
+              Next
+            </button>
+          </div>
+        </div>
       </div>
-    </div>
+    </form>
   );
 }