refactor: change schedule filter to query params

components/Schedule/Day/index.tsx

@@ -1,4 +1,3 @@
-import Filters from "./Filters";
 import styles from "./style.module.css";
 
 function getDayDescriptor(year, month, day) {
@@ -16,7 +15,7 @@ function getDayDescriptor(year, month, day) {
   const today = new Date(
     _today.getFullYear(),
     _today.getMonth(),
-    _today.getDate()
+    _today.getDate(),
   );
 
   const day_difference =
@@ -48,10 +47,10 @@ export default function Day(props) {
   const date_descriptor = getDayDescriptor(
     parseInt(date[0]),
     parseInt(date[1]),
-    parseInt(date[2])
+    parseInt(date[2]),
   );
 
-  const Ans = () => (
+  return (
     <div className="flex w-full justify-center">
       <div className="flex w-full justify-between text-4xl xs:text-5xl sm:text-7xl lg:text-8xl xl:mx-20 xl:text-7xl">
         <div className={`${styles.leftArrow} ${styles.arrowWrapper}`}>
@@ -83,20 +82,4 @@ export default function Day(props) {
       </div>
     </div>
   );
-
-  if (props.showFilters) {
-    return (
-      <>
-        <Ans />
-
-        <Filters
-          key="key"
-          filters={props.filters}
-          updateFilters={props.updateFilters}
-        />
-      </>
-    );
-  }
-
-  return <Ans />;
 }

components/Schedule/Filters/index.tsx

@@ -0,0 +1,70 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export default function Filters() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const filterList = ["Talks", "Pitch", "Workshops", "Breaks"] as const;
+
+  const handleClickFilter = useCallback(
+    (filter: (typeof filterList)[number]) => {
+      const params = new URLSearchParams(searchParams);
+
+      const currentSelectedFilters = params.get("filter");
+
+      const currentSelectedFiltersArray =
+        currentSelectedFilters?.split(",") ?? [];
+
+      const findFilterIndex = currentSelectedFiltersArray.indexOf(filter);
+
+      if (findFilterIndex !== -1) {
+        currentSelectedFiltersArray.splice(findFilterIndex, 1);
+      } else {
+        currentSelectedFiltersArray.push(filter);
+      }
+
+      params.set("filter", currentSelectedFiltersArray.join(","));
+
+      const queryString = params.toString();
+
+      router.push(pathname + "?" + queryString, { scroll: false });
+    },
+    [pathname, router, searchParams],
+  );
+
+  const isFilterSelected = useCallback(
+    (filter: (typeof filterList)[number]) => {
+      const currentSelectedFilters =
+        searchParams.get("filter")?.split(",") ?? [];
+
+      return currentSelectedFilters.indexOf(filter) !== -1;
+    },
+    [searchParams],
+  );
+
+  return (
+    <div className="mt-8 block pl-4 sm:pl-20">
+      <h5 className="font-iregular text-xl text-gray-300">FILTER BY</h5>
+      <div className="grid-col-1 mt-4 grid sm:block lg:w-2/3">
+        {filterList.map((filter, i) => (
+          <button
+            key={i}
+            onClick={() => handleClickFilter(filter)}
+            className={`text-md m-1 items-center rounded-full border px-12 py-2 text-center font-ibold
+                                text-white shadow-sm
+                                ${
+                                  isFilterSelected(filter)
+                                    ? "border-quinary bg-quinary text-primary opacity-100"
+                                    : "opacity-50 hover:border-quinary hover:bg-secondary hover:text-quinary hover:opacity-80"
+                                }
+                                `}
+          >
+            {filter}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Schedule/Table/index.jsx

@@ -1,35 +1,9 @@
+import { useSearchParams } from "next/navigation";
+
 import Block from "./Block";
-import { isSelected } from "../Day/Filters";
 
 import schedule from "/data/schedule.json";
 
-function filterElem(filters) {
-  return function (elem) {
-    if (filters == "") return true;
-
-    let result = elem.activity.author == filters;
-    if (result) return true;
-
-    switch (elem.activity.activityType) {
-      case "Coffee Break":
-        result = isSelected(filters, "Breaks");
-        break;
-      case "Talk":
-        result = isSelected(filters, "Talks");
-        break;
-      case "Pitch":
-        result = isSelected(filters, "Pitch");
-        break;
-      case "Workshop":
-        result = isSelected(filters, "Workshops");
-        break;
-      default:
-        break;
-    }
-    return result;
-  };
-}
-
 /*
  *  Groups the activities into arrays. Two elements will be in the same array if they happen at the same
  *  time
@@ -55,13 +29,9 @@ function group(list) {
   return result;
 }
 
-export default function Table({
-  date,
-  updateHasFocused,
-  hash,
-  filters,
-  detailed,
-}) {
+export default function Table({ date, updateHasFocused, hash, detailed }) {
+  const searchParams = useSearchParams();
+
   const obj = schedule.find((obj) => obj.date == date);
 
   if (obj === undefined || obj.activities === undefined) {
@@ -75,7 +45,34 @@ export default function Table({
       id: id,
       focused: hash == `${date}-${id}`,
     }))
-    .filter(filterElem(filters));
+    .filter(({ activity }) => {
+      const currentSelectedFilters =
+        searchParams.get("filter")?.split(",") ?? [];
+
+      // when query params are: filter = []
+      if (currentSelectedFilters.length === 0) return true;
+
+      // When query params are: filter = [""]
+      if (
+        currentSelectedFilters.length === 1 &&
+        currentSelectedFilters[0] === ""
+      )
+        return true;
+
+      // When query params are for example: filter = ["Pitch"]; or for example: filter = ["", "Pitch"]
+      switch (activity.activityType) {
+        case "Coffee Break":
+          return currentSelectedFilters.includes("Breaks");
+        case "Talk":
+          return currentSelectedFilters.includes("Talks");
+        case "Pitch":
+          return currentSelectedFilters.includes("Pitch");
+        case "Workshop":
+          return currentSelectedFilters.includes("Workshops");
+        default:
+          break;
+      }
+    });
 
   updateHasFocused(filtered.filter((activity) => activity.focused).length != 0);
 

components/Schedule/index.jsx

@@ -1,5 +1,6 @@
 import Table from "./Table";
 import Day from "./Day";
+import Filters from "./Filters";
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
@@ -89,7 +90,6 @@ function addDate(date, days) {
 export default function Schedule(props) {
   const min_date = "2023/2/14";
   const max_date = "2023/2/17";
-  const defaultFilter = props.filters === undefined ? "" : props.filters;
 
   //calculate default date
   const _today = new Date();
@@ -104,7 +104,6 @@ export default function Schedule(props) {
 
   const [date, updateDate] = useState(default_date);
   const [hash, updateHash] = useState("");
-  const [filters, updateFilters] = useState(defaultFilter);
   const [hasFocusedElem, updateHasFocused] = useState(false);
 
   if (props.updateHasFocused !== undefined)
@@ -167,17 +166,16 @@ export default function Schedule(props) {
             nextDay={next_day}
             hasFocusedElem={hasFocusedElem}
             showFilters={props.detailed}
-            filters={filters}
-            updateFilters={props.detailed ? updateFilters : () => {}}
           />
+
+          <Filters />
         </div>
       </div>
       <div className="z-50">
         <Table
           detailed={props.detailed}
           date={date}
           hash={hash}
-          filters={filters}
           updateHasFocused={updateHasFocused}
         />
       </div>