From 30d4fc670e2d1e5573ef9ca65c93db4be2b498c8 Mon Sep 17 00:00:00 2001
From: Praneeth Palugula <praneeth.palugula@gmail.com>
Date: Fri, 25 Oct 2024 14:27:43 +0530
Subject: [PATCH] Formatted the code

---
 pages/index.js | 53 +++++++++++++++++++++++++-------------------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index fd81c10..b87907e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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) => {
@@ -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,
       });
     }
   };
@@ -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">
@@ -64,7 +65,7 @@ const ExamForm = () => {
         </label>
         <Dropdown
           options={field.options.map((option) =>
-            typeof option === "string"
+            typeof option === 'string'
               ? { value: option, label: option }
               : option
           )}
@@ -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"
@@ -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"
@@ -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>