From 5510bdee5e34936acc6fcd84464faa02a2ee0ea6 Mon Sep 17 00:00:00 2001 From: Matej Stieranka Date: Sat, 28 Jun 2025 21:29:56 +0200 Subject: [PATCH] feat: Show elapsed toggle in Favorites --- package.json | 1 + pnpm-lock.yaml | 31 ++++++++++++++++++++++- src/app/favorites/page.tsx | 34 +++++++++++++++++++------ src/components/ShowElapsedSwitch.tsx | 37 ++++++++++++++++++++++++++++ src/components/ui/switch.tsx | 31 +++++++++++++++++++++++ 5 files changed, 126 insertions(+), 8 deletions(-) create mode 100644 src/components/ShowElapsedSwitch.tsx create mode 100644 src/components/ui/switch.tsx diff --git a/package.json b/package.json index a67bd3b..bf1d4a5 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-select": "^2.2.5", "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-tooltip": "^1.2.7", "cheerio": "^1.1.0", "class-variance-authority": "^0.7.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bdf5ecf..21b8d3e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.2.3 version: 1.2.3(@types/react@19.1.8)(react@19.1.0) + '@radix-ui/react-switch': + specifier: ^1.2.5 + version: 1.2.5(@types/react-dom@19.1.6)(@types/react@19.1.8)(react-dom@19.1.0)(react@19.1.0) '@radix-ui/react-tooltip': specifier: ^1.2.7 version: 1.2.7(@types/react-dom@19.1.6)(@types/react@19.1.8)(react-dom@19.1.0)(react@19.1.0) @@ -1532,6 +1535,32 @@ packages: react: 19.1.0 dev: false + /@radix-ui/react-switch@1.2.5(@types/react-dom@19.1.6)(@types/react@19.1.8)(react-dom@19.1.0)(react@19.1.0): + resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.2 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0) + '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6)(@types/react@19.1.8)(react-dom@19.1.0)(react@19.1.0) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0) + '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.8)(react@19.1.0) + '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.8)(react@19.1.0) + '@types/react': 19.1.8 + '@types/react-dom': 19.1.6(@types/react@19.1.8) + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + dev: false + /@radix-ui/react-tooltip@1.2.7(@types/react-dom@19.1.6)(@types/react@19.1.8)(react-dom@19.1.0)(react@19.1.0): resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==} peerDependencies: @@ -1635,7 +1664,7 @@ packages: /@radix-ui/react-use-previous@1.1.1(@types/react@19.1.8)(react@19.1.0): resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==} peerDependencies: - '@types/react': '*' + '@types/react': 19.1.2 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc peerDependenciesMeta: '@types/react': diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 6603fb8..af65af1 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -1,18 +1,38 @@ import { EventList } from "@/components/EventList"; +import { ShowElapsedSwitch } from "@/components/ShowElapsedSwitch"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Switch } from "@/components/ui/switch"; import { getEventsByIds } from "@/db"; import { cookies } from "next/headers"; -export default async function FavoritesPage() { - const cookieStore = await cookies(); - const favoritesCookie = cookieStore.get("favorites")?.value || "[]"; - const favoritesArray: number[] = JSON.parse(favoritesCookie); - const favorites = await getEventsByIds(favoritesArray); +interface FavoritesPageProps { + searchParams: Promise<{ showElapsed?: string }>; +} + +export default async function FavoritesPage({ + searchParams, +}: FavoritesPageProps) { + const showElapsed = (await searchParams).showElapsed === "true"; + + const cookieStore = await cookies(); + const favoritesCookie = cookieStore.get("favorites")?.value || "[]"; + const favoritesArray: number[] = JSON.parse(favoritesCookie); + const favorites = await getEventsByIds(favoritesArray); + const filteredFavorites = favorites.filter((event) => { + if (showElapsed) return true; + const now = new Date(); + return event.startTime > now || event.endTime > now; + }); return (
-

Oblíbené

+
+

Oblíbené

+ +
- +
); diff --git a/src/components/ShowElapsedSwitch.tsx b/src/components/ShowElapsedSwitch.tsx new file mode 100644 index 0000000..987ce55 --- /dev/null +++ b/src/components/ShowElapsedSwitch.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { useRouter, useSearchParams } from "next/navigation"; +import { Label } from "./ui/label"; +import { Switch } from "./ui/switch"; +import { useMemo } from "react"; + +export const ShowElapsedSwitch = ({ + defaultValue = false, +}: { + defaultValue?: boolean; +}) => { + const searchParams = useSearchParams(); + const router = useRouter(); + const showElapsed = useMemo(() => { + if (searchParams.get("showElapsed") === "true") { + return true; + } + if (searchParams.get("showElapsed") === "false") { + return false; + } + return defaultValue; + }, [searchParams, defaultValue]); + + function setShowElapsed(showElapsed: boolean) { + const params = new URLSearchParams(searchParams.toString()); + params.set("showElapsed", showElapsed ? "true" : "false"); + router.push(`?${params.toString()}`); + } + + return ( +
+ setShowElapsed(!showElapsed)} /> + +
+ ); +}; diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..6a2b524 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SwitchPrimitive from "@radix-ui/react-switch" + +import { cn } from "@/lib/utils" + +function Switch({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +export { Switch }