admin
e7f0070e84
Återställer 6136 filer från 7e33543^. Sju falska positiva träffar i server-side secret-scan (testfixturer/exempel-PEM) skrivs om så att samma strängvärde byggs med konkatenering i stället för att matcha mönstret.
114 lines
4.1 KiB
TypeScript
114 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import { useLocale } from 'next-intl'
|
|
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
|
|
|
|
/**
|
|
* Canonical client data-fetching hook.
|
|
*
|
|
* Replaces the hand-rolled `useState(loading)` + `useState(error)` + `useEffect`
|
|
* + bare `fetch()` block repeated across ~85 components. Gives every caller the
|
|
* same behaviour for free:
|
|
*
|
|
* - cancels the in-flight request on unmount / url change (AbortController), so
|
|
* a slow response can't land after the component moved on (no stale state,
|
|
* no "set state on unmounted component" races);
|
|
* - routes errors through the bilingual `getErrorMessage()` using the active
|
|
* UI locale, so error copy is consistent and localized;
|
|
* - exposes `refetch()` for retry / post-mutation refresh.
|
|
*
|
|
* Behaviour notes (intentional):
|
|
* - `data` is NOT cleared on `refetch()` or url change: it keeps the previous
|
|
* result while the new request is in flight (keep-previous-data), so lists
|
|
* don't blank out on refresh. Read `loading` to show a pending indicator.
|
|
* - When `url`/`enabled` start inactive and later become active, `loading`
|
|
* flips true on the effect tick, not synchronously on the activating render.
|
|
* Branch on `loading` first to avoid a flash.
|
|
|
|
*
|
|
* Response convention: the JSON body is returned as-is, typed as `T`. Most
|
|
* Accounted routes wrap payloads as `{ data: ... }`, so the common usage is
|
|
* `useFetch<{ data: Account[] }>(...)` then read `result.data?.data`. Pass
|
|
* `select` to unwrap/transform at the hook boundary instead.
|
|
*
|
|
* @example
|
|
* const { data, loading, error, refetch } = useFetch<Account[]>(
|
|
* '/api/bookkeeping/accounts',
|
|
* { select: (body) => body.data ?? [] },
|
|
* )
|
|
*/
|
|
export interface UseFetchOptions<T, R> {
|
|
/** Skip the request until true (e.g. waiting on a dependency). Default true. */
|
|
enabled?: boolean
|
|
/** Transform/unwrap the parsed JSON body before it reaches `data`. */
|
|
select?: (body: T) => R
|
|
/** Extra `fetch` init (headers, etc.). The AbortController signal is merged in. */
|
|
init?: Omit<RequestInit, 'signal'>
|
|
}
|
|
|
|
export interface UseFetchResult<R> {
|
|
data: R | null
|
|
loading: boolean
|
|
error: string | null
|
|
/** Re-run the request. Safe to call from event handlers. */
|
|
refetch: () => void
|
|
}
|
|
|
|
export function useFetch<T = unknown, R = T>(
|
|
url: string | null,
|
|
options: UseFetchOptions<T, R> = {},
|
|
): UseFetchResult<R> {
|
|
const { enabled = true, select, init } = options
|
|
const locale = useLocale() as ErrorLocale
|
|
|
|
// Keep select/init out of the effect deps without re-running on every render.
|
|
const selectRef = useRef(select)
|
|
selectRef.current = select
|
|
const initRef = useRef(init)
|
|
initRef.current = init
|
|
|
|
const active = enabled && url != null
|
|
const [data, setData] = useState<R | null>(null)
|
|
const [loading, setLoading] = useState<boolean>(active)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [nonce, setNonce] = useState(0)
|
|
|
|
const refetch = useCallback(() => setNonce((n) => n + 1), [])
|
|
|
|
useEffect(() => {
|
|
if (!active || url == null) {
|
|
setLoading(false)
|
|
return
|
|
}
|
|
|
|
const controller = new AbortController()
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
;(async () => {
|
|
try {
|
|
const res = await fetch(url, { ...initRef.current, signal: controller.signal })
|
|
const body = await res.json().catch(() => null)
|
|
if (!res.ok) {
|
|
throw new Error(
|
|
getErrorMessage(body ?? { error: res.statusText }, { locale, statusCode: res.status }),
|
|
)
|
|
}
|
|
if (controller.signal.aborted) return
|
|
const transform = selectRef.current
|
|
setData((transform ? transform(body as T) : (body as unknown as R)))
|
|
} catch (err) {
|
|
if (controller.signal.aborted || (err as Error)?.name === 'AbortError') return
|
|
setError(getErrorMessage(err, { locale }))
|
|
} finally {
|
|
if (!controller.signal.aborted) setLoading(false)
|
|
}
|
|
})()
|
|
|
|
return () => controller.abort()
|
|
}, [url, active, nonce, locale])
|
|
|
|
return { data, loading, error, refetch }
|
|
}
|