fix camera change and update recordings list

save main page host filter

src/pages/MainPage.tsx

@@ -16,9 +16,9 @@ import { useTranslation } from 'react-i18next';
 const MainPage = () => {
     const { t } = useTranslation()
     const executed = useRef(false)
-    const { sideBarsStore } = useContext(Context)
+    const { sideBarsStore, mainStore } = useContext(Context)
+    const { selectedHostId } = mainStore
     const [searchQuery, setSearchQuery] = useState<string>()
-    const [selectedHostId, setSelectedHostId] = useState<string>()
     const [filteredCameras, setFilteredCameras] = useState<GetCameraWHostWConfig[]>()
 
     const { data: cameras, isPending, isError, refetch } = useQuery({
@@ -79,7 +79,7 @@ const MainPage = () => {
     if (isError) return <RetryErrorPage onRetry={refetch} />
 
     const handleSelectHost = (hostId: string) => {
-        setSelectedHostId(hostId)
+        mainStore.selectedHostId = hostId
     }
 
     return (

src/pages/RecordingsPage.tsx

@@ -54,6 +54,7 @@ const RecordingsPage = () => {
         recStore.selectedRange = [parsedStartDay, parsedEndDay]
       }
       executed.current = true
+      if (!isProduction) console.log('RecordingsPage rendered first time')
       return () => {
         sideBarsStore.setRightChildren(null)
         sideBarsStore.rightVisible = false

src/shared/components/accordion/CameraAccordion.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Center, Loader } from '@mantine/core';
+import { Accordion, Center, Loader, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import { useContext, useMemo } from 'react';
@@ -10,16 +10,22 @@ import { isProduction } from '../../env.const';
 import { getResolvedTimeZone, parseQueryDateToDate } from '../../utils/dateUtil';
 import RetryError from '../RetryError';
 import DayAccordion from './DayAccordion';
+import { GetCameraWHostWConfig } from '../../../services/frigate.proxy/frigate.schema';
 
-const CameraAccordion = () => {
+interface CameraAccordionProps {
+    camera: GetCameraWHostWConfig
+}
+
+const CameraAccordion = ({
+    camera
+} : CameraAccordionProps ) => {
     const { t } = useTranslation()
     const { recordingsStore: recStore } = useContext(Context)
 
-    const camera = recStore.openedCamera || recStore.filteredCamera
     const host = recStore.filteredHost
     const hostName = mapHostToHostname(host)
 
-    const { data, isPending, isError, refetch } = useQuery({
+    const { data: recordings, isPending, isError, refetch } = useQuery({
         queryKey: [frigateQueryKeys.getRecordingsSummary, camera?.id],
         queryFn: () => {
             if (camera && hostName) {
@@ -39,10 +45,10 @@ const CameraAccordion = () => {
     )
 
     const days = useMemo(() => {
-        if (data && camera) {
+        if (recordings && camera) {
             const [startDate, endDate] = recStore.selectedRange
             if (startDate && endDate) {
-                return data
+                return recordings
                     .filter(rec => {
                         const parsedRecDate = parseQueryDateToDate(rec.day)
                         if (parsedRecDate) {
@@ -53,22 +59,23 @@ const CameraAccordion = () => {
                     .map(rec => recodItem(rec))
             }
             if ((startDate && endDate) || (!startDate && !endDate)) {
-                return data.map(rec => recodItem(rec))
+                return recordings.map(rec => recodItem(rec))
             }
         }
         return []
-    }, [data, recStore.selectedRange])
+    }, [recordings, recStore.selectedRange])
 
     if (isPending) return <Center><Loader /></Center>
     if (isError) return <RetryError onRetry={refetch} />
 
-    if (!data || !camera) return null
+    if (!recordings || !camera) return null
 
     if (!isProduction) console.log('camera', camera)
-    if (!isProduction) console.log('data', data)
+    if (!isProduction) console.log('data', recordings)
     if (!isProduction) console.log('hostName', hostName)
     if (!isProduction) console.log('CameraAccordion rendered')
 
+
     return (
         <Accordion variant='separated' radius="md" w='100%'>
             {days}

src/shared/components/accordion/DayAccordion.tsx

@@ -19,7 +19,7 @@ const DayAccordion = ({
   const { recordingsStore: recStore } = useContext(Context)
   const [openedValue, setOpenedValue] = useState<string>()
 
-  const camera = recStore.openedCamera || recStore.filteredCamera
+  const camera = recStore.filteredCamera
   const hostName = mapHostToHostname(recStore.filteredHost)
 
   const handleOpenPlayer = useCallback((value?: string) => {

src/shared/components/accordion/EventsAccordion.tsx

@@ -37,7 +37,7 @@ const EventsAccordion = ({
 
     const host = recStore.filteredHost
     const hostName = mapHostToHostname(host)
-    const camera = recStore.openedCamera || recStore.filteredCamera
+    const camera = recStore.filteredCamera
     const isRequiredParams = host && camera
 
     const { data, isPending, isError, refetch } = useQuery({

src/shared/stores/main.store.ts

@@ -0,0 +1,16 @@
+import { makeAutoObservable } from "mobx";
+
+export class MainStore {
+
+    private _selectedHostId: string | undefined
+    public get selectedHostId(): string | undefined {
+        return this._selectedHostId;
+    }
+    public set selectedHostId(value: string | undefined) {
+        this._selectedHostId = value;
+    }
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+}

src/shared/stores/recordings.store.ts

@@ -62,11 +62,12 @@ export class RecordingsStore {
         this._selectedRange = value
     }
 
-    private _openedCamera: GetCameraWHostWConfig | undefined
-    public get openedCamera(): GetCameraWHostWConfig | undefined {
-        return this._openedCamera
-    }
-    public set openedCamera(value: GetCameraWHostWConfig | undefined) {
-        this._openedCamera = value
-    }
+    // TODO Delete
+    // private _openedCamera: GetCameraWHostWConfig | undefined
+    // public get openedCamera(): GetCameraWHostWConfig | undefined {
+    //     return this._openedCamera
+    // }
+    // public set openedCamera(value: GetCameraWHostWConfig | undefined) {
+    //     this._openedCamera = value
+    // }
 }

src/shared/stores/root.store.ts

@@ -1,14 +1,17 @@
+import { MainStore } from "./main.store";
 import { ModalStore } from "./modal.store";
 import { RecordingsStore } from "./recordings.store";
 import { SideBarsStore } from "./sidebars.store";
 import { UserStore } from "./user.store";
 
 class RootStore {
+    mainStore: MainStore
     userStore: UserStore
     modalStore: ModalStore
     sideBarsStore: SideBarsStore
     recordingsStore: RecordingsStore
     constructor() {
+        this.mainStore = new MainStore()
         this.userStore = new UserStore()
         this.modalStore = new ModalStore(this)
         this.sideBarsStore = new SideBarsStore()

src/widgets/SelectedCameraList.tsx

@@ -32,13 +32,11 @@ const SelectedCameraList = () => {
 
     if (!camera || !camera?.frigateHost) return null
 
-    recStore.openedCamera = camera
-
     return (
         <Flex w='100%' h='100%' direction='column' align='center'>
             <Text>{camera.frigateHost.name} / {camera.name}</Text>
             <Suspense>
-                <CameraAccordion />
+                <CameraAccordion camera={camera} />
             </Suspense>
         </Flex>
     )

src/widgets/SelectedHostList.tsx

@@ -32,7 +32,6 @@ const SelectedHostList = ({
 
     const handleOnChange = (cameraId: string | null) => {
         setOpenCameraId(openCameraId === cameraId ? null : cameraId)
-        recStore.openedCamera = camerasQuery?.find( camera => camera.id === cameraId)
     }
 
     const handleRetry = () => {
@@ -51,7 +50,7 @@ const SelectedHostList = ({
                 <Accordion.Panel key={camera.id + 'Panel'}>
                     {openCameraId === camera.id && (
                         <Suspense>
-                            <CameraAccordion />
+                            <CameraAccordion camera={camera} />
                         </Suspense>
                     )}
                 </Accordion.Panel>