Merge pull request #37 from YaleComputerSociety/m-cookies

Login Routing / Local Storage

firebase.json

@@ -15,7 +15,7 @@
     "rules": "database.rules.json"
   },
   "hosting": {
-    "public": "frontend",
+    "public": "frontend/build",
     "ignore": [
       "firebase.json",
       "**/.*",
@@ -41,7 +41,7 @@
       "port": 9000
     },
     "hosting": {
-      "port": 5000
+      "port": 3000
     },
     "pubsub": {
       "port": 8085

frontend/src/App.tsx

@@ -1,21 +1,34 @@
 
-import React from "react";
-// import styles from "./App.module.css";
+import { useState } from "react";
+import { Navigate, Route, Routes  } from 'react-router-dom'; 
 
-import { Route, Routes } from 'react-router-dom';
-
-import Courses from './pages/Courses';
+import Login from "./pages/Login";
 import Graduation from './pages/Graduation';
+import Courses from './pages/Courses';
 import Majors from './pages/Majors';
 
+import { CGSC, CPSC, ECON, HIST } from "./commons/mock/MockProgram";
+
 function App() {
+
+  const [auth] = useState(true); 
+
+  const programs = [CGSC, CPSC, ECON, HIST];
+  const strPrograms = JSON.stringify(programs);
+  localStorage.setItem("programList", strPrograms);
+
+
+
   return (
   <div>
-      <Routes>
-        <Route path="/"              element={<Graduation/>}/>      
-        <Route path="/courses"      element={<Courses/>}/>
-        <Route path="/majors"       element={<Majors/>}/>
-      </Routes>
+    <Routes>
+      <Route path="/"             element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/> 
+      <Route path="/login"        element={auth ? <Navigate to="/graduation"/> : <Login/>}/> 
+
+      <Route path="/graduation"   element={auth ? <Graduation/> : <Navigate to="/login"/>}/> 
+      <Route path="/courses"      element={auth ? <Courses/> : <Navigate to="/login"/>}/> 
+      <Route path="/majors"       element={auth ? <Majors/> : <Navigate to="/login"/>}/> 
+    </Routes>
   </div>
   );
 }

frontend/src/Router.tsx

@@ -7,7 +7,7 @@ import Graduation from "./pages/Graduation";
 
 const router = createBrowserRouter([
   {
-    path: "",
+    path: "/graduation",
     element: <Graduation />,
   },
   {

frontend/src/commons/mock/MockStudent.ts

@@ -3,8 +3,20 @@ import { Course, StudentCourse } from "./../types/TypeCourse";
 import { Student } from "./../types/TypeStudent";
 
 
-const DRST001: Course = { code: "DRST 001", title: "Directed Studies: Literature", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["Hu", "WR"] };
-const StudentDRST001: StudentCourse = { course: DRST001, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
+const ENGL253: Course = { code: "ENGL 253", title: "Reading Ulysses: Modernist Classic and Postcolonial Epic", seasons: ["FALL"], evaluation: { rating: 0, workload: 0, professor: 5 }, distribution: ["Hu"] };
+const StudentENGL253: StudentCourse = { course: ENGL253, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
+
+const ENGL419: Course = { code: "ENGL 419", title: "Writing about Contemporary Figurative Art", seasons: ["FALL"], evaluation: { rating: 4.8, workload: 4.5, professor: 5 }, distribution: ["WR", "Hu"] };
+const StudentENGL419: StudentCourse = { course: ENGL419, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
+
+const GMAN233: Course = { code: "GMAN 233", title: "Karl Marx's Capital", seasons: ["FALL"], evaluation: { rating: 0, workload: 0, professor: 5 }, distribution: ["Hu"] };
+const StudentGMAN233: StudentCourse = { course: GMAN233, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
+
+const SDS238: Course = { code: "S&DS 238", title: "Probability and Bayesian Statistics", seasons: ["FALL"], evaluation: { rating: 3.8, workload: 4.0, professor: 5 }, distribution: ["QR"] };
+const StudentSDS238: StudentCourse = { course: SDS238, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
+
+const PLSC204: Course = { code: "PLSC 204", title: "Election Fundamentals and Forecasting", seasons: ["FALL"], evaluation: { rating: 0, workload: 0, professor: 5 }, distribution: ["So"] };
+const StudentPLSC204: StudentCourse = { course: PLSC204, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023" };
 
 const DRST003: Course = { code: "DRST 003", title: "Directed Studies: Philosophy", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["Hu", "WR"] };
 const StudentDRST003: StudentCourse = { course: DRST003, enrollmentStatus: "COMPLETED", season: "SPRING", year: "2022-2023" };
@@ -16,7 +28,7 @@ export const MockStudent: Student = {
             grade: "First-Year",
             calendarYear: "2022-2023",
             fall: {
-                courses: [StudentDRST001, StudentDRST001, StudentDRST001, StudentDRST001]
+                courses: [StudentENGL419]
             },
             spring: {
                 courses: [StudentDRST003, StudentDRST003, StudentDRST003, StudentDRST003, StudentDRST003]
@@ -26,7 +38,7 @@ export const MockStudent: Student = {
             grade: "Sophomore",
             calendarYear: "2023-2024",
             fall: {
-                courses: [StudentDRST001, StudentDRST001, StudentDRST001, StudentDRST001, StudentDRST001] 
+                courses: [StudentENGL419] 
             },
             spring: {
                 courses: [StudentDRST003, StudentDRST003, StudentDRST003, StudentDRST003] 
@@ -37,7 +49,7 @@ export const MockStudent: Student = {
             grade: "Junior",
             calendarYear: "2024-2025",
             fall: {
-                courses: [StudentDRST001, StudentDRST001, StudentDRST001, StudentDRST001, StudentDRST001] 
+                courses: [StudentENGL253, StudentENGL419, StudentGMAN233, StudentSDS238, StudentPLSC204] 
             },
             spring: {
                 courses: [StudentDRST003, StudentDRST003, StudentDRST003, StudentDRST003, StudentDRST003] 
@@ -47,7 +59,7 @@ export const MockStudent: Student = {
             grade: "Senior",
             calendarYear: "2025-2026",
             fall: {
-                courses: [StudentDRST001, StudentDRST001, StudentDRST001] 
+                courses: [StudentENGL419] 
             },
             spring: {
                 courses: [StudentDRST003, StudentDRST003] 

frontend/src/navbar/PageLinks.tsx

@@ -0,0 +1,23 @@
+
+import React from "react";
+import styles from "./NavBar.module.css";
+
+import { NavLink } from "react-router-dom";
+
+function PageLinks() {
+  return (
+    <div style={{ display: "flex", flexDirection: "row", marginRight: "20px" }}>
+    <NavLink to="/graduation" className={({ isActive }) => isActive ? styles.activeLink : styles.dormantLink }>
+      Graduation
+    </NavLink>
+    <NavLink to="/courses" className={({ isActive }) => isActive ? styles.activeLink : styles.dormantLink }>
+      Courses
+    </NavLink>
+    <NavLink to="/majors" className={({ isActive }) => isActive ? styles.activeLink : styles.dormantLink }>
+      Majors
+    </NavLink>
+  </div>
+  );
+}
+
+export default PageLinks;

frontend/src/pages/Courses/Courses.tsx

@@ -7,9 +7,9 @@ import AddCourseMenu from "./components/add_course/AddCourse";
 
 import { MockStudent } from "./../../commons/mock/MockStudent";
 
-import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import nav_styles from "./../../navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
-import { NavLink } from "react-router-dom";
+import PageLinks from "../../navbar/PageLinks";
 
 function NavBar() {
   return (
@@ -18,18 +18,7 @@ function NavBar() {
         <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
       </div>
 
-      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Graduation
-        </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Courses
-        </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Majors
-        </NavLink>
-        {/* <MeDropdown /> */}
-      </div>
+      <PageLinks/>
     </div>
   );
 }
@@ -95,7 +84,7 @@ function Courses() {
   return(
     <div>
       <NavBar/>
-
+      <Settings displaySetting={displaySetting} updateDisplaySetting={updateDisplaySetting}/>
       <div className={styles.CoursesPage}>
         <button className={styles.AddCourseButton} onClick={toggleAddCourse}>
           +
@@ -111,6 +100,4 @@ function Courses() {
   );
 }
 
-// {/* <Settings displaySetting={displaySetting} updateDisplaySetting={updateDisplaySetting}/> */}
-
 export default Courses;

frontend/src/pages/Graduation/Graduation.tsx

@@ -7,9 +7,9 @@ import GraduationOverview from "./components/Overview";
 
 import { CPSC } from "./../../commons/mock/MockProgram"
 
-import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import nav_styles from "./../../navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
-import { NavLink } from "react-router-dom";
+import PageLinks from "../../navbar/PageLinks";
 
 function NavBar() {
   return (
@@ -18,19 +18,8 @@ function NavBar() {
       <div style={{ marginLeft: "20px" }}>
         <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
       </div>
-
-      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Graduation
-        </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Courses
-        </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Majors
-        </NavLink>
-        {/* <MeDropdown /> */}
-      </div>
+      <PageLinks/>
+      {/* <MeDropdown /> */}
     </div>
   );
 }

frontend/src/pages/Graduation/components/DistributionTable.tsx

@@ -5,7 +5,7 @@ import styles from "./../Graduation.module.css";
 
 import DistributionBox from "../../../commons/components/courses/DistributionBoxLarge";
 import CourseBoxSmall from "../../../commons/components/courses/CourseBoxSmall";
-import InfoButton from "../../../commons/components/InfoButton";
+import InfoButton from "../../../navbar/InfoButton";
 
 import { StudentCourse, ClassLists } from "../../../commons/types/TypeCourse";
 import { MockStudentCourses } from "../../../commons/mock/MockCourses";

frontend/src/pages/Login/Login.tsx

@@ -0,0 +1,27 @@
+
+import React, { useState } from "react";
+import navStyles from "./../../navbar/NavBar.module.css";
+import logo from "./../../commons/images/ma_logo.png";
+
+function NavBar() {
+  return(
+    <div className={navStyles.NavBar}>
+      <div style={{ marginLeft: "20px" }}>
+        <img src={logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+      </div>
+    </div>
+  );
+}
+
+
+function Login(){
+  return(
+    <div>
+      <NavBar/>
+
+    </div>
+  )
+}
+
+export default Login;
+

frontend/src/pages/Login/index.tsx

@@ -0,0 +1,2 @@
+import Login from "./Login";
+export default Login;

frontend/src/pages/Majors/Majors.tsx

@@ -5,68 +5,73 @@ import styles from "./Majors.module.css";
 import ProgramRequirementsBox from "./components/ProgramRequirementsBox";
 import ProgramMetadataBox from "./components/ProgramMetadataBox";
 
-import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
+import nav_styles from "./../../navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
-import { NavLink } from "react-router-dom";
 
-import { CGSC, CPSC, ECON, HIST } from "./../../commons/mock/MockProgram";
-const programs = [CGSC, CPSC, ECON, HIST];
+import PageLinks from '../../navbar/PageLinks';
+
+import { Program } from "./../../commons/types/TypeProgram"
 
 function NavBar() {
   return (
     <div className={nav_styles.NavBar}>
       <div style={{ marginLeft: "20px" }}>
         <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
       </div>
-
-      <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Graduation
-        </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Courses
-        </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
-          Majors
-        </NavLink>
-        {/* <MeDropdown /> */}
-      </div>
+      <PageLinks/>
     </div>
   );
 }
 
-export const Majors = () => {
 
-  // Which Program
+function Majors() {
   const [currdex, setCurrdex] = useState(0);
-  const alterCurrdex = (dir: number) => { 
-    setCurrdex((currdex + dir + programs.length) % programs.length);
-    setCurrDegree(0); 
+  const [currDegree, setCurrDegree] = useState(0);
+
+  const storedPrograms = localStorage.getItem("programList");
+  let programs: Program[] | null = null;
+
+  if (storedPrograms) {
+    programs = JSON.parse(storedPrograms) as Program[];
+  }
+
+  const alterCurrdex = (dir: number) => {
+    if (programs && programs.length > 0) {
+      setCurrdex((currdex + dir + programs.length) % programs.length);
+      setCurrDegree(0);
+    }
   };
-  const seeProgram = (dir: number) => { 
-    return programs[(currdex + dir + programs.length) % programs.length]; 
+
+  const seeProgram = (dir: number) => {
+    if (programs && programs.length > 0) {
+      return programs[(currdex + dir + programs.length) % programs.length];
+    }
+    return null; 
   };
 
-  // Which Degree
-  const [currDegree, setCurrDegree] = useState(0);
-  const alterCurrDegree = (num: number) => { 
-    setCurrDegree(num); 
+  const alterCurrDegree = (num: number) => {
+    setCurrDegree(num);
   };
-
-  return(
+
+  if (!programs || programs.length === 0) {
+    return <div></div>;
+  }
+
+  return (
     <div>
       <NavBar/>
       <div className={styles.MajorsPage}>
-        <ProgramMetadataBox 
+        <ProgramMetadataBox
           program={programs[currdex]} 
-          scrollProgram={alterCurrdex} 
+          scrollProgram={alterCurrdex}
           seeProgram={seeProgram}
           whichDegree={currDegree}
-          alterCurrDegree={alterCurrDegree}/>
-        <ProgramRequirementsBox degree={programs[currdex].degrees[currDegree]}/>
+          alterCurrDegree={alterCurrDegree}
+        />
+        <ProgramRequirementsBox degree={programs[currdex].degrees[currDegree]} />
       </div>
     </div>
   );
-};
+}
 
 export default Majors;

frontend/src/pages/Majors/components/ProgramRequirementsBox.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import styles from "./../Majors.module.css";
 
-import InfoButton from "../../../commons/components/InfoButton";
+import InfoButton from "../../../navbar/InfoButton";
 
 import { Degree } from "../../../commons/types/TypeProgram"; 
 import CourseBoxSmall from "../../../commons/components/courses/CourseBoxSmall";