Tyler
87cd51e1fc
The previous static key={c.id} let React reuse the same <TableRow>
element across refetches, so animate-row-flash only played on
initial mount and on the first render of a brand-new claim_id.
Updated rows whose claim_id was unchanged never re-flashed.
Re-keying on `${c.id}-${dataUpdatedAt}` re-mounts the row on
every refetch (initial load, filter change, parse invalidation),
so the 1.2s accent-tint flash replays each time.
Also: README's 'Frontend unit tests (when added)' is stale — npm
test now exists and runs 3 passing tests.
hooks: add dataUpdatedAt: 0 to the !isConfigured fallback return
so the pages type-check.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useSyncExternalStore } from "react";
|
|
import { api, type ListRemittancesParams, type PaginatedResponse } from "@/lib/api";
|
|
import { useAppStore } from "@/store";
|
|
import type { Remittance } from "@/types";
|
|
|
|
/**
|
|
* Lists remittances. Falls back to the in-memory zustand store when no
|
|
* backend is configured; the fallback honors `offset` / `limit` and
|
|
* returns the full list otherwise.
|
|
*/
|
|
export function useRemittances(params: ListRemittancesParams) {
|
|
const fallback = useSyncExternalStore(
|
|
(cb) => useAppStore.subscribe(cb),
|
|
() => useAppStore.getState().remittances,
|
|
() => useAppStore.getState().remittances
|
|
);
|
|
|
|
const q = useQuery<PaginatedResponse<Remittance>>({
|
|
queryKey: ["remittances", params],
|
|
queryFn: () => api.listRemittances<Remittance>(params),
|
|
enabled: api.isConfigured,
|
|
});
|
|
|
|
if (!api.isConfigured) {
|
|
const offset = params.offset ?? 0;
|
|
const limit = params.limit ?? 100;
|
|
const sliced = fallback.slice(offset, offset + limit);
|
|
return {
|
|
data: {
|
|
items: sliced,
|
|
total: fallback.length,
|
|
returned: sliced.length,
|
|
has_more: fallback.length > offset + limit,
|
|
} satisfies PaginatedResponse<Remittance>,
|
|
isLoading: false,
|
|
isError: false,
|
|
error: null,
|
|
refetch: () => Promise.resolve(),
|
|
dataUpdatedAt: 0,
|
|
} as const;
|
|
}
|
|
return q;
|
|
}
|