fix(widgets): resolve hooks violations, stale state, and missing edit-mode guard
- Move hooks above early returns in system-disks, immich-carousel, media-transcoding - Add enabled flag to immich-carousel query when albumId is absent - Replace disconnected local state in ping-indicator with query cache setData - Stabilize docker timestamp with useMemo to prevent useTimeAgo flicker - Wrap releases results in useMemo with proper type narrowing - Hide refresh indicator during edit mode
This commit is contained in:
6 files changed
+30
-33
No files matched your search
@@ -1,7 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { IconCheck, IconX } from "@tabler/icons-react";
|
||||
|
||||
import type { RouterOutputs } from "@homarr/api";
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
|
||||
import { PingDot } from "./ping-dot";
|
||||
@@ -11,40 +9,33 @@ interface PingIndicatorProps {
|
||||
}
|
||||
|
||||
export const PingIndicator = ({ appId }: PingIndicatorProps) => {
|
||||
const { data: ping } = clientApi.widget.app.ping.useQuery(
|
||||
{
|
||||
id: appId,
|
||||
},
|
||||
{
|
||||
refetchOnMount: false,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
const { data: pingResult } = clientApi.widget.app.ping.useQuery(
|
||||
{ id: appId },
|
||||
{ refetchOnMount: false, refetchOnWindowFocus: false },
|
||||
);
|
||||
|
||||
const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["ping"] | undefined>(ping);
|
||||
|
||||
const utils = clientApi.useUtils();
|
||||
clientApi.widget.app.updatedPing.useSubscription(
|
||||
{ id: appId },
|
||||
{
|
||||
onData(data) {
|
||||
setPingResult(data);
|
||||
utils.widget.app.ping.setData({ id: appId }, data);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const current = pingResult ?? ping;
|
||||
if (!current) return null;
|
||||
if (!pingResult) return null;
|
||||
|
||||
const isError = "error" in current || current.statusCode >= 500;
|
||||
const isError = "error" in pingResult || pingResult.statusCode >= 500;
|
||||
|
||||
return (
|
||||
<PingDot
|
||||
icon={isError ? IconX : IconCheck}
|
||||
color={isError ? "red" : "green"}
|
||||
tooltip={
|
||||
"statusCode" in current
|
||||
? `${current.statusCode} - ${current.durationMs.toFixed(0)}ms`
|
||||
: current.error
|
||||
"statusCode" in pingResult
|
||||
? `${pingResult.statusCode} - ${pingResult.durationMs.toFixed(0)}ms`
|
||||
: pingResult.error
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user