fix search params at events page

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)) {

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() {

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 = ({
         <Grid.Col md={6} lg={3} p='0.2rem'>
             <Card ref={ref} h='100%' radius="lg" padding='0.5rem' className={classes.mainCard}>
                 <Text align='center' size='md' className={classes.headText} >{camera.name} / {camera.frigateHost?.name}</Text>
-                {!renderImage ? '' :
+                {!renderImage ? null :
                     <AutoUpdatedImage onClick={handleOpenLiveView} enabled={camera.config?.enabled} imageUrl={imageUrl} />
                 }
                 <Group