Kyoo/front/src/query/fetch.tsx
2025-07-15 00:11:28 +02:00

33 lines
870 B
TypeScript

import { type ReactElement, useLayoutEffect } from "react";
import { useSetError } from "~/providers/error-provider";
import { ErrorView } from "~/ui/errors/error";
import { type QueryIdentifier, useFetch } from "./query";
export const Fetch = <Data,>({
query,
Render,
Loader,
}: {
query: QueryIdentifier<Data>;
Render: (item: Data) => ReactElement | null;
Loader: () => ReactElement | null;
}): JSX.Element | null => {
const { data, isPaused, error } = useFetch(query);
const [setError] = useSetError("fetch");
useLayoutEffect(() => {
if (isPaused) {
setError({ key: "offline" });
}
if (error && (error.status === 401 || error.status === 403)) {
setError({ key: "unauthorized", error });
}
}, [error, isPaused, setError]);
if (error) {
return <ErrorView error={error} />;
}
if (!data) return <Loader />;
return <Render {...data} />;
};