Skip to content

Commit

Permalink
refactor slide2 to add useform
Browse files Browse the repository at this point in the history
  • Loading branch information
@John-Paul-Larkin
John-Paul-Larkin committed Feb 27, 2024
1 parent 17a1079 commit 114a13e
Showing 1 changed file with 147 additions and 128 deletions.
275 changes: 147 additions & 128 deletions app/(app)/alpha/additional-details/_client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
);
}

Expand Down

0 comments on commit 114a13e

Please sign in to comment.