From e2bd0c20c530a625d2d93a76fdf409d96612d1bf Mon Sep 17 00:00:00 2001 From: NlightN22 Date: Sat, 30 Nov 2024 16:45:37 +0700 Subject: [PATCH] fix search params at events page --- src/pages/EventsPage.tsx | 28 ++++++++++++++++++-- src/shared/stores/events.store.ts | 43 +++++++++++++++++++------------ src/widgets/CameraCard.tsx | 7 +++-- 3 files changed, 55 insertions(+), 23 deletions(-) diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx index a0b3a48..cd2d313 100644 --- a/src/pages/EventsPage.tsx +++ b/src/pages/EventsPage.tsx @@ -1,17 +1,29 @@ import { Flex, Text } from '@mantine/core'; import { notifications } from '@mantine/notifications'; +import { IconAlertCircle } from '@tabler/icons-react'; import { t } from 'i18next'; import { observer } from 'mobx-react-lite'; -import { useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useMemo } from 'react'; import { Context } from '..'; import { isStartBiggerThanEndTime } from '../shared/utils/dateUtil'; import EventsBody from '../widgets/EventsBody'; import EventsRightFilters from '../widgets/sidebars/EventsRightFilters'; import { SideBarContext } from '../widgets/sidebars/SideBarContext'; -import { IconAlertCircle } from '@tabler/icons-react'; +import { useLocation, useSearchParams } from 'react-router-dom'; + +export const eventsQueryParams = { + hostId: 'hostId', + cameraId: 'cameraId', + startDate: 'startDate', + endDate: 'endDate', + startTime: 'startTime', + endTime: 'endTime', +} const EventsPage = () => { + const [searchParams] = useSearchParams() + const { setRightChildren } = useContext(SideBarContext) useEffect(() => { @@ -20,8 +32,20 @@ const EventsPage = () => { }, []) const { eventsStore } = useContext(Context) + + const { hostId, cameraId, period, startTime, endTime } = eventsStore.filters + useEffect(() => { + const paramHostId = searchParams.get(eventsQueryParams.hostId) || undefined + const paramCameraId = searchParams.get(eventsQueryParams.cameraId) || undefined + const paramStartDate = searchParams.get(eventsQueryParams.startDate) || undefined + const paramEndDate = searchParams.get(eventsQueryParams.endDate) || undefined + const paramStartTime = searchParams.get(eventsQueryParams.startTime) || undefined + const paramEndTime = searchParams.get(eventsQueryParams.endTime) || undefined + eventsStore.loadFiltersFromPage(paramHostId, paramCameraId, paramStartDate, paramEndDate, paramStartTime, paramEndTime) + }, [searchParams]) + useEffect(() => { if (startTime && endTime) { if (isStartBiggerThanEndTime(startTime, endTime)) { diff --git a/src/shared/stores/events.store.ts b/src/shared/stores/events.store.ts index 7584a6f..35f4515 100644 --- a/src/shared/stores/events.store.ts +++ b/src/shared/stores/events.store.ts @@ -1,4 +1,6 @@ import { makeAutoObservable } from "mobx"; +import { eventsQueryParams } from "../../pages/EventsPage"; +import { NavigateOptions } from "react-router-dom"; interface Filters { hostId?: string @@ -8,21 +10,12 @@ interface Filters { endTime?: string } -export const eventsQueryParams = { - hostId: 'hostId', - cameraId: 'cameraId', - startDate: 'startDate', - endDate: 'endDate', - startTime: 'startTime', - endTime: 'endTime', - } - export class EventsStore { filters: Filters = {} constructor() { makeAutoObservable(this); - this.loadFiltersFromURL(); + // this.loadFiltersFromURL(); } loadFiltersFromURL() { @@ -38,32 +31,48 @@ export class EventsStore { this.filters.endTime = params.get(eventsQueryParams.endTime) || undefined } - setHostId(hostId: string, navigate: (path: string) => void) { + loadFiltersFromPage( + paramHostId: string | undefined, + paramCameraId: string | undefined, + paramStartDate: string | undefined, + paramEndDate: string | undefined, + paramStartTime: string | undefined, + paramEndTime: string | undefined) { + this.filters.hostId = paramHostId + this.filters.cameraId = paramCameraId + if (paramStartDate && paramEndDate) { + this.filters.period = [new Date(paramStartDate), new Date(paramEndDate)] + } + this.filters.startTime = paramStartTime + this.filters.endTime = paramEndTime + } + + setHostId(hostId: string, navigate: (path: string, options?: NavigateOptions) => void) { this.filters.hostId = hostId; this.updateURL(navigate) } - setCameraId(cameraId: string, navigate: (path: string) => void) { + setCameraId(cameraId: string, navigate: (path: string, options?: NavigateOptions) => void) { this.filters.cameraId = cameraId; this.updateURL(navigate) } - setPeriod(period: [Date | null, Date | null], navigate: (path: string) => void) { + setPeriod(period: [Date | null, Date | null], navigate: (path: string, options?: NavigateOptions) => void) { this.filters.period = period; this.updateURL(navigate) } - setStartTime(startTime: string, navigate: (path: string) => void) { + setStartTime(startTime: string, navigate: (path: string, options?: NavigateOptions) => void) { this.filters.startTime = startTime this.updateURL(navigate) } - setEndTime(endTime: string, navigate: (path: string) => void) { + setEndTime(endTime: string, navigate: (path: string, options?: NavigateOptions) => void) { this.filters.endTime = endTime this.updateURL(navigate) } - updateURL(navigate: (path: string) => void) { + updateURL(navigate: (path: string, options?: NavigateOptions) => void) { const params = new URLSearchParams(); if (this.filters.hostId) params.set('hostId', this.filters.hostId); if (this.filters.cameraId) params.set('cameraId', this.filters.cameraId); @@ -80,7 +89,7 @@ export class EventsStore { if (this.filters.startTime) params.set('startTime', this.filters.startTime) if (this.filters.endTime) params.set('endTime', this.filters.endTime) - navigate(`?${params.toString()}`); + navigate(`?${params.toString()}`, { replace: true }); } isPeriodSet() { diff --git a/src/widgets/CameraCard.tsx b/src/widgets/CameraCard.tsx index 6759e22..3b6b0f5 100644 --- a/src/widgets/CameraCard.tsx +++ b/src/widgets/CameraCard.tsx @@ -10,7 +10,7 @@ import { mapHostToHostname, proxyApi } from '../services/frigate.proxy/frigate.a import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema'; import AutoUpdatedImage from '../shared/components/images/AutoUpdatedImage'; import CameraTagsList from './CameraTagsList'; -import { eventsQueryParams } from '../shared/stores/events.store'; +import { eventsQueryParams } from '../pages/EventsPage'; const useStyles = createStyles((theme) => ({ mainCard: { @@ -53,9 +53,8 @@ const CameraCard = ({ const imageUrl = hostName ? proxyApi.cameraImageURL(hostName, camera.name) : '' //todo implement get URL from live cameras const { isAdmin } = useAdminRole() - useEffect(() => { - if (entry?.isIntersecting) + if (entry && entry.isIntersecting) setRenderImage(true) }, [entry?.isIntersecting]) @@ -83,7 +82,7 @@ const CameraCard = ({ {camera.name} / {camera.frigateHost?.name} - {!renderImage ? '' : + {!renderImage ? null : }