Added showAll option for the Search page as a tri-state checkbox (#164)

* Added showAll option for the Search page as a tri-state checkbox * Fixed some styling issues --------- Co-authored-by: xavilien <“[email protected]”>
ScottyLabs · Oct 6, 2024 · cca5d76 · cca5d76
1 parent 4580fed
commit cca5d76
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/apps/frontend/src/app/user.ts b/apps/frontend/src/app/user.ts
@@ -9,6 +9,7 @@ export interface UserState {
   showCourseInfos: boolean;
   showSchedules: boolean;
   loggedIn: boolean;
+  showAll: boolean;
   fceAggregation: {
     numSemesters: number;
     counted: {
@@ -31,6 +32,7 @@ const initialState: UserState = {
   showCourseInfos: true,
   showSchedules: false,
   loggedIn: false,
+  showAll: false,
   fceAggregation: {
     numSemesters: 2,
     counted: {
@@ -69,6 +71,9 @@ export const userSlice = createSlice({
     showSchedules: (state, action: PayloadAction<boolean>) => {
       state.showSchedules = action.payload;
     },
+    showAll : (state, action: PayloadAction<boolean>) => {
+      state.showAll = action.payload;
+    },
     logIn: (state) => {
       state.loggedIn = true;
     },

diff --git a/apps/frontend/src/components/SearchBar.tsx b/apps/frontend/src/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { throttledFilter } from "~/app/store";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid";
@@ -154,6 +154,33 @@ const SearchBar = () => {
   const showCourseInfos = useAppSelector((state) => state.user.showCourseInfos);
   const showSchedules = useAppSelector((state) => state.user.showSchedules);
 
+  const showAll = useAppSelector((state) => state.user.showAll);
+
+  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.showFCEs(e.target.checked));
   };
@@ -166,6 +193,13 @@ const SearchBar = () => {
     dispatch(userSlice.actions.showSchedules(e.target.checked));
   };
 
+  const setShowAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(userSlice.actions.showAll(e.target.checked));
+    if (loggedIn) dispatch(userSlice.actions.showFCEs(e.target.checked));
+    dispatch(userSlice.actions.showCourseInfos(e.target.checked));
+    dispatch(userSlice.actions.showSchedules(e.target.checked));
+  };
+
   const numResults = useAppSelector((state) => state.cache.totalDocs);
 
   return (
@@ -187,6 +221,17 @@ const SearchBar = () => {
         <div className="mt-3 text-sm text-gray-400">{numResults} results</div>
         <div className="mt-3 flex justify-end text-gray-500">
           <div className="mr-6 hidden md:block">Show</div>
+          <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"