fix linter warnings

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(() => {
+        if (!executed.current) {
+            sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
     const handleGoToMain = () => {
         window.location.replace(routesPath.MAIN_PATH)

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(() => {
+        if (!executed.current) {
+            sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
     const handleGoToMain = () => {
         window.location.replace(routesPath.MAIN_PATH)

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(() => {
+        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<string>()
 
 
     if (isPending || adminLoading) return <CenterLoader />
-    if (isError || !data) return <RetryErrorPage />
+    if (isError || !data) return <RetryErrorPage onRetry={refetch} />
     if (!isAdmin) return <Forbidden />
     const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name }))
 

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

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(() => {
+    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}
         />

src/pages/HostStoragePage.tsx

@@ -1,20 +1,22 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
-import { useParams } from 'react-router-dom';
 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(() => {
+        if (!executed.current) {
             sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
 
 

src/pages/HostSystemPage.tsx

@@ -1,20 +1,22 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
-import { useParams } from 'react-router-dom';
 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(() => {
+        if (!executed.current) {
             sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
     if (!isAdmin) return <Forbidden />
 

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(() => {
+        if (!executed.current) {
             sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
 
     if (isPending) return <CenterLoader />

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

src/pages/RecordingsPage.tsx

@@ -1,5 +1,5 @@
 
-import { useState, useContext, useEffect } from 'react';
+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';
@@ -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<string>('')
   const [cameraId, setCameraId] = useState<string>('')
@@ -38,6 +40,7 @@ const RecordingsPage = () => {
   const [firstRender, setFirstRender] = useState(false)
 
   useEffect(() => {
+    if (!executed.current) {
       sideBarsStore.rightVisible = true
       sideBarsStore.setRightChildren(
         <RecordingsFiltersRightSide />
@@ -54,7 +57,8 @@ const RecordingsPage = () => {
         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')
 

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(() => {
+        if (!executed.current) {
+            sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
     const handleGoToMain = () => {
         navigate(routesPath.MAIN_PATH)

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,6 +19,7 @@ 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],
@@ -27,10 +28,13 @@ const SettingsPage = () => {
 
     const { sideBarsStore } = useContext(Context)
     useEffect(() => {
+        if (!executed.current) {
             sideBarsStore.rightVisible = false
             sideBarsStore.setLeftChildren(null)
             sideBarsStore.setRightChildren(null)
-    }, [])
+            executed.current = true
+        }
+    }, [sideBarsStore])
 
     const { isAdmin, isLoading: adminLoading } = useAdminRole()
 

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<React.ReactNode>(() => {
         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 (
         <div>

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) => {
         <Menu
             width={260}
             transitionProps={{ transition: 'pop-top-right' }}
-            onClose={() => setUserMenuOpened(false)}
-            onOpen={() => setUserMenuOpened(true)}
             withinPortal
         >
             <Menu.Target>

src/shared/components/accordion/CameraAccordion.tsx

@@ -1,6 +1,5 @@
-import { Accordion, Center, Loader, Text } from '@mantine/core';
+import { Accordion, Center, Loader } from '@mantine/core';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
-import { GetCameraWHostWConfig, GetFrigateHost } from '../../../services/frigate.proxy/frigate.schema';
 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 = () => {
-}
-
-const CameraAccordion = ({
-}: CameraAccordionProps) => {
     const { recordingsStore: recStore } = useContext(Context)
 
     const camera = recStore.openedCamera || recStore.filteredCamera

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 <Center><Loader /></Center>
     if (isError) return <RetryError onRetry={refetch} />
@@ -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)
         }
     }

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 = ({
+const SelectedCameraList = () => {
-}: SelectedCameraListProps) => {
 
     const { recordingsStore: recStore } = useContext(Context)
 

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
 }