Collapse View for Saved and Schedules

apps/frontend/src/app/user.ts

@@ -10,6 +10,10 @@ export interface UserState {
   showSchedules: boolean;
   loggedIn: boolean;
   showAll: boolean;
+  savedShowFCEs: boolean;
+  savedShowCourseInfos: boolean;
+  savedShowSchedules: boolean;
+  savedShowAll: boolean;
   fceAggregation: {
     numSemesters: number;
     counted: {
@@ -35,6 +39,10 @@ const initialState: UserState = {
   showSchedules: false,
   loggedIn: false,
   showAll: false,
+  savedShowFCEs: false,
+  savedShowCourseInfos: false,
+  savedShowSchedules: false,
+  savedShowAll: false,
   fceAggregation: {
     numSemesters: 2,
     counted: {
@@ -78,6 +86,18 @@ export const userSlice = createSlice({
     showAll : (state, action: PayloadAction<boolean>) => {
       state.showAll = action.payload;
     },
+    savedShowFCEs: (state, action: PayloadAction<boolean>) => {
+      state.savedShowFCEs = action.payload;
+    },
+    savedShowCourseInfos: (state, action: PayloadAction<boolean>) => {
+      state.savedShowCourseInfos = action.payload;
+    },
+    savedShowSchedules: (state, action: PayloadAction<boolean>) => {
+      state.savedShowSchedules = action.payload;
+    },
+    savedShowAll : (state, action: PayloadAction<boolean>) => {
+      state.savedShowAll = action.payload;
+    },
     logIn: (state) => {
       state.loggedIn = true;
     },

apps/frontend/src/components/CourseList.tsx

@@ -25,6 +25,10 @@ const CourseList = ({ courseIDs, children }: Props) => {
 
   const results = useAppSelector(selectCourseResults(courseIDs));
 
+  const showFCEs = useAppSelector((state) => state.user.savedShowFCEs);
+  const showCourseInfos = useAppSelector((state) => state.user.savedShowCourseInfos);
+  const showSchedules = useAppSelector((state) => state.user.savedShowSchedules);
+
   return (
     <div className="py-6 px-2 md:px-6">
       {results.length > 0 ? (
@@ -39,9 +43,9 @@ const CourseList = ({ courseIDs, children }: Props) => {
               <CourseCard
                 info={course}
                 key={course.courseID}
-                showFCEs={true}
-                showCourseInfo={true}
-                showSchedules={true}
+                showFCEs={showFCEs}
+                showCourseInfo={showCourseInfos}
+                showSchedules={showSchedules}
               />
             ))}
           </div>

apps/frontend/src/components/ShowFilter.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { useAppDispatch, useAppSelector } from "~/app/hooks";
+import { throttledFilter } from "~/app/store";
+import { userSlice } from "~/app/user";
+import { cacheSlice } from "~/app/cache";
+import { filtersSlice } from "~/app/filters";
+import { getCourseIDs } from "~/app/utils";
+
+const ShowFilter = () => {
+    const dispatch = useAppDispatch();
+    const search = useAppSelector((state) => state.filters.search);
+
+    const dispatchSearch = useCallback(
+      (search: string) => {
+        const exactCourses = getCourseIDs(search);
+        if (exactCourses)
+          dispatch(cacheSlice.actions.setExactResultsCourses(exactCourses));
+        else dispatch(cacheSlice.actions.setExactResultsCourses([]));
+        throttledFilter();
+      },
+      [dispatch]
+    );
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(filtersSlice.actions.updateSearch(e.target.value));
+    };
+
+    useEffect(() => {
+      dispatchSearch(search);
+    }, [dispatchSearch, search]);
+
+    const loggedIn = useAppSelector((state) => state.user.loggedIn);
+    const showFCEs = useAppSelector((state) => state.user.savedShowFCEs);
+    const showCourseInfos = useAppSelector((state) => state.user.savedShowCourseInfos);
+    const showSchedules = useAppSelector((state) => state.user.savedShowSchedules);
+
+    const showAll = useAppSelector((state) => state.user.savedShowAll);
+
+    const showAllRef = useRef<any>(null);
+    useEffect(() => {
+      if (showAllRef.current) {
+        if (loggedIn) {
+          if (showFCEs && showCourseInfos && showSchedules) {
+            showAllRef.current.indeterminate = false;
+            showAllRef.current.checked = true;
+          } else if (!(showFCEs || showCourseInfos || showSchedules)) {
+            showAllRef.current.indeterminate = false;
+            showAllRef.current.checked = false;
+          } else
+            showAllRef.current.indeterminate = true;
+        } else {
+          if (showCourseInfos && showSchedules) {
+            showAllRef.current.indeterminate = false;
+            showAllRef.current.checked = true;
+          } else if (!(showCourseInfos || showSchedules)) {
+            showAllRef.current.indeterminate = false;
+            showAllRef.current.checked = false;
+          } else
+            showAllRef.current.indeterminate = true;
+        }
+      }
+    }, [showAllRef, showAllRef.current, showFCEs, showCourseInfos, showSchedules]);
+
+    const setShowFCEs = (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(userSlice.actions.savedShowFCEs(e.target.checked));
+    };
+
+    const setShowCourseInfos = (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(userSlice.actions.savedShowCourseInfos(e.target.checked));
+    };
+
+    const setShowSchedules = (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(userSlice.actions.savedShowSchedules(e.target.checked));
+    };
+
+    const setShowAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(userSlice.actions.savedShowAll(e.target.checked));
+      if (loggedIn) dispatch(userSlice.actions.savedShowFCEs(e.target.checked));
+      dispatch(userSlice.actions.savedShowCourseInfos(e.target.checked));
+      dispatch(userSlice.actions.savedShowSchedules(e.target.checked));
+    };
+
+    return (
+    <div>
+      <div className="mb-3 text-lg">Show</div>
+      <div className="space-y-4 text-sm">
+      <div className="mt-3 flex justify-end text-gray-500">
+          <div className="mr-6">
+            <input
+              id="selectAll"
+              type="checkbox"
+              className="mr-2"
+              onChange={setShowAll}
+              checked={showAll}
+              ref = {showAllRef}
+            />
+            <span>All</span>
+          </div>
+          <div className="mr-6">
+            <input
+              type="checkbox"
+              className="mr-2"
+              disabled={!loggedIn}
+              onChange={setShowFCEs}
+              checked={showFCEs}
+            />
+            <span>FCEs</span>
+          </div>
+          <div className="mr-6">
+            <input
+              type="checkbox"
+              className="mr-2"
+              onChange={setShowCourseInfos}
+              checked={showCourseInfos}
+            />
+            <span>Course Info</span>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              className="mr-2"
+              onChange={setShowSchedules}
+              checked={showSchedules}
+            />
+            <span>Schedules</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShowFilter;

apps/frontend/src/pages/saved.tsx

@@ -2,6 +2,7 @@ import type { NextPage } from "next";
 import React from "react";
 import CourseList from "~/components/CourseList";
 import Aggregate from "~/components/Aggregate";
+import ShowFilter from "~/components/ShowFilter"
 import { useAppSelector } from "~/app/hooks";
 import { Page } from "~/components/Page";
 
@@ -11,7 +12,12 @@ const SavedPage: NextPage = () => {
   return (
     <Page
       activePage="saved"
-      sidebar={<Aggregate />}
+      sidebar={
+        <>
+          <Aggregate />
+          <ShowFilter />
+        </>
+      }
       content={
         <CourseList courseIDs={saved}>
           <div className="mt-6 text-center text-gray-400">

apps/frontend/src/pages/schedules.tsx

@@ -9,6 +9,7 @@ import ScheduleData from "~/components/ScheduleData";
 import { selectCoursesInActiveSchedule } from "~/app/userSchedules";
 import { Page } from "~/components/Page";
 import Loading from "~/components/Loading";
+import ShowFilter from "~/components/ShowFilter";
 
 const SchedulePage: NextPage = () => {
   const scheduled = useAppSelector(selectCoursesInActiveSchedule);
@@ -39,6 +40,7 @@ const SchedulePage: NextPage = () => {
         <>
           <ScheduleSelector />
           <Aggregate />
+          <ShowFilter />
         </>
       }
     />