fix add observer

src/pages/403.tsx

@@ -5,6 +5,7 @@ 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 = () => {
 
@@ -29,4 +30,4 @@ const Forbidden = () => {
     );
 };
 
-export default Forbidden;
+export default observer(Forbidden);

src/pages/404.tsx

@@ -5,6 +5,7 @@ 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 = () => {
 
@@ -29,4 +30,4 @@ const NotFound = () => {
     );
 };
 
-export default NotFound;
+export default observer(NotFound);

src/pages/AccessSettings.tsx

@@ -12,6 +12,7 @@ import { Context } from '..';
 import { strings } from '../shared/strings/strings';
 import { useAdminRole } from '../hooks/useAdminRole';
 import Forbidden from './403';
+import { observer } from 'mobx-react-lite';
 
 const AccessSettings = () => {
     const { data, isPending, isError, refetch } = useQuery({
@@ -64,4 +65,4 @@ const AccessSettings = () => {
     );
 };
 
-export default AccessSettings;
+export default observer(AccessSettings);

src/pages/FrigateHostsPage.tsx

@@ -12,7 +12,7 @@ import { observer } from 'mobx-react-lite'
 import { useAdminRole } from '../hooks/useAdminRole';
 import Forbidden from './403';
 
-const FrigateHostsPage = observer(() => {
+const FrigateHostsPage = () => {
     const queryClient = useQueryClient()
     const { isPending: hostsPending, error: hostsError, data } = useQuery({
         queryKey: [frigateQueryKeys.getFrigateHosts],
@@ -89,6 +89,6 @@ const FrigateHostsPage = observer(() => {
             </Flex>
         </div>
     );
-})
+}
 
-export default FrigateHostsPage;
+export default observer(FrigateHostsPage);

src/pages/HostConfigPage.tsx

@@ -11,6 +11,7 @@ import CenterLoader from '../shared/components/loaders/CenterLoader';
 import RetryErrorPage from './RetryErrorPage';
 import { useAdminRole } from '../hooks/useAdminRole';
 import Forbidden from './403';
+import { observer } from 'mobx-react-lite';
 
 
 const HostConfigPage = () => {
@@ -115,4 +116,4 @@ const HostConfigPage = () => {
 
 }
 
-export default HostConfigPage;
+export default observer(HostConfigPage);

src/pages/HostStoragePage.tsx

@@ -3,6 +3,7 @@ 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'>()
@@ -25,4 +26,4 @@ const HostStoragePage = () => {
     );
 };
 
-export default HostStoragePage;
+export default observer(HostStoragePage);

src/pages/HostSystemPage.tsx

@@ -3,6 +3,7 @@ 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'>()
@@ -24,4 +25,4 @@ const HostSystemPage = () => {
     );
 };
 
-export default HostSystemPage;
+export default observer(HostSystemPage);

src/pages/LiveCameraPage.tsx

@@ -12,7 +12,7 @@ import { strings } from '../shared/strings/strings';
 import { routesPath } from '../router/routes.path';
 import { recordingsPageQuery } from './RecordingsPage';
 
-const LiveCameraPage = observer(() => {
+const LiveCameraPage = () => {
     const navigate = useNavigate()
     let { id: cameraId } = useParams<'id'>()
     if (!cameraId) throw Error('Camera id does not exist')
@@ -52,6 +52,6 @@ const LiveCameraPage = observer(() => {
             <Player camera={camera} />
         </Flex>
     );
-})
+}
 
-export default LiveCameraPage;
+export default observer(LiveCameraPage)

src/pages/PlayRecordPage.tsx

@@ -6,6 +6,7 @@ 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';
 
 export const playRecordPageQuery = {
     link: 'link',
@@ -33,4 +34,4 @@ const PlayRecordPage = () => {
     );
 };
 
-export default PlayRecordPage;
+export default observer(PlayRecordPage);

src/pages/RecordingsPage.tsx

@@ -20,7 +20,7 @@ export const recordingsPageQuery = {
   hour: 'hour',
 }
 
-const RecordingsPage = observer(() => {
+const RecordingsPage = () => {
   const { sideBarsStore, recordingsStore: recStore } = useContext(Context)
 
   const location = useLocation()
@@ -123,6 +123,6 @@ const RecordingsPage = observer(() => {
       }
     </Flex>
   )
-})
+}
 
-export default RecordingsPage
+export default observer(RecordingsPage)

src/pages/RetryErrorPage.tsx

@@ -5,6 +5,7 @@ import { strings } from '../shared/strings/strings';
 import { useNavigate } from 'react-router-dom';
 import { ExclamationCogWheel } from '../shared/components/svg/ExclamationCogWheel';
 import { Context } from '..';
+import { observer } from 'mobx-react-lite';
 
 interface RetryErrorPageProps {
     onRetry?: () => void
@@ -14,8 +15,6 @@ const RetryErrorPage = ({ onRetry }: RetryErrorPageProps) => {
     const navigate = useNavigate()
 
     const { sideBarsStore } = useContext(Context)
-
-
     useEffect(() => {
         sideBarsStore.setLeftChildren(null)
         sideBarsStore.setRightChildren(null)
@@ -48,4 +47,4 @@ const RetryErrorPage = ({ onRetry }: RetryErrorPageProps) => {
     );
 };
 
-export default RetryErrorPage;
+export default observer(RetryErrorPage);

src/pages/SettingsPage.tsx

@@ -16,6 +16,7 @@ import { GetConfig } from '../services/frigate.proxy/frigate.schema';
 import { Context } from '..';
 import { useAdminRole } from '../hooks/useAdminRole';
 import Forbidden from './403';
+import { observer } from 'mobx-react-lite';
 
 const SettingsPage = () => {
     const queryClient = useQueryClient()
@@ -133,4 +134,4 @@ const SettingsPage = () => {
     );
 };
 
-export default SettingsPage;
+export default observer(SettingsPage);

src/services/frigate.proxy/frigate.api.ts

@@ -27,8 +27,9 @@ instanceApi.interceptors.request.use(
     config => {
         const token = getToken();
         if (token) {
-            config.headers.Authorization = `Bearer ${token}`;
+            config.headers.Authorization = `Bearer ${token}`
         }
+        config.timeout = 60 * 1000
         return config;
     },
     error => Promise.reject(error)
@@ -40,7 +41,6 @@ export const frigateApi = {
     getHosts: () => instanceApi.get<GetFrigateHost[]>('apiv1/frigate-hosts').then(res => {
         return res.data
     }),
-    // TODO change request to cameras
     getHost: (id: string) => instanceApi.get<GetFrigateHost>(`apiv1/frigate-hosts/${id}`).then(res => {
         return res.data
     }),
@@ -100,7 +100,10 @@ export const proxyApi = {
         cameraName: string,
         timezone: string,
     ) =>
-        instanceApi.get<RecordSummary[]>(`proxy/${hostName}/api/${cameraName}/recordings/summary`, { params: { timezone } }).then(res => res.data),
+        instanceApi.get<RecordSummary[]>(`proxy/${hostName}/api/${cameraName}/recordings/summary`, {
+            params: { timezone },
+            timeout: 5 * 60 * 1000
+        }).then(res => res.data),
 
     // E.g. http://127.0.0.1:5000/api/events?before=1708534799&after=1708448400&camera=CameraName&has_clip=1&include_thumbnails=0&limit=5000
     getEvents: (
@@ -133,7 +136,6 @@ export const proxyApi = {
 
     getEventsSummary: (hostName: string, cameraName: string) =>
         instanceApi.get(`proxy/${hostName}/api/${cameraName}/events/summary`).then(res => res.data),
-    getEventsInProgress: (hostName: string) => instanceApi.get(`proxy/${hostName}/api/events?in_progress=1&include_thumbnails=0`),
     cameraWsURL: (hostName: string, cameraName: string) =>
         `ws://${proxyURL.host}/proxy-ws/${hostName}/live/jsmpeg/${cameraName}`,
     cameraImageURL: (hostName: string, cameraName: string) =>
@@ -154,10 +156,8 @@ export const proxyApi = {
     },
     getExportedVideoList: (hostName: string) => instanceApi.get<GetExportedFile[]>(`proxy/${hostName}/exports/`).then(res => res.data),
     getVideoUrl: (hostName: string, fileName: string) => `${proxyPrefix}${hostName}/exports/${fileName}`,
-    deleteExportedVideo: (hostName: string, videoName: string) => instanceApi.delete(`proxy/${hostName}/api/export/${videoName}`).then(res => res.data)
-
     // filename example Home_1_Backyard_2024_02_26_16_25__2024_02_26_16_26.mp4
-
+    deleteExportedVideo: (hostName: string, videoName: string) => instanceApi.delete(`proxy/${hostName}/api/export/${videoName}`).then(res => res.data)
 }
 
 export const mapCamerasFromConfig = (config: FrigateConfig): string[] => {

src/services/frigate.proxy/frigate.schema.ts

@@ -1,4 +1,4 @@
-import { any, z } from "zod";
+import { z } from "zod";
 import { CameraConfig, FrigateConfig } from "../../types/frigateConfig";
 
 export const putConfigSchema = z.object({

src/shared/components/SideBar.tsx

@@ -42,7 +42,6 @@ const SideBar = ({ isHidden, side, children }: SideBarProps) => {
     }
 
     const { sideBarsStore } = useContext(Context)
-
     useEffect(() => {
         if (sideBarsStore.rightVisible && side === 'right' && !visible) {
             open()

src/shared/components/UserMenu.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
-import { Avatar, createStyles, Group, Menu, UnstyledButton, Text, Button, Flex } from "@mantine/core";
+import { Avatar,  Group, Menu,  Text, Button, Flex } from "@mantine/core";
 import { useAuth } from 'react-oidc-context';
 import { strings } from '../strings/strings';
 import { useMediaQuery } from '@mantine/hooks';
 import { dimensions } from '../dimensions/dimensions';
 import ColorSchemeToggle from './buttons/ColorSchemeToggle';
-import { useNavigate } from 'react-router-dom';
 import { keycloakConfig } from '../..';
 
 interface UserMenuProps {
@@ -16,10 +15,9 @@ const UserMenu = ({ user }: UserMenuProps) => {
     const [userMenuOpened, setUserMenuOpened] = useState(false);
     const auth = useAuth()
     const isMiddleScreen = useMediaQuery(dimensions.middleScreenSize)
-    const navigate = useNavigate()
 
     const handleAboutMe = () => {
-        navigate(`USER_DETAILED_PATH`)
+        throw Error('Not yet implemented')
     }
 
     const handleLogout = async () => {
@@ -56,12 +54,12 @@ const UserMenu = ({ user }: UserMenuProps) => {
                         :
                         <></>
                 }
-                <Menu.Item>
+                {/* <Menu.Item>
                     {strings.settings}
                 </Menu.Item>
                 <Menu.Item onClick={handleAboutMe}>
                     {strings.aboutMe}
-                </Menu.Item>
+                </Menu.Item> */}
                 <Menu.Item onClick={handleLogout}>
                     {strings.logout}
                 </Menu.Item>

src/shared/components/accordion/CameraAccordion.tsx

@@ -12,13 +12,9 @@ import { strings } from '../../strings/strings';
 import { RecordSummary } from '../../../types/record';
 
 interface CameraAccordionProps {
-    // camera: GetCameraWHostWConfig,
-    // host: GetFrigateHost
 }
 
 const CameraAccordion = ({
-    // camera,
-    // host
 }: CameraAccordionProps) => {
     const { recordingsStore: recStore } = useContext(Context)
 

src/shared/components/accordion/EventPanel.tsx

@@ -1,4 +1,4 @@
-import { Flex, Group, Button, Text, Image } from '@mantine/core';
+import { Flex,  Button, Text } from '@mantine/core';
 import { IconExternalLink } from '@tabler/icons-react';
 import React from 'react';
 import { proxyApi } from '../../../services/frigate.proxy/frigate.api';

src/shared/components/accordion/EventsAccordion.tsx

@@ -36,7 +36,7 @@ interface EventsAccordionProps {
  * @param cameraName e.g Backyard
  * @param hostName proxy format, e.g hostName: localhost:4000
  */
-const EventsAccordion = observer(({
+const EventsAccordion = ({
     day,
     hour,
     // TODO labels, score
@@ -184,6 +184,6 @@ const EventsAccordion = observer(({
             ))}
         </Accordion>
     );
-})
+}
 
-export default EventsAccordion;
+export default observer(EventsAccordion);

src/shared/components/menu/DrawerMenu.tsx

@@ -1,6 +1,5 @@
-import { Box, Burger, Button, Center, Collapse, Divider, Drawer, Flex, Group, Menu, ScrollArea, UnstyledButton, createStyles, rem, useMantineTheme } from '@mantine/core';
+import { Burger, Drawer, Flex, UnstyledButton, createStyles } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconChevronDown } from '@tabler/icons-react';
 import React from 'react';
 import { LinkItem } from '../../../widgets/header/HeaderAction';
 import { useNavigate } from 'react-router-dom';
@@ -42,8 +41,6 @@ const DrawerMenu = ({
 
     const { classes } = useStyles();
     const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false)
-    const theme = useMantineTheme();
-
 
     const handleNavigate = (link: string) => {
         navigate(link)

src/widgets/SelectedCameraList.tsx

@@ -1,14 +1,12 @@
-import { Center, Flex, Text } from '@mantine/core';
+import { Flex, Text } from '@mantine/core';
 import React, { Suspense, useContext } from 'react';
 import CameraAccordion from '../shared/components/accordion/CameraAccordion';
-import { GetCameraWHostWConfig, GetFrigateHost } from '../services/frigate.proxy/frigate.schema';
 import { useQuery } from '@tanstack/react-query';
 import { Context } from '..';
 import { frigateQueryKeys, frigateApi } from '../services/frigate.proxy/frigate.api';
-import { host } from '../shared/env.const';
-import CogwheelLoader from '../shared/components/loaders/CogwheelLoader';
 import RetryErrorPage from '../pages/RetryErrorPage';
 import CenterLoader from '../shared/components/loaders/CenterLoader';
+import { observer } from 'mobx-react-lite';
 
 interface SelectedCameraListProps {
 }
@@ -47,4 +45,4 @@ const SelectedCameraList = ({
     )
 };
 
-export default SelectedCameraList;
+export default observer(SelectedCameraList);

src/widgets/SelectedHostList.tsx

@@ -7,6 +7,7 @@ import { Context } from '..';
 import CenterLoader from '../shared/components/loaders/CenterLoader';
 import RetryErrorPage from '../pages/RetryErrorPage';
 import { strings } from '../shared/strings/strings';
+import { observer } from 'mobx-react-lite';
 const CameraAccordion = lazy(() => import('../shared/components/accordion/CameraAccordion'));
 
 
@@ -74,4 +75,4 @@ const SelectedHostList = ({
     )
 };
 
-export default SelectedHostList;
+export default observer(SelectedHostList);