refactoring

fix bugs

src/AppBody.tsx

@@ -1,5 +1,4 @@
 import { AppShell, useMantineTheme, } from "@mantine/core";
-import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from "react-router-dom";
@@ -21,28 +20,27 @@ const AppBody = () => {
         { link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
     ]
 
-
     const location = useLocation()
 
     const pathsWithLeftSidebar: string[] = []
     const pathsWithRightSidebar: string[] = [routesPath.MAIN_PATH, routesPath.RECORDINGS_PATH, routesPath.EVENTS_PATH]
 
-    const [leftSideBar, setLeftSidebar] = useState(pathsWithLeftSidebar.includes(location.pathname))
+    const [isLeftSideBarVisible, setVisibleLeftSidebar] = useState(pathsWithLeftSidebar.includes(location.pathname))
-    const [rightSideBar, setRightSidebar] = useState(pathsWithRightSidebar.includes(location.pathname))
+    const [isRightSideBarVisible, setVisibleRightSidebar] = useState(pathsWithRightSidebar.includes(location.pathname))
 
     const handleRightSidebarChange = (isVisible: boolean) => {
-        setRightSidebar(isVisible);
+        setVisibleRightSidebar(isVisible);
     };
 
     const theme = useMantineTheme();
 
-    if (!isProduction) console.log("render Main")
+    if (!isProduction) console.log("render AppBody")
     return (
         <AppShell
             styles={{
                 main: {
-                    paddingLeft: !leftSideBar ? "1rem" : '',
+                    paddingLeft: !isLeftSideBarVisible ? "1rem" : '',
-                    paddingRight: !rightSideBar ? '1rem' : '',
+                    paddingRight: !isRightSideBarVisible ? '1rem' : '',
                     background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
                 },
             }}
@@ -63,4 +61,4 @@ const AppBody = () => {
     )
 };
 
-export default observer(AppBody);
+export default AppBody;

src/pages/MainPage.tsx

@@ -115,7 +115,7 @@ const MainPage = () => {
                 justify='center'
             >
                 <ClearableTextInput
-                    clerable
+                    clearable
                     maw={400}
                     style={{ flexGrow: 1 }}
                     placeholder={t('search')}

src/shared/components/images/AutoUpdatedImage.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { Flex, Image, Text } from "@mantine/core";
-import { CameraConfig } from "../../../types/frigateConfig";
-import { Flex, Text, Image } from "@mantine/core";
-import { useQuery } from "@tanstack/react-query";
-import { frigateApi, proxyApi } from "../../../services/frigate.proxy/frigate.api";
 import { useIntersection } from "@mantine/hooks";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { proxyApi } from "../../../services/frigate.proxy/frigate.api";
+import { CameraConfig } from "../../../types/frigateConfig";
+import { isProduction } from "../../env.const";
 import CogwheelLoader from "../loaders/CogwheelLoader";
-import RetryError from "../RetryError";
 
 interface AutoUpdatedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   className?: string;
@@ -26,10 +26,13 @@ const AutoUpdatedImage = ({
 
   const { data: imageBlob, refetch, isPending, isError } = useQuery({
     queryKey: [imageUrl],
-    queryFn: () => proxyApi.getImageFrigate(imageUrl, 522),
+    queryFn: () => {
+      if (enabled) return proxyApi.getImageFrigate(imageUrl, 522)
+      return null
+    },
     staleTime: 60 * 1000,
     gcTime: 5 * 60 * 1000,
-    refetchInterval: isVisible ? 30 * 1000 : undefined,
+    refetchInterval: isVisible ? 60 * 1000 : undefined,
     retry: 1,
   });
 
@@ -55,14 +58,15 @@ const AutoUpdatedImage = ({
     }
   }, [imageBlob])
 
+  if (!enabled) return <Text align="center">Camera is disabled in config, no stream or snapshot available!</Text>
+
   if (isPending || !imageSrc) return <CogwheelLoader />
 
+  if (!isProduction) console.log('AutoUpdatedImage rendered')
+
   return (
     <Flex direction="column" justify="center" h="100%">
-      {enabled ? <Image ref={ref} src={imageSrc} alt="Dynamic Content" {...rest} withPlaceholder />
+      <Image ref={ref} src={imageSrc} alt="Dynamic Content" {...rest} withPlaceholder />
-        :
-        <Text align="center">Camera is disabled in config, no stream or snapshot available!</Text>
-      }
     </Flex>)
 };
 

src/shared/components/inputs/ClearableTextInput.tsx

@@ -1,18 +1,24 @@
 import { CloseButton, TextInput, TextInputProps } from '@mantine/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface ClearableTextInputProps extends TextInputProps {
-    clerable?: boolean
+    clearable?: boolean
 }
 
 
 const ClearableTextInput: React.FC<ClearableTextInputProps> = ({
     value,
     onChange,
-    clerable,
+    clearable,
     ...textInputProps
 }) => {
-    const [text, setText] = useState(value)
+    const [text, setText] = useState(value || '')
+
+    useEffect(() => {
+        if (value !== undefined) {
+          setText(value);
+        }
+      }, [value]);
 
     const handleClear = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         setText('')
@@ -32,7 +38,7 @@ const ClearableTextInput: React.FC<ClearableTextInputProps> = ({
 
     return (
         <TextInput
-            rightSection={clerable ? <CloseButton onClick={handleClear} /> : null}
+            rightSection={clearable ? <CloseButton onClick={handleClear} /> : null}
             value={text}
             onChange={handleChange}
             {...textInputProps}

src/shared/stores/main.store.ts

@@ -34,19 +34,25 @@ export class MainStore {
     }
 
     setHostId(hostId: string, navigate: (path: string, options?: NavigateOptions) => void) {
-        this.filters.hostId = hostId;
+        if (hostId !== this.filters.hostId) {
-        this.updateURL(navigate)
+            this.filters.hostId = hostId;
+            this.updateURL(navigate)
+        }
     }
 
     setSearchQuery(searchQuery: string, navigate: (path: string, options?: NavigateOptions) => void) {
-        this.filters.searchQuery = searchQuery;
+        if (searchQuery !== this.filters.searchQuery) {
-        this.updateURL(navigate)
+            this.filters.searchQuery = searchQuery;
+            this.updateURL(navigate)
+        }
     }
 
     setSelectedTags(selectedTags: string[], navigate: (path: string, options?: NavigateOptions) => void) {
-        if (!isProduction) console.log('MainPage set filters.selectedTags ', selectedTags)
+        if (selectedTags !== this.filters.selectedTags) {
-        this.filters.selectedTags = selectedTags ? selectedTags : []
+            if (!isProduction) console.log('MainPage set filters.selectedTags ', selectedTags)
-        this.updateURL(navigate)
+            this.filters.selectedTags = selectedTags ? selectedTags : []
+            this.updateURL(navigate)
+        }
     }
 
     getArrayParam = (key: string): string[] => {