Further changes made.

Author: MapleSyrupy

src/components/design_system/dataTable/DataTableHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, ChangeEvent, ReactNode } from "react";
-import { Grid2 as Grid, Stack, Typography } from "@mui/material";
+import { Grid as Grid, Stack, Typography } from "@mui/material";
 
 import Search from "@/components/design_system/search/Search";
 

src/components/student/EditStudentModal.tsx

@@ -37,7 +37,10 @@ interface EditStudentModalProps {
   error?: boolean;
 
   //helperText
-  helperText?: string;
+  helperText?: {
+    message: string;
+    field?: string | null;
+  };
 }
 
 export const EditStudentModal = ({
@@ -80,7 +83,9 @@ export const EditStudentModal = ({
                     defaultValue={student?.first_name || ""}
                     required
                     error={error}
-                    helperText={helperText}
+                    helperText={
+                      helperText?.field === "name" ? helperText.message : ""
+                    }
                   />
                 </Container>
                 <Container className={$CompassModal.editModalContainer}>
@@ -92,7 +97,9 @@ export const EditStudentModal = ({
                     defaultValue={student?.last_name || ""}
                     required
                     error={error}
-                    helperText={helperText}
+                    helperText={
+                      helperText?.field === "name" ? helperText.message : ""
+                    }
                   />
                 </Container>
                 <Container className={$CompassModal.editModalContainer}>
@@ -111,8 +118,10 @@ export const EditStudentModal = ({
                     type="number"
                     name="grade"
                     defaultValue={(student?.grade || 0).toString()}
-                    error={error}
-                    helperText={helperText}
+                    error={helperText?.field === "grade" ? true : false}
+                    helperText={
+                      helperText?.field === "grade" ? helperText.message : ""
+                    }
                     required
                   />
                 </Container>

src/pages/students/[student_id].tsx

@@ -38,10 +38,38 @@ const ViewStudentPage: NextPageWithBreadcrumbs = () => {
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
 
-  const [formError, setFormError] = useState(false);
-  const [helperText, setHelperText] = useState("");
+  interface errorMessage {
+    message: string;
+    field: string | null;
+  }
+  interface FormError {
+    error: boolean;
+    errorMessage: errorMessage;
+  }
 
+  const [formError, setFormError] = useState<FormError>({
+    error: false,
+    errorMessage: { message: "", field: null },
+  });
   const utils = trpc.useContext();
+
+  // Handle error timeout
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    if (formError.error) {
+      timeoutId = setTimeout(() => {
+        setFormError({
+          error: false,
+          errorMessage: { message: "", field: null },
+        });
+      }, 3000);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [formError]);
   const router = useRouter();
   const { student_id } = router.query;
 
@@ -106,21 +134,22 @@ const ViewStudentPage: NextPageWithBreadcrumbs = () => {
       !alphabeticalRegex.test(data.get("firstName") as string) ||
       !alphabeticalRegex.test(data.get("lastName") as string)
     ) {
-      setFormError(true);
-      setHelperText("Only letters, spaces, and hyphens allowed");
-      setTimeout(() => {
-        setFormError(false);
-        setHelperText("");
-      }, 3000);
-
+      setFormError({
+        error: true,
+        errorMessage: {
+          message: "Only letters, spaces, and hyphens allowed",
+          field: "name",
+        },
+      });
       return;
     } else if (Number(data.get("grade")) === 0) {
-      setFormError(true);
-      setHelperText("Grade must be between 1 and 12");
-      setTimeout(() => {
-        setHelperText("");
-        setFormError(false);
-      }, 3000);
+      setFormError({
+        error: true,
+        errorMessage: {
+          message: "Grade must be between 1 and 12",
+          field: "grade",
+        },
+      });
       return;
     } else {
       editMutation.mutate({
@@ -284,8 +313,8 @@ const ViewStudentPage: NextPageWithBreadcrumbs = () => {
         endDate={endDate}
         setStartDate={setStartDate}
         onSubmit={handleEditStudent}
-        error={formError}
-        helperText={helperText}
+        error={formError.error}
+        helperText={formError.errorMessage}
       />
 
       {/* Archiving Student Modal appears when "Archive" button is pressed*/}