Merge pull request #44 from hotungkhanh/kan-91/skip-button

Kan 91/skip button

frontend/src/components/SkipButton.tsx

@@ -0,0 +1,35 @@
+import Button from "@mui/material/Button";
+import { useNavigate } from "react-router-dom";
+
+export default function SkipButton() {
+  const navigate = useNavigate();
+  if (sessionStorage.getItem("campusSolutions") === undefined) {
+    return (
+      <Button
+        disabled
+        variant="contained"
+        sx={{
+          Color: "grey",
+        }}
+      >
+        Modify Timetable
+      </Button>
+    );
+  } else {
+    return (
+      <Button
+        onClick={() => navigate("/timetablemod")}
+        variant="contained"
+        sx={{
+          backgroundColor: "#f05a22",
+          "&:hover": {
+            backgroundColor: "#f05a22", 
+          },
+          marginTop: "20px"
+        }}
+      >
+        Modify Timetable
+      </Button>
+    );
+  }
+}

frontend/src/pages/Enrolment.tsx

@@ -4,6 +4,10 @@ import UploadPopUp from "../components/UploadPopUp.tsx";
 import Header from "../components/Header.tsx";
 import Footer from "../components/Footer.tsx";
 import Photo from "../assets/frontpage.jpg";
+import { useEffect } from "react";
+import { LOCAL_API_URL, TimetableSolution } from "../scripts/api.ts";
+import { useAuthContext } from "../security/AuthContext.tsx";
+import SkipButton from "../components/SkipButton.tsx";
 
 /**
  * Renders the Starter Page component with specific time and tabler styles.
@@ -20,6 +24,26 @@ export default function StarterPage() {
   const tablerStyle = {
     color: "black",
   };
+  const { authHeader } = useAuthContext();
+  useEffect(() => {
+    fetch(LOCAL_API_URL + "/timetabling/view", {
+      headers: { Authorization: authHeader },
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        const timetableSolutions: TimetableSolution[] =
+          data as TimetableSolution[];
+        sessionStorage.setItem(
+          "campusSolutions",
+          JSON.stringify(timetableSolutions)
+        );
+      });
+  }, []);
   return (
     <Box className="app-container">
       <Header />
@@ -31,6 +55,7 @@ export default function StarterPage() {
           <p style={{ color: "#f05a22", fontSize: 20 }}>A timetabling website for the Victorian Institute of Technology</p>
           <p>   -Team JetEdge</p>
           <UploadPopUp></UploadPopUp>
+          <SkipButton/>
         </Box>
         <Box className="imageBox">
           <img src={Photo} alt="logo.exe" width="900" height="auto"/>