type KeyRecordsProviderProps = {
children: ReactElement;
};
export const KeyRecordsProvider = (props: KeyRecordsProviderProps) => {
const { children } = props;
const { page } = usePagination();
const {
data: keyRecords = [],
isLoading,
isError,
} = useQuery(["keyRecords", page], () => getKeyRecords(page));
// State of the form list of key records (editable list of forms in the UI, one form per key record)
const [keyRecordsFormState, setKeyRecordsFormState] = useState<KeyRecord[]>(
[]
);
useEffect(() => {
if (!isLoading) {
// When the key records have been fetched from the backend, assign the value to the form state
setKeyRecordsFormState(keyRecords);
}
}, [isLoading]);
return (
<KeyRecordsContext.Provider
value={{
isError,
isLoading,
keyRecordsFormState,
}}
>
{children}
</KeyRecordsContext.Provider>
);
};
type KeyRecordsProviderProps = {
children: ReactElement;
};
export const KeyRecordsProvider = (props: KeyRecordsProviderProps) => {
const { children } = props;
const { page } = usePagination();
const {
data: keyRecords = [],
isLoading,
isError,
} = useQuery(["keyRecords", page], () => getKeyRecords(page));
// State of the form list of key records (editable list of forms in the UI, one form per key record)
const [keyRecordsFormState, setKeyRecordsFormState] = useState<KeyRecord[]>(
[]
);
useEffect(() => {
if (!isLoading) {
// When the key records have been fetched from the backend, assign the value to the form state
setKeyRecordsFormState(keyRecords);
}
}, [isLoading]);
return (
<KeyRecordsContext.Provider
value={{
isError,
isLoading,
keyRecordsFormState,
}}
>
{children}
</KeyRecordsContext.Provider>
);
};