forked from mirrors/thatmattlove-hyperglass
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { getHyperglassConfig } from '~/util';
|
|
|
|
import type { UseQueryResult } from 'react-query';
|
|
import type { ConfigLoadError } from '~/util';
|
|
import type { Config } from '~/types';
|
|
|
|
type UseHyperglassConfig = UseQueryResult<Config, ConfigLoadError> & {
|
|
/**
|
|
* Initial configuration load has failed.
|
|
*/
|
|
initFailed: boolean;
|
|
|
|
/**
|
|
* If `true`, the initial loading component should be rendered.
|
|
*/
|
|
isLoadingInitial: boolean;
|
|
|
|
/**
|
|
* If `true`, an error component should be rendered.
|
|
*/
|
|
showError: boolean;
|
|
|
|
/**
|
|
* Data has been loaded and there are no errors.
|
|
*/
|
|
ready: boolean;
|
|
};
|
|
|
|
/**
|
|
* Retrieve and cache hyperglass's UI configuration from the hyperglass API.
|
|
*/
|
|
export function useHyperglassConfig(): UseHyperglassConfig {
|
|
// Track whether or not the initial configuration load has failed. If it has not (default), the
|
|
// UI will display the `<Loading/>` component. If it has failed, the `<LoadError/>` component
|
|
// will be displayed, which will also show the loading state.
|
|
const [initFailed, setInitFailed] = useState<boolean>(false);
|
|
|
|
const query = useQuery<Config, ConfigLoadError>({
|
|
queryKey: 'hyperglass-ui-config',
|
|
queryFn: getHyperglassConfig,
|
|
refetchOnWindowFocus: false,
|
|
refetchInterval: 10000,
|
|
cacheTime: Infinity,
|
|
onError: () => {
|
|
if (!initFailed) {
|
|
setInitFailed(true);
|
|
}
|
|
},
|
|
onSuccess: () => {
|
|
if (initFailed) {
|
|
setInitFailed(false);
|
|
}
|
|
},
|
|
});
|
|
const isLoadingInitial = !initFailed && query.isLoading && !query.isError;
|
|
const showError = query.isError || (initFailed && query.isLoading);
|
|
const ready = query.isSuccess && !query.isLoading;
|
|
return { initFailed, isLoadingInitial, showError, ready, ...query };
|
|
}
|