Age validation

FU.SPA/src/components/pages/ProfileSettings.jsx

@@ -31,6 +31,7 @@ export default function ProfileSettings() {
   const { refreshUser } = useContext(UserContext);
   const [isEnabled, setIsEnabled] = useState(false);
   const [bioError, setBioError] = useState('');
+  const [dateError, setDateError] = useState('');
 
   useEffect(() => {
     async function fetchUserInfo() {
@@ -45,10 +46,10 @@ export default function ProfileSettings() {
 
     fetchUserInfo();
   }, []);
-
+  // Shows or hides the update profile button
   useEffect(() => {
-    setIsEnabled(bio.length <= 1500);
-  }, [bio, isEnabled]);
+    setIsEnabled(bio.length <= 1500 && !dateError);
+  }, [bio, isEnabled, dateError]);
 
   // Handles the errors and value changes for the bio(About) section.
   const handleBioChange = (e) => {
@@ -60,6 +61,30 @@ export default function ProfileSettings() {
       setBio(e);
     }
   };
+  // Handles the errors and value changes for the date of birth section.
+  const handleDOBChange = (e) => {
+    try {
+      const today = dayjs();
+      const ageEntered = today.diff(e, 'year');
+      console.log(ageEntered);
+      // allows clearing date of birth
+      if (e == null) {
+        setDateError('');
+        setDateOfBirth(e);
+      } else if (ageEntered < 13) {
+        setDateError('You must be at least 13 years old.');
+        setDateOfBirth(e);
+      } else if (ageEntered > 120) {
+        setDateError('You must enter an age less than 120 years old.');
+        setDateOfBirth(e);
+      } else {
+        setDateError('');
+        setDateOfBirth(e);
+      }
+    } catch (e) {
+      console.error('Error in DOB change: ', e);
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -151,10 +176,16 @@ export default function ProfileSettings() {
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <DatePicker
             label="Date of Birth"
-            value={dateOfBirth} // Leave null as to not change date
+            value={dateOfBirth}
             fullWidth
-            onChange={(newValue) => setDateOfBirth(newValue)}
-            slotProps={{ field: { clearable: true } }}
+            onChange={(newValue) => handleDOBChange(newValue)}
+            slotProps={{
+              field: {
+                clearable: true,
+                helperText: dateError,
+                error: !!dateError,
+              },
+            }}
           />
         </LocalizationProvider>
         <TextField