Began implementing a cookie system

MatricalDefunkt · May 9, 2024 · 986c4a8 · 986c4a8
1 parent 5724d32
commit 986c4a8
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "mysql2": "^3.9.0",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-to-print": "^2.15.1",

diff --git a/src/frontend/Components/Buttons/AcademicYear.tsx b/src/frontend/Components/Buttons/AcademicYear.tsx
@@ -7,7 +7,8 @@ import api from "../..";
 export default function AcademicYear() {
     const [data, setData] = React.useState<AcademicYearResponse["academicYears"]>([]);
 
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         api.academicYears.get().then(({ data, error }) => {
@@ -30,7 +31,7 @@ export default function AcademicYear() {
                     label="Academic Year"
                     select
                     fullWidth
-                    defaultValue={""}
+                    defaultValue={selectedValueCookie?.selectedValues.academicYear.value ?? ""}
                 >
                     {data.map((academicYear, i) => (
                         <MenuItem key={academicYear.name} value={academicYear.id}>

diff --git a/src/frontend/Components/Buttons/Batch.tsx b/src/frontend/Components/Buttons/Batch.tsx
@@ -7,7 +7,8 @@ import { TimetableType } from "../../../utils/types";
 
 export default function Batch() {
     const [data, setData] = React.useState<BatchResponse["batches"]>([]);
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         const id = selectedValues.academicYear.value;
@@ -50,6 +51,7 @@ export default function Batch() {
                     fullWidth
                     disabled={!selectedValues.academicYear.selected}
                     value={selectedValues.batch.value || ""}
+                    defaultValue={selectedValueCookie?.selectedValues.batch.value ?? ""}
                 >
                     {data.map((batch, i) => (
                         <MenuItem key={batch.batchName} value={batch.id}>

diff --git a/src/frontend/Components/Buttons/Classroom.tsx b/src/frontend/Components/Buttons/Classroom.tsx
@@ -7,7 +7,8 @@ import { TimetableType } from "../../../utils/types";
 
 export default function Classroom() {
     const [data, setData] = React.useState<ClassroomResponse["classrooms"]>([]);
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         const id = selectedValues.academicYear.value;
@@ -50,6 +51,7 @@ export default function Classroom() {
                     fullWidth
                     disabled={!selectedValues.academicYear.selected}
                     value={selectedValues.classroom.value || ""}
+                    defaultValue={selectedValueCookie?.selectedValues.classroom.value || ""}
                 >
                     {data.map((classroom, i) => (
                         <MenuItem key={classroom.classroomName} value={classroom.id}>

diff --git a/src/frontend/Components/Buttons/Department.tsx b/src/frontend/Components/Buttons/Department.tsx
@@ -7,7 +7,8 @@ import { TimetableType } from "../../../utils/types";
 
 export default function Department() {
     const [data, setData] = React.useState<DepartmentResponse["departments"]>([]);
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         const id = selectedValues.batch.value;
@@ -50,6 +51,7 @@ export default function Department() {
                     fullWidth
                     disabled={!selectedValues.batch.selected}
                     value={selectedValues.department.value || ""}
+                    defaultValue={selectedValueCookie?.selectedValues.department.value || ""}
                 >
                     {data.map((department, i) => (
                         <MenuItem key={department.departmentName} value={department.id}>

diff --git a/src/frontend/Components/Buttons/Division.tsx b/src/frontend/Components/Buttons/Division.tsx
@@ -7,7 +7,8 @@ import { TimetableType } from "../../../utils/types";
 
 export default function Division() {
     const [data, setData] = React.useState<DivisionResponse["divisions"]>([]);
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         const id = selectedValues.department.value;
@@ -50,6 +51,7 @@ export default function Division() {
                     fullWidth
                     disabled={!selectedValues.department.selected}
                     value={selectedValues.division.value || ""}
+                    defaultValue={selectedValueCookie?.selectedValues.division.value || ""}
                 >
                     {data.map((division, i) => (
                         <MenuItem key={division.divisionName} value={division.id}>

diff --git a/src/frontend/Components/Buttons/Teacher.tsx b/src/frontend/Components/Buttons/Teacher.tsx
@@ -7,7 +7,8 @@ import { TimetableType } from "../../../utils/types";
 
 export default function Teacher() {
     const [data, setData] = React.useState<TeacherResponse["teachers"]>([]);
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     useEffect(() => {
         const id = selectedValues.academicYear.value;
@@ -48,6 +49,7 @@ export default function Teacher() {
                     fullWidth
                     disabled={!selectedValues.academicYear.selected}
                     value={selectedValues.teacher.value || ""}
+                    defaultValue={selectedValueCookie?.selectedValues.teacher.value || ""}
                 >
                     {data.map((teacher, i) => (
                         <MenuItem key={teacher.teacherName} value={teacher.id}>

diff --git a/src/frontend/Components/Buttons/TimetableType.tsx b/src/frontend/Components/Buttons/TimetableType.tsx
@@ -4,7 +4,8 @@ import { SelectedValuesContext } from "../../context/SelectedValuesContext";
 import { TimetableType as ETimetableType } from "../../../utils/types";
 
 export default function TimetableType() {
-    const { selectedValues, setSelectedValues } = useContext(SelectedValuesContext);
+    const { selectedValues, setSelectedValues, selectedValueCookie } =
+        useContext(SelectedValuesContext);
 
     const data: { name: string; value: ETimetableType }[] = [
         { name: "Division", value: 0 },
@@ -26,7 +27,7 @@ export default function TimetableType() {
                     label="Timetable Type"
                     select
                     fullWidth
-                    defaultValue={""}
+                    defaultValue={selectedValueCookie?.selectedValues.timetableType.value ?? ""}
                 >
                     {data.map((timetableType, i) => (
                         <MenuItem key={timetableType.name} value={timetableType.value}>

diff --git a/src/frontend/Components/Timetable/OldTimetable.tsx b/src/frontend/Components/Timetable/OldTimetable.tsx
@@ -3,7 +3,7 @@ import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
 import { checkIfSlotDataExists } from "../fetchAndSet";
 import { useReactToPrint } from "react-to-print";
 import { IconButton, Tooltip } from "@mui/material";
-import PrintIcon from '@mui/icons-material/Print';
+import PrintIcon from "@mui/icons-material/Print";
 
 type Timetable = TimetableResponse["timetable"];
 type Slots = Timetable["slots"];
@@ -158,7 +158,15 @@ export default function OldTimetable({
 
             <div className="d-grid d-md-flex justify-content-md-end mb-3">
                 <Tooltip title="Generate PDF">
-                    <IconButton onClick={generatePdf} sx={{ borderRadius: "10px", fontWeight: "bold", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", top: "50px" }}>
+                    <IconButton
+                        onClick={generatePdf}
+                        sx={{
+                            borderRadius: "10px",
+                            fontWeight: "bold",
+                            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                            top: "50px",
+                        }}
+                    >
                         <PrintIcon />
                     </IconButton>
                 </Tooltip>

diff --git a/src/frontend/context/SelectedValuesContext.tsx b/src/frontend/context/SelectedValuesContext.tsx
@@ -1,51 +1,90 @@
 import React, { createContext, useState } from "react";
 import { TimetableType } from "../../utils/types";
+import { useCookies } from "react-cookie";
 
-type SelectedValuesContextType = {
-    selectedValues: {
-        timetableType: { selected: boolean; value: TimetableType };
-        academicYear: { selected: boolean; value: string };
-        batch: { selected: boolean; value: string };
-        department: { selected: boolean; value: string };
-        division: { selected: boolean; value: string };
-        teacher: { selected: boolean; value: string };
-        subject: { selected: boolean; value: string };
-        classroom: { selected: boolean; value: string };
-    };
-    setSelectedValues: React.Dispatch<
-        React.SetStateAction<SelectedValuesContextType["selectedValues"]>
-    >;
+interface CookieSetOptions {
+    path?: string;
+    expires?: Date;
+    maxAge?: number;
+    domain?: string;
+    secure?: boolean;
+    sameSite?: "strict" | "lax" | "none";
+    encode?: (value: string) => string;
+}
+interface SelectedValues {
+    timetableType: { selected: boolean; value: TimetableType };
+    academicYear: { selected: boolean; value: string };
+    batch: { selected: boolean; value: string };
+    department: { selected: boolean; value: string };
+    division: { selected: boolean; value: string };
+    teacher: { selected: boolean; value: string };
+    subject: { selected: boolean; value: string };
+    classroom: { selected: boolean; value: string };
+}
+
+interface SelectedValuesContextType {
+    selectedValues: SelectedValues;
+    setSelectedValues: React.Dispatch<React.SetStateAction<SelectedValues>>;
+    selectedValueCookie: { selectedValues: SelectedValues } | undefined;
+    setSelectedValueCookie: (
+        name: "selectedValues",
+        value: SelectedValues,
+        options?: CookieSetOptions,
+    ) => void;
+}
+
+const defaultSelectedValues: SelectedValues = {
+    timetableType: { selected: false, value: 0 },
+    academicYear: { selected: false, value: "" },
+    batch: { selected: false, value: "" },
+    department: { selected: false, value: "" },
+    division: { selected: false, value: "" },
+    teacher: { selected: false, value: "" },
+    subject: { selected: false, value: "" },
+    classroom: { selected: false, value: "" },
 };
 
 const SelectedValuesContext = createContext<SelectedValuesContextType>({
-    selectedValues: {
-        timetableType: { selected: false, value: 0 },
-        academicYear: { selected: false, value: "" },
-        batch: { selected: false, value: "" },
-        department: { selected: false, value: "" },
-        division: { selected: false, value: "" },
-        teacher: { selected: false, value: "" },
-        subject: { selected: false, value: "" },
-        classroom: { selected: false, value: "" },
-    },
+    selectedValues: defaultSelectedValues,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setSelectedValues: () => {},
+    selectedValueCookie: undefined,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setSelectedValueCookie: () => {},
 });
 
 const SelectedValuesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [selectedValues, setSelectedValues] = useState({
-        timetableType: { selected: false, value: 0 },
-        academicYear: { selected: false, value: "" },
-        batch: { selected: false, value: "" },
-        department: { selected: false, value: "" },
-        division: { selected: false, value: "" },
-        teacher: { selected: false, value: "" },
-        subject: { selected: false, value: "" },
-        classroom: { selected: false, value: "" },
-    });
+    const [selectedValues, setSelectedValues] = useState<SelectedValues>(defaultSelectedValues);
+    const [cookies, setCookie] = useCookies<"selectedValues", { selectedValues: SelectedValues }>([
+        "selectedValues",
+    ]);
+
+    // try {
+    //     const cookieData = cookies.selectedValues;
+    //     if (cookieData) {
+    //         setSelectedValues(cookieData);
+    //     }
+    // } catch (error) {
+    //     console.error("Error loading from cookie:", error);
+    // }
+
+    const setSelectedValueCookie = (
+        name: "selectedValues",
+        value: SelectedValues,
+        options?: CookieSetOptions,
+    ) => {
+        setCookie(name, value, options);
+    };
 
     return (
-        <SelectedValuesContext.Provider value={{ selectedValues, setSelectedValues }}>
+        <SelectedValuesContext.Provider
+            value={{
+                selectedValues,
+                setSelectedValues,
+                selectedValueCookie: cookies,
+                setSelectedValueCookie,
+            }}
+        >
             {children}
         </SelectedValuesContext.Provider>
     );