feat: Open and online

asuc-octo · Jul 1, 2024 · ef79ffb · ef79ffb
1 parent 347fe59
commit ef79ffb
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 16 deletions.
diff --git a/frontend/src/components/Browser/Filters/index.tsx b/frontend/src/components/Browser/Filters/index.tsx
@@ -35,12 +35,16 @@ interface FiltersProps {
   currentQuery: string;
   currentDays: Day[];
   currentSortBy: SortBy;
+  currentOpen: boolean;
+  currentOnline: boolean;
   setCurrentSortBy: (sortBy: SortBy) => void;
   setCurrentQuery: (query: string) => void;
   setCurrentComponents: (components: Component[]) => void;
   setCurrentUnits: (units: Unit[]) => void;
   setCurrentLevels: (levels: Level[]) => void;
   setCurrentDays: (days: Day[]) => void;
+  setCurrentOpen: (open: boolean) => void;
+  setCurrentOnline: (online: boolean) => void;
   persistent?: boolean;
 }
 
@@ -60,12 +64,16 @@ export default function Filters({
   currentYear,
   currentQuery,
   currentSortBy,
+  currentOpen,
+  currentOnline,
   setCurrentSortBy,
   setCurrentQuery,
   setCurrentComponents,
   setCurrentUnits,
   setCurrentLevels,
   setCurrentDays,
+  setCurrentOpen,
+  setCurrentOnline,
   persistent,
 }: FiltersProps) {
   const [expanded, setExpanded] = useState(false);
@@ -80,7 +88,9 @@ export default function Filters({
             currentComponents,
             currentUnits,
             [],
-            currentDays
+            currentDays,
+            currentOpen,
+            currentOnline
           ).includedClasses;
 
     return classes.reduce(
@@ -108,6 +118,8 @@ export default function Filters({
     currentComponents,
     currentLevels,
     currentDays,
+    currentOpen,
+    currentOnline,
   ]);
 
   const filteredComponents = useMemo(() => {
@@ -127,7 +139,9 @@ export default function Filters({
             [],
             currentUnits,
             currentLevels,
-            currentDays
+            currentDays,
+            currentOpen,
+            currentOnline
           ).includedClasses;
 
     for (const _class of classes) {
@@ -144,6 +158,8 @@ export default function Filters({
     currentUnits,
     currentLevels,
     currentDays,
+    currentOpen,
+    currentOnline,
   ]);
 
   const filteredDays = useMemo(() => {
@@ -163,7 +179,9 @@ export default function Filters({
             currentComponents,
             currentUnits,
             currentLevels,
-            []
+            [],
+            currentOpen,
+            currentOnline
           ).includedClasses;
 
     for (const _class of classes) {
@@ -184,6 +202,8 @@ export default function Filters({
     currentUnits,
     currentLevels,
     currentDays,
+    currentOpen,
+    currentOnline,
   ]);
 
   const filteredUnits = useMemo(() => {
@@ -203,7 +223,9 @@ export default function Filters({
             currentComponents,
             [],
             currentLevels,
-            currentDays
+            currentDays,
+            currentOpen,
+            currentOnline
           ).includedClasses;
 
     for (const _class of classes) {
@@ -227,9 +249,38 @@ export default function Filters({
     currentComponents,
     currentLevels,
     currentDays,
+    currentOpen,
+    currentOnline,
   ]);
 
-  const update = <T,>(
+  const amountOpen = useMemo(
+    () => includedClasses.filter((_class) => _class.primarySection.open).length,
+    [includedClasses]
+  );
+
+  const amountOnline = useMemo(
+    () =>
+      includedClasses.filter((_class) => _class.primarySection.online).length,
+    [includedClasses]
+  );
+
+  const updateBoolean = (
+    name: string,
+    setState: (state: boolean) => void,
+    value: boolean
+  ) => {
+    if (persistent) {
+      if (value) searchParams.set(name, "");
+      else searchParams.delete(name);
+      setSearchParams(searchParams);
+
+      return;
+    }
+
+    setState(value);
+  };
+
+  const updateArray = <T,>(
     name: string,
     state: T[],
     setState: (state: T[]) => void,
@@ -297,23 +348,37 @@ export default function Filters({
       <div className={styles.body}>
         <p className={styles.label}>Quick filters</p>
         <div className={styles.filter}>
-          <Checkbox.Root className={styles.checkbox}>
+          <Checkbox.Root
+            className={styles.checkbox}
+            onCheckedChange={(value) =>
+              updateBoolean("open", setCurrentOpen, value as boolean)
+            }
+            id="open"
+          >
             <Checkbox.Indicator asChild>
               <Check width={12} height={12} />
             </Checkbox.Indicator>
           </Checkbox.Root>
-          <label className={styles.text}>
+          <label className={styles.text} htmlFor="open">
             <span className={styles.value}>Open</span>
+            {!currentOpen && ` (${amountOpen.toLocaleString()})`}
           </label>
         </div>
         <div className={styles.filter}>
-          <Checkbox.Root className={styles.checkbox}>
+          <Checkbox.Root
+            id="online"
+            className={styles.checkbox}
+            onCheckedChange={(value) =>
+              updateBoolean("online", setCurrentOnline, value as boolean)
+            }
+          >
             <Checkbox.Indicator asChild>
               <Check width={12} height={12} />
             </Checkbox.Indicator>
           </Checkbox.Root>
-          <label className={styles.text}>
+          <label className={styles.text} htmlFor="online">
             <span className={styles.value}>Online</span>
+            {!currentOnline && ` (${amountOnline.toLocaleString()})`}
           </label>
         </div>
         <div className={styles.filter}>
@@ -357,7 +422,7 @@ export default function Filters({
                 checked={active}
                 id={`level-${level}`}
                 onCheckedChange={(checked) =>
-                  update(
+                  updateArray(
                     "levels",
                     currentLevels,
                     setCurrentLevels,
@@ -388,7 +453,7 @@ export default function Filters({
                 checked={active}
                 id={`units-${unit}`}
                 onCheckedChange={(checked) =>
-                  update(
+                  updateArray(
                     "units",
                     currentUnits,
                     setCurrentUnits,
@@ -423,7 +488,7 @@ export default function Filters({
                   checked={active}
                   id={`component-${component}`}
                   onCheckedChange={(checked) =>
-                    update(
+                    updateArray(
                       "components",
                       currentComponents,
                       setCurrentComponents,
@@ -464,7 +529,7 @@ export default function Filters({
                 checked={active}
                 id={`day-${day}`}
                 onCheckedChange={(checked) =>
-                  update(
+                  updateArray(
                     "days",
                     currentDays,
                     setCurrentDays,

diff --git a/frontend/src/components/Browser/browser.ts b/frontend/src/components/Browser/browser.ts
@@ -50,10 +50,26 @@ export const getFilteredClasses = (
   currentComponents: Component[],
   currentUnits: Unit[],
   currentLevels: Level[],
-  currentDays: Day[]
+  currentDays: Day[],
+  currentOpen: boolean,
+  currentOnline: boolean
 ) => {
   return classes.reduce(
     (acc, _class) => {
+      // Filter by open
+      if (currentOpen && !_class.primarySection.open) {
+        acc.excludedClasses.push(_class);
+
+        return acc;
+      }
+
+      // Filter by online
+      if (currentOnline && !_class.primarySection.online) {
+        acc.excludedClasses.push(_class);
+
+        return acc;
+      }
+
       // Filter by component
       if (currentComponents.length > 0) {
         const { component } = _class.primarySection;

diff --git a/frontend/src/components/Browser/index.tsx b/frontend/src/components/Browser/index.tsx
@@ -50,6 +50,8 @@ export default function Browser({
   const [localLevels, setLocalLevels] = useState<Level[]>([]);
   const [localDays, setLocalDays] = useState<Day[]>([]);
   const [localSortBy, setLocalSortBy] = useState<SortBy>(SortBy.Relevance);
+  const [localOpen, setLocalOpen] = useState<boolean>(false);
+  const [localOnline, setLocalOnline] = useState<boolean>(false);
 
   const block = useMemo(() => width <= 992, [width]);
 
@@ -155,18 +157,40 @@ export default function Browser({
     return localSortBy;
   }, [searchParams, localSortBy, persistent]);
 
+  const currentOpen = useMemo(
+    () => (persistent ? searchParams.has("open") : localOpen),
+    [searchParams, localOpen, persistent]
+  );
+
+  const currentOnline = useMemo(
+    () => (persistent ? searchParams.has("online") : localOnline),
+    [searchParams, localOnline, persistent]
+  );
+
   const { includedClasses, excludedClasses } = useMemo(
     () =>
       getFilteredClasses(
         classes,
         currentComponents,
         currentUnits,
         currentLevels,
-        currentDays
+        currentDays,
+        currentOpen,
+        currentOnline
       ),
-    [classes, currentComponents, currentUnits, currentLevels, currentDays]
+    [
+      classes,
+      currentComponents,
+      currentUnits,
+      currentLevels,
+      currentDays,
+      currentOpen,
+      currentOnline,
+    ]
   );
 
+  console.log(currentOpen);
+
   const index = useMemo(() => initialize(includedClasses), [includedClasses]);
 
   const currentClasses = useMemo(() => {
@@ -243,13 +267,17 @@ export default function Browser({
           currentUnits={currentUnits}
           currentLevels={currentLevels}
           currentDays={currentDays}
+          currentOpen={currentOpen}
+          currentOnline={currentOnline}
           // Update local filters
           setCurrentQuery={setLocalQuery}
           setCurrentUnits={setLocalUnits}
           setCurrentLevels={setLocalLevels}
           setCurrentDays={setLocalDays}
           setCurrentSortBy={setLocalSortBy}
           setCurrentComponents={setLocalComponents}
+          setCurrentOpen={setLocalOpen}
+          setCurrentOnline={setLocalOnline}
         />
       )}
       {(!open || !overlay) && (