@@ -83,20 +82,4 @@ export default function Day(props) {
);
-
- if (props.showFilters) {
- return (
- <>
-
-
-
-
- );
- }
-
- return
;
}
diff --git a/components/Schedule/Filters/index.tsx b/components/Schedule/Filters/index.tsx
new file mode 100644
index 00000000..91b8a20a
--- /dev/null
+++ b/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 (
+
+
FILTER BY
+
+ {filterList.map((filter, i) => (
+
+ ))}
+
+
+ );
+}
diff --git a/components/Schedule/Table/index.jsx b/components/Schedule/Table/index.jsx
index d10b1824..a514aded 100644
--- a/components/Schedule/Table/index.jsx
+++ b/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);
diff --git a/components/Schedule/index.jsx b/components/Schedule/index.jsx
index 448e6a2a..8befa40f 100644
--- a/components/Schedule/index.jsx
+++ b/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,9 +166,9 @@ export default function Schedule(props) {
nextDay={next_day}
hasFocusedElem={hasFocusedElem}
showFilters={props.detailed}
- filters={filters}
- updateFilters={props.detailed ? updateFilters : () => {}}
/>
+
+
@@ -177,7 +176,6 @@ export default function Schedule(props) {
detailed={props.detailed}
date={date}
hash={hash}
- filters={filters}
updateHasFocused={updateHasFocused}
/>