Skip to content

Commit 39bae60

Browse files
committed
fix: move useCallback hook before early returns in QueryResults
- Fix React Hooks rules violation by moving useCallback before early returns - All hooks must be called at the top level, before any conditional returns - This fixes the CI/CD linting error
1 parent 97661de commit 39bae60

File tree

1 file changed

+24
-22
lines changed

1 file changed

+24
-22
lines changed

src/client/components/QueryResults.tsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,9 @@ export function QueryResults({ result, tab }: QueryResultsProps) {
2020
const [checkResults, setCheckResults] = useState<Record<string, HealthCheckResult>>({});
2121
const [checkSummary, setCheckSummary] = useState<{ total: number; alive: number; dead: number } | null>(null);
2222

23-
if (!result) return null;
24-
25-
if (result.error) {
26-
return (
27-
<div className="query-results">
28-
<div className="query-results-error">
29-
<span className="error-prefix">{t('common.error')}:</span>{' '}
30-
{result.errmsg || t('errors.unknown')}
31-
</div>
32-
</div>
33-
);
34-
}
35-
36-
const handleCopy = async () => {
37-
const text = JSON.stringify(result, null, 2);
38-
await navigator.clipboard.writeText(text);
39-
setCopied(true);
40-
setTimeout(() => setCopied(false), 2000);
41-
};
42-
43-
// Extract all hosts from results
23+
// Extract all hosts from results - must be before early returns
4424
const extractHosts = useCallback((): string[] => {
45-
if (!('results' in result) || !Array.isArray(result.results)) {
25+
if (!result || !('results' in result) || !Array.isArray(result.results)) {
4626
return [];
4727
}
4828

@@ -64,6 +44,28 @@ export function QueryResults({ result, tab }: QueryResultsProps) {
6444
return hosts;
6545
}, [result]);
6646

47+
const handleCopy = async () => {
48+
if (!result) return;
49+
const text = JSON.stringify(result, null, 2);
50+
await navigator.clipboard.writeText(text);
51+
setCopied(true);
52+
setTimeout(() => setCopied(false), 2000);
53+
};
54+
55+
// Early returns after all hooks
56+
if (!result) return null;
57+
58+
if (result.error) {
59+
return (
60+
<div className="query-results">
61+
<div className="query-results-error">
62+
<span className="error-prefix">{t('common.error')}:</span>{' '}
63+
{result.errmsg || t('errors.unknown')}
64+
</div>
65+
</div>
66+
);
67+
}
68+
6769
// Batch check all hosts
6870
const handleCheckAll = async () => {
6971
const hosts = extractHosts();

0 commit comments

Comments
 (0)