add not applicable field

src/Pages/UserInfoPage/UserInfoPage.tsx

@@ -1,212 +1,218 @@
-import Header from "../../Components/Header/Header";
-import styles from "../../styles";
-import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { UserAPI, UserUpdateAPI } from "../../Components/API/API";
-import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
-import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import {
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  TextField,
-} from "@mui/material";
-export default function UserInfoPage() {
-  const queryClient = useQueryClient();
-  const User = useQuery({ queryKey: ["user"], queryFn: UserAPI });
-  const [user, setUser] = useState({
-    first_name: "",
-    last_name: "",
-    username: "",
-    email: "",
-    course: "",
-    section: "",
-  });
-  const [error, setError] = useState("");
-  const mutation = useMutation({
-    mutationFn: async () => {
-      const data = await UserUpdateAPI(user);
-      if (data[0] != true) {
-        setError(JSON.stringify(data[1]));
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: (data) => {
-      queryClient.invalidateQueries({
-        queryKey: ["user"],
-      });
-      setError("Updated successfully");
-      toast(`User info updated successfuly`, {
-        position: "top-right",
-        autoClose: 2000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "light",
-      });
-      if (data && User.data) {
-        setUser({
-          first_name: User.data.first_name,
-          last_name: User.data.last_name,
-          username: User.data.username,
-          email: User.data.email,
-          course: User.data.course,
-          section: User.data.section,
-        });
-      }
-    },
-  });
-  useEffect(() => {
-    if (User.data) {
-      setUser(User.data);
-    }
-  }, [User.data]);
-
-  if (User.isLoading) {
-    return (
-      <div style={styles.background}>
-        <Header label={"Transactions"} />
-        <div
-          style={{
-            ...styles.flex_column,
-            ...{
-              alignItems: "center",
-              justifyContent: "center",
-              paddingTop: "64px",
-            },
-          }}
-        >
-          <CircularProgress style={{ height: "128px", width: "128px" }} />
-          <p
-            style={{
-              ...styles.text_dark,
-              ...styles.text_L,
-            }}
-          >
-            Loading
-          </p>
-        </div>
-      </div>
-    );
-  }
-  return (
-    <div style={styles.background}>
-      <Header label={"Dashboard"} />
-      <div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
-        <TextField
-          id="outlined-helperText"
-          label="First Name"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, first_name: e.target.value });
-            setError("");
-          }}
-          value={user.first_name}
-          placeholder={"Enter your first name"}
-        />
-        <TextField
-          id="outlined-helperText"
-          label="Last Name"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setUser({ ...user, last_name: e.target.value })
-          }
-          value={user.last_name}
-          placeholder={"Enter your last name"}
-        />
-        <p>{JSON.stringify(User.data)}</p>
-      </div>
-
-      <RestrictedComponent allow_only={"Student"}>
-        <FormLabel style={styles.text_dark} id="status-selection">
-          Course
-        </FormLabel>
-        <RadioGroup
-          aria-labelledby="demo-radio-buttons-group-label"
-          value={user.course}
-          defaultValue="BS Chemistry"
-          name="radio-buttons-group"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, course: e.target.value });
-            setError("");
-          }}
-        >
-          <div
-            style={{
-              ...styles.flex_column,
-              ...{
-                overflowY: "scroll",
-                maxHeight: "128px",
-              },
-            }}
-          >
-            <FormControlLabel
-              value="BS Chemistry"
-              control={<Radio />}
-              label="BS Chemistry"
-              style={styles.text_dark}
-            />
-            <FormControlLabel
-              value="BS Food Technology"
-              control={<Radio />}
-              label="BS Food Technology"
-              style={styles.text_dark}
-            />
-            <FormControlLabel
-              value="BS Applied Physics"
-              control={<Radio />}
-              label="BS Applied Physics"
-              style={styles.text_dark}
-            />
-            <FormControlLabel
-              value="BS Environmental Science"
-              control={<Radio />}
-              label="BS Environmental Science"
-              style={styles.text_dark}
-            />
-          </div>
-        </RadioGroup>
-        <TextField
-          id="outlined-helperText"
-          label="Section"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, section: e.target.value });
-            setError("");
-          }}
-          value={user.username}
-          placeholder={"Enter current section"}
-        />
-      </RestrictedComponent>
-      <p
-        style={{
-          ...styles.text_dark_red,
-          ...styles.text_S,
-          flex: 1,
-          textAlign: "center",
-          marginLeft: 15,
-        }}
-      >
-        {error}
-      </p>
-      <button
-        onClick={() => mutation.mutate()}
-        style={{
-          borderRadius: 16,
-          justifyContent: "center",
-          alignItems: "center",
-          background: "#FBB217",
-          height: "40px",
-          width: "20vw",
-        }}
-      >
-        Update
-      </button>
-    </div>
-  );
-}
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { UserAPI, UserUpdateAPI } from "../../Components/API/API";
+import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import {
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+} from "@mui/material";
+export default function UserInfoPage() {
+  const queryClient = useQueryClient();
+  const User = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    username: "",
+    email: "",
+    course: "",
+    section: "",
+  });
+  const [error, setError] = useState("");
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const data = await UserUpdateAPI(user);
+      if (data[0] != true) {
+        setError(JSON.stringify(data[1]));
+        return Promise.reject(new Error(JSON.stringify(data[1])));
+      }
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["user"],
+      });
+      setError("Updated successfully");
+      toast(`User info updated successfuly`, {
+        position: "top-right",
+        autoClose: 2000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+      });
+      if (data && User.data) {
+        setUser({
+          first_name: User.data.first_name,
+          last_name: User.data.last_name,
+          username: User.data.username,
+          email: User.data.email,
+          course: User.data.course,
+          section: User.data.section,
+        });
+      }
+    },
+  });
+  useEffect(() => {
+    if (User.data) {
+      setUser(User.data);
+    }
+  }, [User.data]);
+
+  if (User.isLoading) {
+    return (
+      <div style={styles.background}>
+        <Header label={"Transactions"} />
+        <div
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignItems: "center",
+              justifyContent: "center",
+              paddingTop: "64px",
+            },
+          }}
+        >
+          <CircularProgress style={{ height: "128px", width: "128px" }} />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_L,
+            }}
+          >
+            Loading
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header label={"Dashboard"} />
+      <div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
+        <TextField
+          id="outlined-helperText"
+          label="First Name"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setUser({ ...user, first_name: e.target.value });
+            setError("");
+          }}
+          value={user.first_name}
+          placeholder={"Enter your first name"}
+        />
+        <TextField
+          id="outlined-helperText"
+          label="Last Name"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, last_name: e.target.value })
+          }
+          value={user.last_name}
+          placeholder={"Enter your last name"}
+        />
+        <p>{JSON.stringify(User.data)}</p>
+      </div>
+
+      <RestrictedComponent allow_only={"Student"}>
+        <FormLabel style={styles.text_dark} id="status-selection">
+          Course
+        </FormLabel>
+        <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label"
+          value={user.course}
+          defaultValue="BS Chemistry"
+          name="radio-buttons-group"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setUser({ ...user, course: e.target.value });
+            setError("");
+          }}
+        >
+          <div
+            style={{
+              ...styles.flex_column,
+              ...{
+                overflowY: "scroll",
+                maxHeight: "128px",
+              },
+            }}
+          >
+            <FormControlLabel
+              value="BS Chemistry"
+              control={<Radio />}
+              label="BS Chemistry"
+              style={styles.text_dark}
+            />
+            <FormControlLabel
+              value="BS Food Technology"
+              control={<Radio />}
+              label="BS Food Technology"
+              style={styles.text_dark}
+            />
+            <FormControlLabel
+              value="BS Applied Physics"
+              control={<Radio />}
+              label="BS Applied Physics"
+              style={styles.text_dark}
+            />
+            <FormControlLabel
+              value="BS Environmental Science"
+              control={<Radio />}
+              label="BS Environmental Science"
+              style={styles.text_dark}
+            />
+            <FormControlLabel
+              value="Not Applicable"
+              control={<Radio />}
+              label="Not Applicable"
+              style={styles.text_dark}
+            />
+          </div>
+        </RadioGroup>
+        <TextField
+          id="outlined-helperText"
+          label="Section"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setUser({ ...user, section: e.target.value });
+            setError("");
+          }}
+          value={user.username}
+          placeholder={"Enter current section"}
+        />
+      </RestrictedComponent>
+      <p
+        style={{
+          ...styles.text_dark_red,
+          ...styles.text_S,
+          flex: 1,
+          textAlign: "center",
+          marginLeft: 15,
+        }}
+      >
+        {error}
+      </p>
+      <button
+        onClick={() => mutation.mutate()}
+        style={{
+          borderRadius: 16,
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#FBB217",
+          height: "40px",
+          width: "20vw",
+        }}
+      >
+        Update
+      </button>
+    </div>
+  );
+}