diff --git a/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx b/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx index 273a2241..c95920e7 100644 --- a/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx +++ b/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx @@ -9,10 +9,13 @@ import { Paper, Tooltip, } from "@mui/material"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; import { useGetHomesecStatusQuery } from "../../../Services/homesecApi"; +import { getErrorMessage } from "../../../Utils/getErrorMessage"; +import { useAppDispatch } from "../../../store"; import ErrorRetry from "../ErrorRetry/ErrorRetry"; import LoadingDot from "../LoadingDot/LoadingDot"; +import { logError } from "../LogCard/logSlice"; import SimpleHomeSecListItem from "./SimpleHomeSecListItem"; const statusClass: Record = { @@ -29,9 +32,24 @@ const typeIcon: Record = { "Remote Controller": "settings_remote", }; +const UPDATE_INTERVAL_MS = 120000; + export const HomeSec: FC = () => { - const { data, isLoading, isFetching, isError, refetch } = - useGetHomesecStatusQuery(undefined); + const [isSkippingBecauseError, setIsSkippingBecauseError] = useState(false); + const dispatch = useAppDispatch(); + const { data, isLoading, isFetching, isError, error, refetch } = + useGetHomesecStatusQuery(undefined, { + pollingInterval: isSkippingBecauseError + ? undefined + : UPDATE_INTERVAL_MS, + }); + + useEffect(() => { + if (error) { + setIsSkippingBecauseError(true); + dispatch(logError(`HomeSec failed: ${getErrorMessage(error)}`)); + } + }, [dispatch, error]); const hasNoDevices = !isError && @@ -49,7 +67,10 @@ export const HomeSec: FC = () => { borderColor: statusClass[data?.status ?? "Error"], }} > - + {isError && ( refetch()}> HomeSec could not load diff --git a/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx b/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx index fecca696..80597a88 100644 --- a/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx +++ b/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx @@ -3,10 +3,11 @@ import { FC, useEffect, useState } from "react"; const SLOW_UPDATE_MS = 1000; // if the response takes longer than 1000ms, it is considered slow and the full progress bar is shown -const LoadingDot: FC<{ isLoading: boolean; noMargin?: boolean }> = ({ - isLoading, - noMargin = false, -}) => { +const LoadingDot: FC<{ + isLoading: boolean; + noMargin?: boolean; + slowUpdateMs?: number; +}> = ({ isLoading, noMargin = false, slowUpdateMs = SLOW_UPDATE_MS }) => { const [isSlow, setIsSlow] = useState(false); useEffect(() => { @@ -16,14 +17,14 @@ const LoadingDot: FC<{ isLoading: boolean; noMargin?: boolean }> = ({ setIsSlow(false); timer = setTimeout(() => { setIsSlow(true); - }, SLOW_UPDATE_MS); + }, slowUpdateMs); } return () => { if (timer) { clearTimeout(timer); } }; - }, [isLoading]); + }, [isLoading, slowUpdateMs]); return (