Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove form from main component. add form to slideone #770

Merged
merged 3 commits into from
Feb 27, 2024
Merged

remove form from main component. add form to slideone #770

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7928b10
remove form from main component. add form to slideone
John-Paul-Larkin Feb 25, 2024
6b62d4a
update onFormSubmit function
John-Paul-Larkin Feb 26, 2024
10f3b45
Merge branch 'develop' into refactor-additional-user-details-form-2
NiallJoeMaher Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 127 additions & 140 deletions app/(app)/alpha/additional-details/_client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import React, { useEffect, useState } from "react";
import { redirect, useRouter, useSearchParams } from "next/navigation";
import { useSession } from "next-auth/react";
import {
AdditionalDetailsSchema,
type TypeAdditionalDetailsSchema,
type TypeSlideOneSchema,
slideOneSchema,
} from "@/schema/additionalUserDetails";
import { zodResolver } from "@hookform/resolvers/zod";
import { FormProvider, useForm, useFormContext } from "react-hook-form";
import { handleFormSubmit } from "./actions";
import { useForm, useFormContext } from "react-hook-form";

import { toast } from "sonner";
import {
professionalOrStudentOptions,
Expand Down Expand Up @@ -39,169 +39,156 @@ export default function AdditionalSignUpDetails({
details: UserDetails;
}) {
const session = useSession();

const useFormObject = useForm<TypeAdditionalDetailsSchema>({
resolver: zodResolver(AdditionalDetailsSchema),
defaultValues: details,
});

const searchParams = useSearchParams();
const slide = Number(searchParams.get("slide")) || 1;

const onFormSubmit = async (data: TypeAdditionalDetailsSchema) => {
try {
const isSuccess = await handleFormSubmit(data);
if (isSuccess) {
toast.success("Saved");
} else {
toast.error("Error, saving was unsuccessful.");
}
} catch (error) {
toast.error("An unexpected error occurred.");
}
};
const slide = Number(searchParams.get("slide")) || 1;
if (!session) {
return redirect("/get-started");
}

return (
<>
<FormProvider {...useFormObject}>
<form
className="min-h-[41rem]"
onSubmit={useFormObject.handleSubmit((data) => onFormSubmit(data))}
>
<SignupProgressBar currentSlide={slide} />

{slide === 1 && <SlideOne />}
{slide === 2 && <SlideTwo />}
{slide === 3 && <SlideThree />}
{slide === 4 && <SlideFour />}
</form>
</FormProvider>
</>
<div className="min-h-[41rem]">
<SignupProgressBar currentSlide={slide} />

{slide === 1 && <SlideOne details={details} />}
{/* {slide === 2 && <SlideTwo details={details} />} */}
{/* {slide === 3 && <SlideThree details={details} />} */}
</div>
);
}

function SlideOne() {
const {
register,
trigger,
formState: { errors },
} = useFormContext();

function SlideOne({ details }: { details: UserDetails }) {
const router = useRouter();

const handleClickNextSlide = async (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
e.preventDefault();
const isError = await trigger(
["firstName", "surname", "username", "location"],
{
shouldFocus: true,
},
);
const { username, firstName, surname, location } = details;

if (isError) {
router.push(`?slide=${2}`, { scroll: false });
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<TypeSlideOneSchema>({
resolver: zodResolver(slideOneSchema),
defaultValues: { username, firstName, surname, location },
});

const onFormSubmit = async (data: TypeSlideOneSchema) => {
try {
// const isSuccess = await handleFormSlideOneSubmit(data); TODO add server action
const isSuccess = true;
if (isSuccess) {
toast.success("Saved");
router.push(`?slide=${2}`, { scroll: false });
} else {
toast.error("Error, saving was unsuccessful.");
}
} catch (error) {
toast.error("An unexpected error occurred.");
}
};

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">
Profile information
</h2>
<p>This information will be displayed on your profile</p>
</div>
<div className="mt-10... sm:mx-auto sm:w-full sm:max-w-sm ">
<div className="space-y-6">
<div>
<label
htmlFor="name"
className="block text-sm font-medium leading-6 text-white"
>
First Name
</label>
<div className="mt-2 ">
<input
id="name"
{...register("firstName")}
placeholder="What should we call you?"
type="text"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
{errors.firstName && <p>{`${errors.firstName.message}`}</p>}
<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">
Profile information
</h2>
<p>This information will be displayed on your profile</p>
</div>
<div className="mt-10... sm:mx-auto sm:w-full sm:max-w-sm ">
<div className="space-y-6">
<div>
<label
htmlFor="name"
className="block text-sm font-medium leading-6 text-white"
>
First Name
</label>
<div className="mt-2 ">
<input
id="name"
{...register("firstName")}
placeholder="What should we call you?"
type="text"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
{errors.firstName && <p>{`${errors.firstName.message}`}</p>}
</div>
</div>
</div>

<div>
<label
htmlFor="surname"
className="block text-sm font-medium leading-6 text-white"
>
Surname
</label>
<div className="mt-2">
<input
id="surname"
{...register("surname")}
type="text"
placeholder="And your surname?"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
{errors.surname && <p>{`${errors.surname.message}`}</p>}
<div>
<label
htmlFor="surname"
className="block text-sm font-medium leading-6 text-white"
>
Surname
</label>
<div className="mt-2">
<input
id="surname"
{...register("surname")}
type="text"
placeholder="And your surname?"
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
{errors.surname && <p>{`${errors.surname.message}`}</p>}
</div>
</div>
</div>

<div>
<label
htmlFor="username"
className="block text-sm font-medium leading-6 text-white"
>
Username
</label>
<div className="relative flex items-center">
<div className="flex h-[36px] w-[7rem] items-center justify-center rounded-l-md bg-white text-black">
<span>codu.co/</span>
<div>
<label
htmlFor="username"
className="block text-sm font-medium leading-6 text-white"
>
Username
</label>
<div className="relative flex items-center">
<div className="flex h-[36px] w-[7rem] items-center justify-center rounded-l-md bg-white text-black">
<span>codu.co/</span>
</div>
<input
id="username"
{...register("username")}
placeholder="thehacker"
type="text"
className="relative top-[-2px] block rounded-r-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
</div>
<input
id="username"
{...register("username")}
placeholder="thehacker"
type="text"
className="relative top-[-2px] block rounded-r-md border-0 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:text-sm sm:leading-6"
/>
{errors.username && <p>{`${errors.username.message}`}</p>}
</div>
<div>
<label
htmlFor="location"
className="block text-sm font-medium leading-6 text-white"
>
Location
</label>
<select
id="location"
{...register("location")}
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>
Select
</option>
{locationOptions.map((location: string) => (
<option key={location}>{location}</option>
))}
</select>
{errors.location && <p>{`${errors.location.message}`}</p>}
</div>
{errors.username && <p>{`${errors.username.message}`}</p>}
</div>
<div>
<label
htmlFor="location"
className="block text-sm font-medium leading-6 text-gray-900"
>
Location
</label>
<select
id="location"
{...register("location")}
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"
<div className="mt-6 flex justify-end">
<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"
>
<option value="" disabled>
Select
</option>
{locationOptions.map((location: string) => (
<option key={location}>{location}</option>
))}
</select>
{errors.location && <p>{`${errors.location.message}`}</p>}
Next
</button>
</div>
</div>
<SlideButtons handleClickNextSlide={handleClickNextSlide} />
</div>
</div>
</form>
);
}

Expand Down