Skip to content

Commit

Permalink
Merge pull request #35 from kamini08/main
Browse files Browse the repository at this point in the history 
fix: set default input values and prevent duplicate data submission
  • Loading branch information
@SkySingh04
SkySingh04 authored Aug 16, 2024
2 parents 73fca8d + f062453 commit eaaf3f9
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 60 deletions.
16 changes: 13 additions & 3 deletions components/forms/formContext.tsx
View file
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit eaaf3f9

Please sign in to comment.