Skip to content

Commit 47c17ca

Browse files
myselfshravanmyselfshravan
committed
feat: enhance error handling in HomePage component with user guidance and improved UI feedback #deploy
1 parent f3f5f28 commit 47c17ca

File tree

1 file changed

+107
-36
lines changed

1 file changed

+107
-36
lines changed

‎src/pages/minisis.jsx‎

Lines changed: 107 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,7 @@ function HomePage() {
571571
const [isLoading, setIsLoading] = useState(false)
572572
const [error, setError] = useState('')
573573
const [studentData, setStudentData] = useState(null)
574+
const [hasError, setHasError] = useState(false)
574575
const [loginCounter, setLoginCounter] = useState(0)
575576
const [usn, setUsn] = useState('')
576577
const [dob, setDob] = useState('')
@@ -737,6 +738,7 @@ function HomePage() {
737738

738739
try {
739740
setError('')
741+
setHasError(false)
740742
setIsLoading(true)
741743
const testurl = `http://127.0.0.1:5000/sis?endpoint=newparents&usn=${currentUsn}&dob=${currentDob}`
742744
let apiurl = `https://reconnect-msrit.vercel.app/sis?endpoint=${semurl}&usn=${currentUsn}&dob=${currentDob}`
@@ -746,6 +748,13 @@ function HomePage() {
746748
}
747749
const response = await fetch(apiurl)
748750
if (!response.ok) {
751+
if (response.status === 500) {
752+
const error = new Error(
753+
'Server error: This endpoint is currently inactive. Try switching the semester toggle to use a different endpoint.'
754+
)
755+
error.isEndpointError = true
756+
throw error
757+
}
749758
const resp = await response.json()
750759
throw new Error(resp.error || 'Failed to fetch data.')
751760
}
@@ -769,9 +778,22 @@ function HomePage() {
769778
setLoginCounter((prev) => prev + 1)
770779
toast.success(`Welcome, ${data.name}!`)
771780
} catch (err) {
772-
setError(err.message || 'Unknown error occurred')
781+
const errorMessage = err.message || 'Unknown error occurred'
782+
setError(errorMessage)
773783
setIsLoggedIn(false)
774-
toast.error(err.message || 'Unknown error occurred')
784+
setHasError(true)
785+
toast.error(errorMessage)
786+
787+
if (err.isEndpointError) {
788+
// Show user guidance to try the alternative endpoint
789+
toast.info(
790+
'Try switching between Even/Odd semester using the toggle above',
791+
{
792+
autoClose: 8000,
793+
}
794+
)
795+
}
796+
setStudentData(null) // Clear any existing data to prevent crash
775797
} finally {
776798
setIsLoading(false)
777799
}
@@ -816,6 +838,7 @@ function HomePage() {
816838
setLoginCounter(0)
817839
setStudentData(null)
818840
setError('')
841+
setHasError(false)
819842
setIsLoggedIn(false)
820843
toast.info('Logged out successfully')
821844
}
@@ -881,43 +904,91 @@ function HomePage() {
881904
</p>
882905
{/* if student data the show a button to scroll to generate ai roast */}
883906
<div className="flex items-center justify-center ">
884-
{studentData && (
885-
<div className="flex flex-col gap-2">
886-
<button
887-
onClick={handleScrollToResponse}
888-
className="group relative mt-2 inline-block cursor-pointer rounded-full p-px text-xs font-semibold leading-6 text-white no-underline shadow-2xl shadow-zinc-900 dark:bg-slate-800"
889-
>
890-
<span className="absolute inset-0 overflow-hidden rounded-full">
891-
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
892-
</span>
893-
<div className="relative z-10 flex items-center space-x-2 rounded-full bg-slate-900 px-4 py-0.5 ring-1 ring-white/10 ">
894-
<span>Scroll to AI Roast</span>
895-
<svg
896-
fill="none"
897-
height="16"
898-
viewBox="0 0 24 24"
899-
width="16"
900-
xmlns="http://www.w3.org/2000/svg"
907+
{hasError ? (
908+
<div className="my-2 rounded-md bg-red-50 p-4 dark:bg-red-900/20">
909+
<div className="flex flex-col items-center justify-center">
910+
<h3 className="mb-2 text-lg font-semibold text-red-800 dark:text-red-200">
911+
Unable to Load Data
912+
</h3>
913+
<p className="mb-4 text-center text-red-700 dark:text-red-300">
914+
{error}
915+
</p>
916+
<div className="flex flex-col items-center gap-4">
917+
<div className="flex items-center gap-2">
918+
<p className="text-sm font-semibold">
919+
Try switching semester:
920+
</p>
921+
<Switch
922+
checked={enabled}
923+
onChange={(value) => {
924+
setEnabled(value)
925+
localStorage.setItem('semesterToggle', value)
926+
handleFetchData(usn, dob)
927+
}}
928+
className={`${
929+
enabled
930+
? 'bg-blue-600'
931+
: 'bg-white dark:bg-gray-500'
932+
} relative inline-flex h-6 w-11 items-center rounded-full`}
933+
>
934+
<span
935+
className={`${
936+
enabled ? 'translate-x-6' : 'translate-x-1'
937+
} inline-block h-4 w-4 transform rounded-full bg-gray-200 transition dark:bg-white`}
938+
/>
939+
</Switch>
940+
<span className="text-sm">
941+
{enabled ? 'Even' : 'Odd'} Sem
942+
</span>
943+
</div>
944+
<button
945+
onClick={() => handleFetchData(usn, dob)}
946+
className="rounded bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700"
901947
>
902-
<path
903-
d="M10.75 8.75L14.25 12L10.75 15.25"
904-
stroke="currentColor"
905-
strokeLinecap="round"
906-
strokeLinejoin="round"
907-
strokeWidth="1.5"
908-
/>
909-
</svg>
948+
Try Again
949+
</button>
910950
</div>
911-
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
912-
</button>
913-
914-
<button
915-
onClick={handleScrollToPrediction}
916-
className="inline-flex h-[1.8rem] animate-shimmer items-center justify-center rounded-full border border-slate-700 bg-[linear-gradient(110deg,#fefcea,45%,#f1f1f1,55%,#fefcea)] bg-[length:200%_100%] px-6 text-xs font-medium text-slate-900 shadow-slate-600 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 dark:bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] dark:text-white"
917-
>
918-
Predicted SGPA
919-
</button>
951+
</div>
920952
</div>
953+
) : (
954+
studentData && (
955+
<div className="flex flex-col gap-2">
956+
<button
957+
onClick={handleScrollToResponse}
958+
className="group relative mt-2 inline-block cursor-pointer rounded-full p-px text-xs font-semibold leading-6 text-white no-underline shadow-2xl shadow-zinc-900 dark:bg-slate-800"
959+
>
960+
<span className="absolute inset-0 overflow-hidden rounded-full">
961+
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
962+
</span>
963+
<div className="relative z-10 flex items-center space-x-2 rounded-full bg-slate-900 px-4 py-0.5 ring-1 ring-white/10 ">
964+
<span>Scroll to AI Roast</span>
965+
<svg
966+
fill="none"
967+
height="16"
968+
viewBox="0 0 24 24"
969+
width="16"
970+
xmlns="http://www.w3.org/2000/svg"
971+
>
972+
<path
973+
d="M10.75 8.75L14.25 12L10.75 15.25"
974+
stroke="currentColor"
975+
strokeLinecap="round"
976+
strokeLinejoin="round"
977+
strokeWidth="1.5"
978+
/>
979+
</svg>
980+
</div>
981+
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
982+
</button>
983+
984+
<button
985+
onClick={handleScrollToPrediction}
986+
className="inline-flex h-[1.8rem] animate-shimmer items-center justify-center rounded-full border border-slate-700 bg-[linear-gradient(110deg,#fefcea,45%,#f1f1f1,55%,#fefcea)] bg-[length:200%_100%] px-6 text-xs font-medium text-slate-900 shadow-slate-600 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 dark:bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] dark:text-white"
987+
>
988+
Predicted SGPA
989+
</button>
990+
</div>
991+
)
921992
)}
922993
</div>
923994
</div>

0 commit comments

Comments
 (0)