mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-10-19 13:00:38 -04:00
33 lines
870 B
TypeScript
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} />;
|
|
};
|