diff --git a/frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx b/frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx index dc4062d0c..6463ee1e4 100644 --- a/frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx +++ b/frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx @@ -1,6 +1,7 @@ import { Icon } from '@iconify/react'; -import { type ReactNode, useState } from 'react'; +import { type ReactNode, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useSearchParams } from 'react-router-dom'; import { Button, IconButton, InputField, Link, TimeDisplay } from '~/Components'; import { eventQuery } from '~/Components/EventQuery/utils'; import { ImageCard } from '~/Components/ImageCard'; @@ -22,7 +23,8 @@ type EventsListProps = { export function EventsList({ events }: EventsListProps) { const { t, i18n } = useTranslation(); const [tableView, setTableView] = useState(false); - const [query, setQuery] = useState(''); + const [searchParam, setSearchParam] = useSearchParams(); + const [query, setQuery] = useState(searchParam.get('q') ?? ''); const isDesktop = useDesktop(); const eventColumns = [ @@ -99,6 +101,18 @@ export function EventsList({ events }: EventsListProps) { }); } + useEffect(() => { + setSearchParam((prev) => { + const next = new URLSearchParams(prev); + if (query) { + next.set('q', query); + } else { + next.delete('q'); + } + return next; + }); + }, [query, setSearchParam]); + function getButton(title: string, icon: string, func: () => void, chosen: boolean) { return (