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

fix: set default input values and prevent duplicate data submission #35

Merged
merged 3 commits into from
Aug 16, 2024
Merged

fix: set default input values and prevent duplicate data submission #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4211fae
set default input values and prevent duplicate data submission
Aug 16, 2024
1a96a07
Resolved merge conflicts
Aug 16, 2024
f062453
Merge branch 'main' of https://github.com/kamini08/pbwebsite
Aug 16, 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
16 changes: 13 additions & 3 deletions components/forms/formContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ interface ITeamInfo {
name: string;
email: string;
phone: string;
role: string;
enrollment_id: string;
course: string;
year_of_study: string;
branch: string;
};
}

Expand Down Expand Up @@ -58,15 +63,20 @@ export const FormProvider: React.FC<{ children: React.ReactNode }> = ({
const [formData, setFormData] = useState<IFormData>({
team_info: {
team_name: "",
college_name: "",
team_size: 6,
college_name: "DSCE",
team_size: 5,
team_leader: {
name: "",
email: "",
phone: "",
enrollment_id: "",
role: "",
course: "",
year_of_study: "",
branch: "",
},
},
team_members: Array.from({ length: 6 }, () => ({
team_members: Array.from({ length: 5 }, () => ({
name: "",
email: "",
phone: "",
Expand Down
193 changes: 136 additions & 57 deletions components/forms/sihForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { useRouter } from "next/navigation";
const SIHMultiStepForm: React.FC = () => {
const { formData, setFormData } = useFormContext();
const [step, setStep] = useState<number>(1);
formData.team_members.length = formData.team_info.team_size;
const [isSuccess, setSuccess] = useState<boolean>(false);
const {
register,
Expand Down Expand Up @@ -89,13 +88,13 @@ const SIHMultiStepForm: React.FC = () => {
</g>
</svg>
</div>
<h2 className="mt-2 font-semibold text-gray-800">
<h2 className="mt-2 font-semibold text-gray-100">
Registration Successfull!
</h2>
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
You have successfully registered for Smart India Hackathon.
</p>
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
<p className="mt-2 text-sm text-gray-400 leading-relaxed">
Join the Whatsapp Group for further updates immediately.
</p>
</div>
Expand All @@ -116,7 +115,7 @@ const SIHMultiStepForm: React.FC = () => {
<div className="my-4 mx-auto p-6 rounded-lg">
<img
className="rounded-full h-20 mx-auto mb-6 w-20"
src="https://i0.wp.com/opportunitycell.com/wp-content/uploads/2022/03/SIH2.png?fit=327%2C345&ssl=1"
src="/images/sih.png"
alt="SIH"
/>
<h1 className="mb-6 h1 text-center">SIH Registration Form</h1>
Expand Down Expand Up @@ -147,7 +146,7 @@ const SIHMultiStepForm: React.FC = () => {

<div className="mb-4">
<label className="block mb-2">
Team Leader Name<span className="text-red-600"> * </span>
Team Leader's Name<span className="text-red-600"> * </span>
</label>
<input
{...register("team_info.team_leader.name", {
Expand All @@ -167,7 +166,7 @@ const SIHMultiStepForm: React.FC = () => {

<div className="mb-4">
<label className="block mb-2">
Team Leader Email<span className="text-red-600"> * </span>
Team Leader's Email<span className="text-red-600"> * </span>
</label>
<input
{...register("team_info.team_leader.email", {
Expand All @@ -187,7 +186,7 @@ const SIHMultiStepForm: React.FC = () => {

<div className="mb-4">
<label className="block mb-2">
Team Leader Phone Number
Team Leader's Phone Number
<span className="text-red-600"> * </span>
</label>
<input
Expand All @@ -208,47 +207,127 @@ const SIHMultiStepForm: React.FC = () => {
</div>

<div className="mb-4">
<label className="block mb-2">
College/Institution Name
<span className="text-red-600"> * </span>
</label>
<input
{...register("team_info.college_name", {
required: "College Name is required",
})}
name="team_info.college_name"
type="text"
placeholder="Enter the institution name"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_info?.college_name && (
<p className="text-red-500">
{errors.team_info.college_name.message}
</p>
)}
</div>
<label className="block">
Team Leader's Role in Team<span className="text-red-600"> * </span>
</label>
<input
{...register(`team_info.team_leader.role`, {
required: "Role is required",
})}
name={`team_info.team_leader.role`}
type="text"
placeholder="Enter role in team"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_info?.team_leader?.role && (
<p className="text-red-500">
{errors.team_info.team_leader.role.message}
</p>
)}
</div>

<div className="mb-4">
<label className="block mb-2">
Team Size<span className="text-red-600"> * </span>
</label>
<input
{...register("team_info.team_size", {
required: "Team Size is required",
})}
type="number"
name="team_info.team_size"
min="2"
max="6"
placeholder="Enter team size (usually 6)"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_info?.team_size && (
<p className="text-red-500">
{errors.team_info.team_size.message}
</p>
)}
</div>
<div className="mb-4">
<label className="block">
Team Leader's College ID/USN
<span className="text-red-600"> * </span>
</label>
<input
{...register(`team_info.team_leader.enrollment_id`, {
required: "College ID is required",
})}
name={`team_info.team_leader.enrollment_id`}
pattern="[1][D][S][1-2][0-9][A-Z][A-Z][0-9]{3}"
type="text"
placeholder="Enter college ID"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_info?.team_leader?.enrollment_id && (
<p className="text-red-500">
{errors.team_info.team_leader.enrollment_id.message}
</p>
)}
</div>

<div className="mb-4">
<label className="block">
Team Leader's Course/Department<span className="text-red-600"> * </span>
</label>
<select
{...register(`team_info.team_leader.course`, {
required: "Course is required",
})}
name={`team_info.team_leader.course`}
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:border-2 focus:border-green-500"
>
{courses.map((course) => (
<option
className="w-full px-4 py-2 border bg-black t rounded-md form-input focus:outline-none focus:border-2 focus:border-green-500"
value={course}
>
{course}
</option>
))}
</select>
{errors.team_info?.team_leader?.course && (
<p className="text-red-500">
{errors.team_info.team_leader.course.message}
</p>
)}
</div>

<div className="mb-4">
<label className="block">
Team Leaders's Year of Study<span className="text-red-600"> * </span>
</label>
<select
{...register(`team_info.team_leader.year_of_study`, {
required: "Year of study is required",
})}
name={`team_info.team_leader.year_of_study`}
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
>
{years.map((year) => (
<option
className="w-full px-4 py-2 border rounded-md bg-black form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
value={year}
>
{year}
</option>
))}
</select>
{errors.team_info?.team_leader?.year_of_study && (
<p className="text-red-500">
{errors.team_info.team_leader.year_of_study.message}
</p>
)}
</div>

<div className="mb-4">
<label className="block">
Team Leader's Branch<span className="text-red-600"> * </span>
</label>
<select
{...register(`team_info.team_leader.branch`, {
required: "Branch is required",
})}
name={`team_info.team_leader.branch`}
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
>
{branches.map((branch) => (
<option
className="w-50 text-wrap px-4 py-2 border rounded-md bg-black form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
value={branch}
>
{branch}
</option>
))}
</select>
{errors.team_info?.team_leader?.branch && (
<p className="text-red-500">
{errors.team_info.team_leader.branch.message}
</p>
)}
</div>

<button
type="submit"
Expand Down Expand Up @@ -277,7 +356,7 @@ const SIHMultiStepForm: React.FC = () => {
name={`team_members.${index}.name`}
type="text"
placeholder="Enter member's name"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_members?.[index]?.name && (
<p className="text-red-500">
Expand All @@ -297,7 +376,7 @@ const SIHMultiStepForm: React.FC = () => {
name={`team_members.${index}.email`}
type="email"
placeholder="Enter member's email"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_members?.[index]?.email && (
<p className="text-red-500">
Expand All @@ -318,7 +397,7 @@ const SIHMultiStepForm: React.FC = () => {
pattern="[1-9]{1}[0-9]{9}"
type="tel"
placeholder="Enter member's phone number"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_members?.[index]?.phone && (
<p className="text-red-500">
Expand All @@ -338,7 +417,7 @@ const SIHMultiStepForm: React.FC = () => {
name={`team_members.${index}.role`}
type="text"
placeholder="Enter role in team"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_members?.[index]?.role && (
<p className="text-red-500">
Expand All @@ -360,7 +439,7 @@ const SIHMultiStepForm: React.FC = () => {
pattern="[1][D][S][1-2][0-9][A-Z][A-Z][0-9]{3}"
type="text"
placeholder="Enter college ID"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
/>
{errors.team_members?.[index]?.enrollment_id && (
<p className="text-red-500">
Expand Down Expand Up @@ -405,11 +484,11 @@ const SIHMultiStepForm: React.FC = () => {
required: "Year of study is required",
})}
name={`team_members.${index}.year_of_study`}
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
>
{years.map((year) => (
<option
className="w-full px-4 py-2 border rounded-md bg-black form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-black form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
value={year}
>
{year}
Expand All @@ -432,11 +511,11 @@ const SIHMultiStepForm: React.FC = () => {
required: "Branch is required",
})}
name={`team_members.${index}.branch`}
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-full px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
>
{branches.map((branch) => (
<option
className="w-50 text-wrap px-4 py-2 border rounded-md bg-black form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="w-50 text-wrap px-4 py-2 border rounded-md bg-black form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
value={branch}
>
{branch}
Expand Down Expand Up @@ -528,7 +607,7 @@ const SIHMultiStepForm: React.FC = () => {
>
{problems.map((problem) => (
<option
className="px-4 py-2 border rounded-md bg-transparent form-input focus:outline-none focus:ring-2 focus:ring-green-500"
className="px-4 py-2 border rounded-md bg-transparent form-input focus:border-0 focus:outline-offset-0 focus:outline-green-500"
value={problem}
>
{problem}
Expand Down
Binary file modified public/images/sih.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading