keycloak-scim/src/components/data-loader/DataLoader.tsx
Erik Jan de Wit 7f21d03bc2 changed asyncStateFetch to be it's own hook
it now cancels pending requests making sure we
don't leak memory + it makes for an nicer looking API
2021-05-18 14:35:09 +02:00

32 lines
737 B
TypeScript

import React, { DependencyList, useState } from "react";
import { Spinner } from "@patternfly/react-core";
import { useFetch } from "../../context/auth/AdminClient";
type DataLoaderProps<T> = {
loader: () => Promise<T>;
deps?: DependencyList;
children: ((arg: T) => any) | React.ReactNode;
};
export function DataLoader<T>(props: DataLoaderProps<T>) {
const [data, setData] = useState<T | undefined>();
useFetch(
() => props.loader(),
(result) => setData(result),
props.deps || []
);
if (data) {
if (props.children instanceof Function) {
return props.children(data);
}
return props.children;
}
return (
<div className="pf-u-text-align-center">
<Spinner />
</div>
);
}