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 Immediate Error Message Display on Form Load #39

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix Immediate Error Message Display on Form Load #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 26 additions & 27 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React, { useState } from "react";
import Script from "next/script";
import getConstants from "../constants";
import examConfigs from "../examConfig";
import Dropdown from "../components/dropdown";
import { useRouter } from "next/router";
import Head from "next/head";
import React, { useState } from 'react';
import Script from 'next/script';
import getConstants from '../constants';
import examConfigs from '../examConfig';
import Dropdown from '../components/dropdown';
import { useRouter } from 'next/router';
import Head from 'next/head';

const ExamForm = () => {
const [selectedExam, setSelectedExam] = useState("");
const [selectedExam, setSelectedExam] = useState('');
const [formData, setFormData] = useState({});
const [config, setConfig] = useState(null);
const [formSubmitted, setFormSubmitted] = useState(false);
const router = useRouter();

const handleExamChange = (selectedOption) => {
Expand All @@ -20,13 +21,11 @@ const ExamForm = () => {
exam: selectedOption.value,
rank: 0,
code: selectedOption.code,
// apiEndpoint: selectedOption.apiEndpoint,
});
} else {
setFormData({
exam: selectedOption.value,
rank: 0,
// apiEndpoint: selectedOption.apiEndpoint,
});
}
};
Expand All @@ -45,17 +44,19 @@ const ExamForm = () => {
rank: enteredRank,
}));
};

const handleSubmit = async () => {
setFormSubmitted(true);
if (Object.values(formData).some((value) => !value)) return;

const queryString = Object.entries(formData)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join("&");
.join('&');
router.push(`/college_predictor?${queryString}`);
};
const isSubmitDisabled = Object.values(formData).some((value) => !value);
const renderFields = () => {
if (!selectedExam) return null;

if (!config) return null;
const renderFields = () => {
if (!selectedExam || !config) return null;

return config.fields.map((field) => (
<div key={field.name} className="my-4 w-full sm:w-3/4">
Expand All @@ -64,7 +65,7 @@ const ExamForm = () => {
</label>
<Dropdown
options={field.options.map((option) =>
typeof option === "string"
typeof option === 'string'
? { value: option, label: option }
: option
)}
Expand All @@ -88,18 +89,17 @@ const ExamForm = () => {
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-FHGVRT52L7');
`}
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-FHGVRT52L7');
`}
</Script>
<div className="text-center flex flex-col items-center w-full sm:w-3/4 md:w-2/3 lg:w-1/2 mt-8 p-8 pb-10 bg-[#f8f9fa] shadow-inner drop-shadow-md rounded-md">
<h1 className="text-2xl md:text-3xl font-bold mb-6">
{getConstants().TITLE}
</h1>
<div className="flex flex-col justify-center sm:flex-row flex-wrap w-full">
<div className="flex flex-col justify-center sm:flex-row flex-wrap w-full">
<div className="my-4 w-full sm:w-3/4">
<label
htmlFor="exam"
Expand All @@ -126,7 +126,7 @@ const ExamForm = () => {
</label>
<input
type="number"
value={formData.rank || ""}
value={formData.rank || ''}
onChange={handleRankChange}
className="border border-gray-300 rounded w-full p-2 text-center"
placeholder="Enter your rank"
Expand All @@ -137,13 +137,12 @@ const ExamForm = () => {
{selectedExam && (
<>
<button
className="mt-2 px-5 py-2 rounded-lg bg-red-600 text-white cursor-pointer hover:bg-red-700 active:bg-red-800 disabled:bg-gray-300 disabled:cursor-not-allowed -translate-x-4"
disabled={isSubmitDisabled}
className="mt-2 px-5 py-2 rounded-lg bg-red-600 text-white cursor-pointer hover:bg-red-700 active:bg-red-800 -translate-x-4"
onClick={handleSubmit}
>
Submit
</button>
{isSubmitDisabled && (
{formSubmitted && Object.values(formData).some((value) => !value) && (
<p className="text-red-600 text-sm mt-2 -translate-x-4">
Please fill all the fields before submitting!
</p>
Expand Down