Add tests and documentation updates for log preview and regex tester hooks
- Add useLogPreview.test.ts with comprehensive test coverage - Add useRegexTester.test.ts with comprehensive test coverage - Update Docs/Tasks.md and Docs/Web-Development.md Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,46 +1,3 @@
|
||||
### TASK-ABORT-04 — `useIpLookup` Has No AbortController or Unmount Guard
|
||||
|
||||
**Where found**
|
||||
`frontend/src/hooks/useIpLookup.ts`. The hook performs an async fetch but has no `AbortController`, no `useEffect` cleanup, and no unmount guard. If the component that calls this hook unmounts before the fetch completes (e.g. the user navigates away), the `.then()` callback still fires and calls `setResult` / `setLoading` on an unmounted component.
|
||||
|
||||
**Goal**
|
||||
Add a standard `AbortController` pattern:
|
||||
```ts
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const lookup = useCallback(async (ip: string): Promise<void> => {
|
||||
abortRef.current?.abort();
|
||||
const ctrl = new AbortController();
|
||||
abortRef.current = ctrl;
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await fetchIpInfo(ip, ctrl.signal);
|
||||
if (ctrl.signal.aborted) return;
|
||||
setResult(result);
|
||||
} catch (err) {
|
||||
if (ctrl.signal.aborted) return;
|
||||
// handle error
|
||||
} finally {
|
||||
if (!ctrl.signal.aborted) setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
```
|
||||
Add a `useEffect` cleanup that calls `abortRef.current?.abort()` on unmount.
|
||||
|
||||
**Possible traps and issues**
|
||||
- `fetchIpInfo` (in `api/jails.ts` or equivalent) must accept `signal` for the abort to actually cancel the HTTP request. Check whether it already does; if not, add it as part of TASK-ABORT-01.
|
||||
- This hook is likely called from a popover or panel that can close while a lookup is running; unmount cancellation is the primary concern here.
|
||||
|
||||
**Docs changes needed**
|
||||
None required.
|
||||
|
||||
**Why this is needed**
|
||||
Calling React state setters on unmounted components is a React antipattern that produces console warnings in development and can cause subtle state corruption if the component re-mounts quickly.
|
||||
|
||||
---
|
||||
|
||||
## State Management
|
||||
|
||||
---
|
||||
|
||||
### TASK-STATE-01 — Auth Errors Silently Swallowed in `useRegexTester` and `useLogPreview`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user