From a3e25a34e4504686344d94e2bfb045e4bef3ec14 Mon Sep 17 00:00:00 2001 From: NlightN22 Date: Wed, 28 Feb 2024 17:22:41 +0700 Subject: [PATCH] fix linter warnings --- src/pages/403.tsx | 15 +++--- src/pages/404.tsx | 15 +++--- src/pages/AccessSettings.tsx | 18 ++++--- src/pages/FrigateHostsPage.tsx | 15 +++--- src/pages/HostConfigPage.tsx | 16 +++--- src/pages/HostStoragePage.tsx | 18 ++++--- src/pages/HostSystemPage.tsx | 18 ++++--- src/pages/LiveCameraPage.tsx | 14 ++++-- src/pages/PlayRecordPage.tsx | 16 +++--- src/pages/RecordingsPage.tsx | 50 ++++++++++--------- src/pages/RetryErrorPage.tsx | 14 ++++-- src/pages/SettingsPage.tsx | 18 ++++--- src/shared/components/SideBar.tsx | 8 +-- src/shared/components/UserMenu.tsx | 9 +--- .../components/accordion/CameraAccordion.tsx | 11 ++-- .../components/accordion/EventsAccordion.tsx | 10 ++-- src/widgets/SelectedCameraList.tsx | 5 +- src/widgets/SelectedHostList.tsx | 2 - 18 files changed, 149 insertions(+), 123 deletions(-) diff --git a/src/pages/403.tsx b/src/pages/403.tsx index f59289d..2397137 100644 --- a/src/pages/403.tsx +++ b/src/pages/403.tsx @@ -1,20 +1,23 @@ import { Button, Flex, Text } from '@mantine/core'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import CogWheelWithText from '../shared/components/loaders/CogWheelWithText'; import { strings } from '../shared/strings/strings'; -import { redirect, useNavigate } from 'react-router-dom'; import { routesPath } from '../router/routes.path'; import { Context } from '..'; import { observer } from 'mobx-react-lite'; const Forbidden = () => { - + const executed = useRef(false) const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const handleGoToMain = () => { window.location.replace(routesPath.MAIN_PATH) diff --git a/src/pages/404.tsx b/src/pages/404.tsx index a78e85e..94e0f8e 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,20 +1,23 @@ import { Button, Flex, Text } from '@mantine/core'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import CogWheelWithText from '../shared/components/loaders/CogWheelWithText'; import { strings } from '../shared/strings/strings'; -import { redirect, useNavigate } from 'react-router-dom'; import { routesPath } from '../router/routes.path'; import { Context } from '..'; import { observer } from 'mobx-react-lite'; const NotFound = () => { - + const executed = useRef(false) const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const handleGoToMain = () => { window.location.replace(routesPath.MAIN_PATH) diff --git a/src/pages/AccessSettings.tsx b/src/pages/AccessSettings.tsx index d6141a5..b6f5b0f 100644 --- a/src/pages/AccessSettings.tsx +++ b/src/pages/AccessSettings.tsx @@ -1,10 +1,10 @@ import { useQuery } from '@tanstack/react-query'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api'; import CenterLoader from '../shared/components/loaders/CenterLoader'; import RetryErrorPage from './RetryErrorPage'; import { Flex, Group, Select, Text } from '@mantine/core'; -import OneSelectFilter, { OneSelectItem } from '../shared/components/filters.aps/OneSelectFilter'; +import { OneSelectItem } from '../shared/components/filters.aps/OneSelectFilter'; import { useMediaQuery } from '@mantine/hooks'; import { dimensions } from '../shared/dimensions/dimensions'; import CamerasTransferList from '../shared/components/CamerasTransferList'; @@ -15,6 +15,7 @@ import Forbidden from './403'; import { observer } from 'mobx-react-lite'; const AccessSettings = () => { + const executed = useRef(false) const { data, isPending, isError, refetch } = useQuery({ queryKey: [frigateQueryKeys.getRoles], queryFn: frigateApi.getRoles @@ -23,17 +24,20 @@ const AccessSettings = () => { const { isAdmin, isLoading: adminLoading } = useAdminRole() useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const isMobile = useMediaQuery(dimensions.mobileSize) const [roleId, setRoleId] = useState() if (isPending || adminLoading) return - if (isError || !data) return + if (isError || !data) return if (!isAdmin) return const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name })) diff --git a/src/pages/FrigateHostsPage.tsx b/src/pages/FrigateHostsPage.tsx index 75c3583..1c05db6 100644 --- a/src/pages/FrigateHostsPage.tsx +++ b/src/pages/FrigateHostsPage.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import FrigateHostsTable from '../widgets/FrigateHostsTable'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { frigateApi, frigateQueryKeys } from '../services/frigate.proxy/frigate.api'; @@ -13,6 +13,7 @@ import { useAdminRole } from '../hooks/useAdminRole'; import Forbidden from './403'; const FrigateHostsPage = () => { + const executed = useRef(false) const queryClient = useQueryClient() const { isPending: hostsPending, error: hostsError, data } = useQuery({ queryKey: [frigateQueryKeys.getFrigateHosts], @@ -21,11 +22,13 @@ const FrigateHostsPage = () => { const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) - + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const { isAdmin, isLoading: adminLoading } = useAdminRole() const [pageData, setPageData] = useState(data) diff --git a/src/pages/HostConfigPage.tsx b/src/pages/HostConfigPage.tsx index 22bafb9..013be60 100644 --- a/src/pages/HostConfigPage.tsx +++ b/src/pages/HostConfigPage.tsx @@ -15,6 +15,7 @@ import { observer } from 'mobx-react-lite'; const HostConfigPage = () => { + const executed = useRef(false) const { sideBarsStore } = useContext(Context) let { id } = useParams<'id'>() @@ -32,10 +33,13 @@ const HostConfigPage = () => { }) useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) -}, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } +}, [sideBarsStore]) const clipboard = useClipboard({ timeout: 500 }) @@ -73,7 +77,7 @@ const HostConfigPage = () => { } clipboard.copy(editorRef.current.getValue()); - }, [editorRef]); + }, [editorRef, clipboard]); const onHandleSaveConfig = useCallback( async (save_option: string) => { @@ -106,7 +110,7 @@ const HostConfigPage = () => { defaultLanguage='yaml' value={config} defaultValue="// Data empty" - theme={theme.colorScheme == "dark" ? "vs-dark" : "vs-light"} + theme={theme.colorScheme === "dark" ? "vs-dark" : "vs-light"} beforeMount={handleEditorWillMount} onMount={handleEditorDidMount} /> diff --git a/src/pages/HostStoragePage.tsx b/src/pages/HostStoragePage.tsx index 1a64951..a5069a5 100644 --- a/src/pages/HostStoragePage.tsx +++ b/src/pages/HostStoragePage.tsx @@ -1,20 +1,22 @@ -import React, { useContext, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import React, { useContext, useEffect, useRef } from 'react'; import { Context } from '..'; import { useAdminRole } from '../hooks/useAdminRole'; import Forbidden from './403'; import { observer } from 'mobx-react-lite'; const HostStoragePage = () => { - let { id } = useParams<'id'>() + const executed = useRef(false) const { sideBarsStore } = useContext(Context) - const { isAdmin, isLoading: adminLoading } = useAdminRole() + const { isAdmin } = useAdminRole() useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) diff --git a/src/pages/HostSystemPage.tsx b/src/pages/HostSystemPage.tsx index 7fa6c8c..a5b8345 100644 --- a/src/pages/HostSystemPage.tsx +++ b/src/pages/HostSystemPage.tsx @@ -1,20 +1,22 @@ -import React, { useContext, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import React, { useContext, useEffect, useRef } from 'react'; import { Context } from '..'; import { useAdminRole } from '../hooks/useAdminRole'; import Forbidden from './403'; import { observer } from 'mobx-react-lite'; const HostSystemPage = () => { - let { id } = useParams<'id'>() + const executed = useRef(false) const { sideBarsStore } = useContext(Context) - const { isAdmin, isLoading: adminLoading } = useAdminRole() + const { isAdmin } = useAdminRole() useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) if (!isAdmin) return diff --git a/src/pages/LiveCameraPage.tsx b/src/pages/LiveCameraPage.tsx index 3022208..319238e 100644 --- a/src/pages/LiveCameraPage.tsx +++ b/src/pages/LiveCameraPage.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import { Context } from '..'; import { observer } from 'mobx-react-lite'; import { useNavigate, useParams } from 'react-router-dom'; @@ -13,6 +13,7 @@ import { routesPath } from '../router/routes.path'; import { recordingsPageQuery } from './RecordingsPage'; const LiveCameraPage = () => { + const executed = useRef(false) const navigate = useNavigate() let { id: cameraId } = useParams<'id'>() if (!cameraId) throw Error('Camera id does not exist') @@ -24,10 +25,13 @@ const LiveCameraPage = () => { const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) if (isPending) return diff --git a/src/pages/PlayRecordPage.tsx b/src/pages/PlayRecordPage.tsx index 43a5c03..347f683 100644 --- a/src/pages/PlayRecordPage.tsx +++ b/src/pages/PlayRecordPage.tsx @@ -1,9 +1,7 @@ import { Flex } from '@mantine/core'; -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import { useLocation } from 'react-router-dom'; import VideoPlayer from '../shared/components/players/VideoPlayer'; -import { proxyURL } from '../shared/env.const'; -import { proxyApi } from '../services/frigate.proxy/frigate.api'; import NotFound from './404'; import { Context } from '..'; import { observer } from 'mobx-react-lite'; @@ -14,12 +12,16 @@ export const playRecordPageQuery = { } const PlayRecordPage = () => { + const executed = useRef(false) const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const location = useLocation() const queryParams = new URLSearchParams(location.search) diff --git a/src/pages/RecordingsPage.tsx b/src/pages/RecordingsPage.tsx index e4b1fee..bb42dff 100644 --- a/src/pages/RecordingsPage.tsx +++ b/src/pages/RecordingsPage.tsx @@ -1,6 +1,6 @@ -import { useState, useContext, useEffect } from 'react'; -import { Flex, Text } from '@mantine/core'; +import { useState, useContext, useEffect, useRef, useMemo } from 'react'; +import { Flex, Text } from '@mantine/core'; import { useLocation, useNavigate } from 'react-router-dom'; import { observer } from 'mobx-react-lite'; import { Context } from '..'; @@ -21,16 +21,18 @@ export const recordingsPageQuery = { } const RecordingsPage = () => { + const executed = useRef(false) const { sideBarsStore, recordingsStore: recStore } = useContext(Context) const location = useLocation() const navigate = useNavigate() - const queryParams = new URLSearchParams(location.search) + const queryParams = useMemo(() => { + return new URLSearchParams(location.search); + }, [location.search]) const paramHostId = queryParams.get(recordingsPageQuery.hostId) const paramCameraId = queryParams.get(recordingsPageQuery.cameraId); const paramStartDay = queryParams.get(recordingsPageQuery.startDay); const paramEndDay = queryParams.get(recordingsPageQuery.endDay); - const paramTime = queryParams.get(recordingsPageQuery.hour); const [hostId, setHostId] = useState('') const [cameraId, setCameraId] = useState('') @@ -38,23 +40,25 @@ const RecordingsPage = () => { const [firstRender, setFirstRender] = useState(false) useEffect(() => { - sideBarsStore.rightVisible = true - sideBarsStore.setRightChildren( - - ) - if (paramHostId) recStore.hostIdParam = paramHostId - if (paramCameraId) recStore.cameraIdParam = paramCameraId - if (paramStartDay && paramEndDay) { - const parsedStartDay = parseQueryDateToDate(paramStartDay) - const parsedEndDay = parseQueryDateToDate(paramEndDay) - recStore.selectedRange = [parsedStartDay, parsedEndDay] + if (!executed.current) { + sideBarsStore.rightVisible = true + sideBarsStore.setRightChildren( + + ) + if (paramHostId) recStore.hostIdParam = paramHostId + if (paramCameraId) recStore.cameraIdParam = paramCameraId + if (paramStartDay && paramEndDay) { + const parsedStartDay = parseQueryDateToDate(paramStartDay) + const parsedEndDay = parseQueryDateToDate(paramEndDay) + recStore.selectedRange = [parsedStartDay, parsedEndDay] + } + setFirstRender(true) + return () => { + sideBarsStore.setRightChildren(null) + sideBarsStore.rightVisible = false + } } - setFirstRender(true) - return () => { - sideBarsStore.setRightChildren(null) - sideBarsStore.rightVisible = false - } - }, []) + }, [paramCameraId, paramEndDay, paramHostId, paramStartDay, recStore, sideBarsStore]) useEffect(() => { setHostId(recStore.filteredHost?.id || '') @@ -64,7 +68,7 @@ const RecordingsPage = () => { queryParams.delete(recordingsPageQuery.hostId) } navigate({ pathname: location.pathname, search: queryParams.toString() }); - }, [recStore.filteredHost]) + }, [recStore.filteredHost, location.pathname, navigate, queryParams]) useEffect(() => { setCameraId(recStore.filteredCamera?.id || '') @@ -74,7 +78,7 @@ const RecordingsPage = () => { queryParams.delete(recordingsPageQuery.cameraId) } navigate({ pathname: location.pathname, search: queryParams.toString() }); - }, [recStore.filteredCamera]) + }, [recStore.filteredCamera, location.pathname, navigate, queryParams]) useEffect(() => { setPeriod(recStore.selectedRange) @@ -89,7 +93,7 @@ const RecordingsPage = () => { queryParams.delete(recordingsPageQuery.endDay) } navigate({ pathname: location.pathname, search: queryParams.toString() }); - }, [recStore.selectedRange]) + }, [recStore.selectedRange, location.pathname, navigate, queryParams]) console.log('RecordingsPage rendered') diff --git a/src/pages/RetryErrorPage.tsx b/src/pages/RetryErrorPage.tsx index ec6ec28..a6b790a 100644 --- a/src/pages/RetryErrorPage.tsx +++ b/src/pages/RetryErrorPage.tsx @@ -1,5 +1,5 @@ import { Flex, Button, Text } from '@mantine/core'; -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useRef } from 'react'; import { routesPath } from '../router/routes.path'; import { strings } from '../shared/strings/strings'; import { useNavigate } from 'react-router-dom'; @@ -12,13 +12,19 @@ interface RetryErrorPageProps { } const RetryErrorPage = ({ onRetry }: RetryErrorPageProps) => { + const executed = useRef(false) + const navigate = useNavigate() const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const handleGoToMain = () => { navigate(routesPath.MAIN_PATH) diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index 7b28bb8..ceeab63 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import { useQuery, useMutation, @@ -19,18 +19,22 @@ import Forbidden from './403'; import { observer } from 'mobx-react-lite'; const SettingsPage = () => { + const executed = useRef(false) const queryClient = useQueryClient() const { isPending: configPending, error: configError, data, refetch } = useQuery({ queryKey: [frigateQueryKeys.getConfig], queryFn: frigateApi.getConfig, }) - + const { sideBarsStore } = useContext(Context) useEffect(() => { - sideBarsStore.rightVisible = false - sideBarsStore.setLeftChildren(null) - sideBarsStore.setRightChildren(null) - }, []) + if (!executed.current) { + sideBarsStore.rightVisible = false + sideBarsStore.setLeftChildren(null) + sideBarsStore.setRightChildren(null) + executed.current = true + } + }, [sideBarsStore]) const { isAdmin, isLoading: adminLoading } = useAdminRole() @@ -78,7 +82,7 @@ const SettingsPage = () => { const configsToUpdate = Object.keys(formDataObj).map(key => { const value = formDataObj[key] - const currData = data?.find( val => val.key === key) + const currData = data?.find(val => val.key === key) const isEncrypted = value === ecryptedValue if (currData && currData.encrypted && isEncrypted) { return { diff --git a/src/shared/components/SideBar.tsx b/src/shared/components/SideBar.tsx index 89a3d51..34fc666 100644 --- a/src/shared/components/SideBar.tsx +++ b/src/shared/components/SideBar.tsx @@ -1,4 +1,4 @@ -import React, { FC, JSX, useCallback, useContext, useEffect, useRef, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import { Aside, Button, createStyles, Navbar } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { useMantineSize } from '../utils/mantine.size.convertor'; @@ -48,7 +48,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { } else if (!sideBarsStore.rightVisible && side === 'right' && visible) { close() } - }, [sideBarsStore.rightVisible]) + }, [sideBarsStore.rightVisible, close, open, side, visible]) const [leftChildren, setLeftChildren] = useState(() => { if (children && side === 'left') return children @@ -71,7 +71,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { useEffect(() => { isHidden(!visible) - }, [visible]) + }, [visible, isHidden]) // resize controller useEffect(() => { @@ -89,7 +89,7 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => { return () => { window.removeEventListener('resize', checkWindowSize); } - }, [visible]) + }, [visible, open, close, hideSizePx,]) return (
diff --git a/src/shared/components/UserMenu.tsx b/src/shared/components/UserMenu.tsx index 1f71810..9443280 100644 --- a/src/shared/components/UserMenu.tsx +++ b/src/shared/components/UserMenu.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Avatar, Group, Menu, Text, Button, Flex } from "@mantine/core"; import { useAuth } from 'react-oidc-context'; import { strings } from '../strings/strings'; @@ -12,13 +12,10 @@ interface UserMenuProps { } const UserMenu = ({ user }: UserMenuProps) => { - const [userMenuOpened, setUserMenuOpened] = useState(false); const auth = useAuth() const isMiddleScreen = useMediaQuery(dimensions.middleScreenSize) - const handleAboutMe = () => { - throw Error('Not yet implemented') - } + const handleLogout = async () => { await auth.removeUser() @@ -30,8 +27,6 @@ const UserMenu = ({ user }: UserMenuProps) => { setUserMenuOpened(false)} - onOpen={() => setUserMenuOpened(true)} withinPortal > diff --git a/src/shared/components/accordion/CameraAccordion.tsx b/src/shared/components/accordion/CameraAccordion.tsx index f935c92..fac845f 100644 --- a/src/shared/components/accordion/CameraAccordion.tsx +++ b/src/shared/components/accordion/CameraAccordion.tsx @@ -1,6 +1,5 @@ -import { Accordion, Center, Loader, Text } from '@mantine/core'; -import React, { useContext, useEffect, useState } from 'react'; -import { GetCameraWHostWConfig, GetFrigateHost } from '../../../services/frigate.proxy/frigate.schema'; +import { Accordion, Center, Loader } from '@mantine/core'; +import React, { useContext } from 'react'; import { useQuery } from '@tanstack/react-query'; import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../../services/frigate.proxy/frigate.api'; import DayAccordion from './DayAccordion'; @@ -11,11 +10,7 @@ import RetryError from '../RetryError'; import { strings } from '../../strings/strings'; import { RecordSummary } from '../../../types/record'; -interface CameraAccordionProps { -} - -const CameraAccordion = ({ -}: CameraAccordionProps) => { +const CameraAccordion = () => { const { recordingsStore: recStore } = useContext(Context) const camera = recStore.openedCamera || recStore.filteredCamera diff --git a/src/shared/components/accordion/EventsAccordion.tsx b/src/shared/components/accordion/EventsAccordion.tsx index 3481740..f41f3fb 100644 --- a/src/shared/components/accordion/EventsAccordion.tsx +++ b/src/shared/components/accordion/EventsAccordion.tsx @@ -1,6 +1,6 @@ import { Accordion, Center, Flex, Group, Loader, Text } from '@mantine/core'; import { observer } from 'mobx-react-lite'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { Context } from '../../..'; import { useQuery } from '@tanstack/react-query'; import { frigateQueryKeys, mapHostToHostname, proxyApi } from '../../../services/frigate.proxy/frigate.api'; @@ -84,11 +84,11 @@ const EventsAccordion = ({ } }) - const createEventUrl = (eventId: string) => { + const createEventUrl = useCallback((eventId: string) => { if (hostName) return proxyApi.eventURL(hostName, eventId) return undefined - } + }, [hostName]) useEffect(() => { if (playedValue) { @@ -101,7 +101,7 @@ const EventsAccordion = ({ } else { setPlayerUrl(undefined) } - }, [playedValue]) + }, [playedValue, createEventUrl, host]) if (isPending) return
if (isError) return @@ -113,7 +113,7 @@ const EventsAccordion = ({ if (openedValue !== playedValue) { setOpenedItem(openedValue) setPlayedValue(openedValue) - } else if (openedValue === playedValue && playedValue === playedValue) { + } else if (openedValue === playedValue) { setPlayedValue(undefined) } } diff --git a/src/widgets/SelectedCameraList.tsx b/src/widgets/SelectedCameraList.tsx index 1d69b75..05ae59a 100644 --- a/src/widgets/SelectedCameraList.tsx +++ b/src/widgets/SelectedCameraList.tsx @@ -8,11 +8,8 @@ import RetryErrorPage from '../pages/RetryErrorPage'; import CenterLoader from '../shared/components/loaders/CenterLoader'; import { observer } from 'mobx-react-lite'; -interface SelectedCameraListProps { -} -const SelectedCameraList = ({ -}: SelectedCameraListProps) => { +const SelectedCameraList = () => { const { recordingsStore: recStore } = useContext(Context) diff --git a/src/widgets/SelectedHostList.tsx b/src/widgets/SelectedHostList.tsx index b4d5e51..2c184d6 100644 --- a/src/widgets/SelectedHostList.tsx +++ b/src/widgets/SelectedHostList.tsx @@ -1,6 +1,5 @@ import { Accordion, Flex, Text } from '@mantine/core'; import React, { Suspense, lazy, useContext, useState } from 'react'; -import { host } from '../shared/env.const'; import { useQuery } from '@tanstack/react-query'; import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api'; import { Context } from '..'; @@ -10,7 +9,6 @@ import { strings } from '../shared/strings/strings'; import { observer } from 'mobx-react-lite'; const CameraAccordion = lazy(() => import('../shared/components/accordion/CameraAccordion')); - interface SelectedHostListProps { hostId: string }