From 0e29de56f7f4676e83b985f57d11db485b230724 Mon Sep 17 00:00:00 2001 From: vipinmishra0852 Date: Wed, 23 Oct 2024 04:01:49 +0530 Subject: [PATCH 1/2] Validation Issue: Rank Field Accepting Negative Values #42 --- pages/college_predictor.js | 157 ++++++++++++++++++++++++++----------- 1 file changed, 112 insertions(+), 45 deletions(-) diff --git a/pages/college_predictor.js b/pages/college_predictor.js index 7486582..31b2732 100644 --- a/pages/college_predictor.js +++ b/pages/college_predictor.js @@ -11,15 +11,11 @@ const fuseOptions = { isCaseSensitive: false, includeScore: false, shouldSort: true, - includeMatches: false, - findAllMatches: false, minMatchCharLength: 1, - location: 0, threshold: 0.3, distance: 100, useExtendedSearch: true, ignoreLocation: true, - ignoreFieldNorm: false, fieldNormWeight: 1, keys: ["Institute", "State", "Academic Program Name"], }; @@ -28,9 +24,12 @@ const CollegePredictor = () => { const router = useRouter(); const [filteredData, setFilteredData] = useState([]); const [fullData, setFullData] = useState([]); - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [queryObject, setQueryObject] = useState({}); + const [rankError, setRankError] = useState(null); + const [inputError, setInputError] = useState(null); // Error state for general input validation + const [showResults, setShowResults] = useState(false); useEffect(() => { setQueryObject(router.query); @@ -38,7 +37,6 @@ const CollegePredictor = () => { const fuse = new Fuse(filteredData, fuseOptions); - // Search Function for fuse const searchFun = (e) => { if (e.target.value === "") { setFilteredData(fullData); @@ -49,56 +47,88 @@ const CollegePredictor = () => { setFilteredData(result.map((r) => r.item)); }; + const validateInputs = () => { + const { exam, rank } = queryObject; + + // Check for missing or invalid rank + const newRank = parseInt(rank, 10); + if (isNaN(newRank) || newRank <= 0) { + setRankError("Please enter a valid positive rank."); + return false; + } + + // Check for missing exam selection or other required fields + const examConfig = examConfigs[exam]; + if (!exam || !examConfig) { + setInputError( + "Please select a valid exam and provide all required details." + ); + return false; + } + + for (const field of examConfig.fields) { + if (!queryObject[field.name]) { + setInputError(`Missing required field: ${field.label}`); + return false; + } + } + + // Clear errors if all inputs are valid + setRankError(null); + setInputError(null); + return true; + }; + const fetchData = async (query) => { setIsLoading(true); setError(null); + try { const params = new URLSearchParams(Object.entries(query)); const queryString = params.toString(); if (queryString === "") return; const response = await fetch(`/api/exam-result?${queryString}`); + const data = await response.json(); if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); + throw new Error(data.error || `HTTP error! status: ${response.status}`); } - const data = await response.json(); setFilteredData(data); setFullData(data); } catch (error) { console.error("Error fetching data:", error); - setError("Failed to fetch college predictions. Please try again."); + setError( + error.message || + "Failed to fetch college predictions. Please try again." + ); setFilteredData([]); } finally { setIsLoading(false); } }; - const handleQueryObjectChange = (key) => async (selectedOption) => { - const newQueryObject = { + const handleQueryObjectChange = (key) => (selectedOption) => { + setQueryObject({ ...queryObject, [key]: selectedOption.label, - }; - setQueryObject(newQueryObject); - const params = new URLSearchParams(Object.entries(newQueryObject)); - const queryString = params.toString(); - router.push(`/college_predictor?${queryString}`); - await fetchData(newQueryObject); + }); }; - const handleRankChange = async (e) => { - const newQueryObject = { + const handleRankChange = (e) => { + const newRank = parseInt(e.target.value, 10); + setQueryObject({ ...queryObject, - rank: e.target.value, - }; - setQueryObject(newQueryObject); - const params = new URLSearchParams(Object.entries(newQueryObject)); - const queryString = params.toString(); - router.push(`/college_predictor?${queryString}`); - await fetchData(newQueryObject); + rank: newRank, + }); }; - useEffect(() => { - fetchData(router.query); - }, [router.query]); + const handleSearchClick = () => { + if (validateInputs()) { + setShowResults(true); + fetchData(queryObject); + } else { + setShowResults(false); + } + }; const renderQueryDetails = () => { const examConfig = examConfigs[router.query.exam]; @@ -106,19 +136,19 @@ const CollegePredictor = () => { return (
-

+

Exam: {router.query.exam}

{examConfig.fields.map((field) => ( -
-
); }; @@ -151,18 +191,41 @@ const CollegePredictor = () => { College Predictor - Result
-
+

{getConstants().TITLE}

{renderQueryDetails()} + {isLoading ? (
-
+
+ Loading... +

Loading your college predictions...

) : error ? ( -
{error}
+
+ {error} +
+ ) : inputError ? ( +
+

{inputError}

+
+ ) : !showResults ? ( +
+

+ Please enter correct credentials to see college predictions. +

+
) : filteredData.length === 0 ? (

No colleges found matching your criteria.

@@ -171,18 +234,22 @@ const CollegePredictor = () => { ) : ( <>
-
-

+

Predicted colleges and courses for you: -

+
Date: Wed, 23 Oct 2024 11:21:52 +0530 Subject: [PATCH 2/2] Title: Validation error message displayed prematurely on page load for form submission #38 --- pages/college_predictor.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/pages/college_predictor.js b/pages/college_predictor.js index 31b2732..f85c65d 100644 --- a/pages/college_predictor.js +++ b/pages/college_predictor.js @@ -28,8 +28,9 @@ const CollegePredictor = () => { const [error, setError] = useState(null); const [queryObject, setQueryObject] = useState({}); const [rankError, setRankError] = useState(null); - const [inputError, setInputError] = useState(null); // Error state for general input validation + const [inputError, setInputError] = useState(null); const [showResults, setShowResults] = useState(false); + const [submitted, setSubmitted] = useState(false); // Track form submission useEffect(() => { setQueryObject(router.query); @@ -50,14 +51,12 @@ const CollegePredictor = () => { const validateInputs = () => { const { exam, rank } = queryObject; - // Check for missing or invalid rank const newRank = parseInt(rank, 10); if (isNaN(newRank) || newRank <= 0) { setRankError("Please enter a valid positive rank."); return false; } - // Check for missing exam selection or other required fields const examConfig = examConfigs[exam]; if (!exam || !examConfig) { setInputError( @@ -73,7 +72,6 @@ const CollegePredictor = () => { } } - // Clear errors if all inputs are valid setRankError(null); setInputError(null); return true; @@ -122,6 +120,7 @@ const CollegePredictor = () => { }; const handleSearchClick = () => { + setSubmitted(true); // Mark as submitted if (validateInputs()) { setShowResults(true); fetchData(queryObject); @@ -176,7 +175,7 @@ const CollegePredictor = () => { min="1" />
- {rankError && ( + {submitted && rankError && (
{rankError}
@@ -216,11 +215,11 @@ const CollegePredictor = () => {
{error}
- ) : inputError ? ( + ) : submitted && inputError ? (

{inputError}

- ) : !showResults ? ( + ) : !submitted ? (

Please enter correct credentials to see college predictions.