Move context states to CombinedProvider

NIAEFEUP · Aug 20, 2024 · 1229435 · 1229435
1 parent 2c22f8f
commit 1229435
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/src/contexts/CombinedProvider.tsx b/src/contexts/CombinedProvider.tsx
@@ -1,14 +1,21 @@
 import { useState } from "react";
-import { MultipleOptions } from "../@types";
+import { CourseInfo, Major, MultipleOptions } from "../@types";
 import StorageAPI from "../api/storage";
 import MultipleOptionsContext from "./MultipleOptionsContext";
 import { ThemeContext } from "./ThemeContext";
 import { useDarkMode } from "../hooks";
+import CourseContext from "./CourseContext";
+import MajorContext from "./MajorContext";
 
 const CombinedProvider = ({ children }) => {
   const [enabled, setEnabled] = useDarkMode()  // TODO (Process-ing): Stop using a hook (who smoked here?)
   const [multipleOptions, setMultipleOptionsState] = useState<MultipleOptions>(StorageAPI.getMultipleOptionsStorage());
   const [selectedOption, setSelectedOptionState] = useState<number>(StorageAPI.getSelectedOptionStorage());
+  const [majors, setMajors] = useState<Major[]>([])
+  const [coursesInfo, setCoursesInfo] = useState([]);
+  const [pickedCourses, setPickedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
+  const [checkboxedCourses, setCheckboxedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
+  const [choosingNewCourse, setChoosingNewCourse] = useState<boolean>(false);
 
 
   const setMultipleOptions = (newMultipleOptions: MultipleOptions | ((prevMultipleOptions: MultipleOptions) => MultipleOptions)) => {
@@ -30,7 +37,18 @@ const CombinedProvider = ({ children }) => {
   return (
     <ThemeContext.Provider value={{ enabled, setEnabled }}>
       <MultipleOptionsContext.Provider value={{ multipleOptions, setMultipleOptions, selectedOption, setSelectedOption }}>
-        {children}
+        <MajorContext.Provider value={{ majors, setMajors }}>
+          <CourseContext.Provider value={
+            {
+              pickedCourses, setPickedCourses,
+              coursesInfo, setCoursesInfo,
+              checkboxedCourses, setCheckboxedCourses,
+              choosingNewCourse, setChoosingNewCourse
+            }
+          }>
+            {children}
+          </CourseContext.Provider>
+        </MajorContext.Provider>
       </MultipleOptionsContext.Provider>
     </ThemeContext.Provider>
   );

diff --git a/src/pages/TimeTableScheduler.tsx b/src/pages/TimeTableScheduler.tsx
@@ -1,50 +1,31 @@
 import BackendAPI from '../api//backend'
-import StorageAPI from '../api/storage'
-import { useState, useEffect } from 'react'
+import { useEffect, useContext } from 'react'
 import { Schedule, Sidebar } from '../components/planner'
-import { CourseInfo, Major } from '../@types'
 import MajorContext from '../contexts/MajorContext'
-import CourseContext from '../contexts/CourseContext'
+import { Major } from '../@types'
 
 const TimeTableSchedulerPage = () => {
-  const [majors, setMajors] = useState<Major[]>([])
-  const [coursesInfo, setCoursesInfo] = useState([]);
-  const [pickedCourses, setPickedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
-  const [checkboxedCourses, setCheckboxedCourses] = useState<CourseInfo[]>(StorageAPI.getPickedCoursesStorage());
-
-  //TODO: Looks suspicious
-  const [choosingNewCourse, setChoosingNewCourse] = useState<boolean>(false);
+  const { setMajors } = useContext(MajorContext);
 
   // // fetch majors when component is ready
   useEffect(() => {
     document.getElementById('layout').scrollIntoView()
     BackendAPI.getMajors().then((majors: Major[]) => {
       setMajors(majors)
     })
-  }, [])
+  }, []);
 
   return (
-    <MajorContext.Provider value={{ majors, setMajors }}>
-      <CourseContext.Provider value={
-        {
-          pickedCourses, setPickedCourses,
-          coursesInfo, setCoursesInfo,
-          checkboxedCourses, setCheckboxedCourses,
-          choosingNewCourse, setChoosingNewCourse
-        }
-      }>
-        <div className="grid w-full grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
-          {/* Schedule Preview */}
-          <div className="lg:min-h-adjusted order-1 col-span-12 min-h-min rounded bg-lightest px-3 py-3 dark:bg-dark lg:col-span-9 2xl:px-5 2xl:py-5">
-            <div className="h-full w-full">
-              <Schedule />
-            </div>
-          </div>
-
-          <Sidebar />
+    <div className="grid w-full grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
+      {/* Schedule Preview */}
+      <div className="lg:min-h-adjusted order-1 col-span-12 min-h-min rounded bg-lightest px-3 py-3 dark:bg-dark lg:col-span-9 2xl:px-5 2xl:py-5">
+        <div className="h-full w-full">
+          <Schedule />
         </div>
-      </CourseContext.Provider>
-    </MajorContext.Provider>
+      </div>
+
+      <Sidebar />
+    </div>
   )
 }