Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/homesec #82

Merged
merged 18 commits into from
Apr 16, 2024
Merged
Prev Previous commit
Next Next commit
chore: refactor loading dot
mdvanes committed Apr 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 8a2698563e457f4a9e15671ff36b5132ea1ba0bb
29 changes: 25 additions & 4 deletions apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx
Original file line number Diff line number Diff line change
@@ -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<HomesecStatusResponse["status"] | "Error", string> = {
@@ -29,9 +32,24 @@ const typeIcon: Record<TypeF, string> = {
"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"],
}}
>
<LoadingDot isLoading={isLoading || isFetching} />
<LoadingDot
isLoading={isLoading || isFetching}
slowUpdateMs={6000}
/>
{isError && (
<ErrorRetry marginate retry={() => refetch()}>
HomeSec could not load
13 changes: 7 additions & 6 deletions apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Box