From 2f72689f4e69e11bd454a050a9aa1d7a31fce576 Mon Sep 17 00:00:00 2001 From: NlightN22 Date: Fri, 3 May 2024 13:09:49 +0700 Subject: [PATCH] fix camera change and update recordings list save main page host filter --- src/pages/MainPage.tsx | 6 ++--- src/pages/RecordingsPage.tsx | 1 + .../components/accordion/CameraAccordion.tsx | 27 ++++++++++++------- .../components/accordion/DayAccordion.tsx | 2 +- .../components/accordion/EventsAccordion.tsx | 2 +- src/shared/stores/main.store.ts | 16 +++++++++++ src/shared/stores/recordings.store.ts | 15 ++++++----- src/shared/stores/root.store.ts | 3 +++ src/widgets/SelectedCameraList.tsx | 4 +-- src/widgets/SelectedHostList.tsx | 3 +-- 10 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 src/shared/stores/main.store.ts diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index f829056..075907a 100644 --- a/src/pages/MainPage.tsx +++ b/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() - const [selectedHostId, setSelectedHostId] = useState() const [filteredCameras, setFilteredCameras] = useState() const { data: cameras, isPending, isError, refetch } = useQuery({ @@ -79,7 +79,7 @@ const MainPage = () => { if (isError) return const handleSelectHost = (hostId: string) => { - setSelectedHostId(hostId) + mainStore.selectedHostId = hostId } return ( diff --git a/src/pages/RecordingsPage.tsx b/src/pages/RecordingsPage.tsx index f4688a7..e78c71a 100644 --- a/src/pages/RecordingsPage.tsx +++ b/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 diff --git a/src/shared/components/accordion/CameraAccordion.tsx b/src/shared/components/accordion/CameraAccordion.tsx index d2d7257..5764be2 100644 --- a/src/shared/components/accordion/CameraAccordion.tsx +++ b/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
if (isError) return - 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 ( {days} diff --git a/src/shared/components/accordion/DayAccordion.tsx b/src/shared/components/accordion/DayAccordion.tsx index e2176e7..348d008 100644 --- a/src/shared/components/accordion/DayAccordion.tsx +++ b/src/shared/components/accordion/DayAccordion.tsx @@ -19,7 +19,7 @@ const DayAccordion = ({ const { recordingsStore: recStore } = useContext(Context) const [openedValue, setOpenedValue] = useState() - const camera = recStore.openedCamera || recStore.filteredCamera + const camera = recStore.filteredCamera const hostName = mapHostToHostname(recStore.filteredHost) const handleOpenPlayer = useCallback((value?: string) => { diff --git a/src/shared/components/accordion/EventsAccordion.tsx b/src/shared/components/accordion/EventsAccordion.tsx index dc06bd4..1430461 100644 --- a/src/shared/components/accordion/EventsAccordion.tsx +++ b/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({ diff --git a/src/shared/stores/main.store.ts b/src/shared/stores/main.store.ts new file mode 100644 index 0000000..1dddcfe --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/shared/stores/recordings.store.ts b/src/shared/stores/recordings.store.ts index 5d5bf02..9544fd0 100644 --- a/src/shared/stores/recordings.store.ts +++ b/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 + // } } \ No newline at end of file diff --git a/src/shared/stores/root.store.ts b/src/shared/stores/root.store.ts index 3acaba8..43d23a3 100644 --- a/src/shared/stores/root.store.ts +++ b/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() diff --git a/src/widgets/SelectedCameraList.tsx b/src/widgets/SelectedCameraList.tsx index 2541e85..83d3f28 100644 --- a/src/widgets/SelectedCameraList.tsx +++ b/src/widgets/SelectedCameraList.tsx @@ -32,13 +32,11 @@ const SelectedCameraList = () => { if (!camera || !camera?.frigateHost) return null - recStore.openedCamera = camera - return ( {camera.frigateHost.name} / {camera.name} - + ) diff --git a/src/widgets/SelectedHostList.tsx b/src/widgets/SelectedHostList.tsx index 549051f..425eb18 100644 --- a/src/widgets/SelectedHostList.tsx +++ b/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 = ({ {openCameraId === camera.id && ( - + )}