calcom/lib/hooks/QueryCell.tsx

55 lines
1.7 KiB
TypeScript
Raw Normal View History

import {
QueryObserverIdleResult,
QueryObserverLoadingErrorResult,
QueryObserverLoadingResult,
QueryObserverRefetchErrorResult,
QueryObserverSuccessResult,
UseQueryResult,
} from "react-query";
import Loader from "@components/Loader";
import { Alert } from "@components/ui/Alert";
type ErrorLike = {
message: string;
};
interface QueryCellOptions<TData, TError extends ErrorLike> {
query: UseQueryResult<TData, TError>;
success: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
error?: (
query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
) => JSX.Element;
loading?: (query: QueryObserverLoadingResult<TData, TError>) => JSX.Element;
idle?: (query: QueryObserverIdleResult<TData, TError>) => JSX.Element;
/**
* If there's no data (`null`, `undefined`, or `[]`), render this component
*/
empty?: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
}
export function QueryCell<TData, TError extends ErrorLike>(opts: QueryCellOptions<TData, TError>) {
const { query } = opts;
if (query.status === "success") {
if (opts.empty && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
return opts.empty(query);
}
return opts.success(query);
}
if (query.status === "error") {
return (
opts.error?.(query) ?? (
<Alert severity="error" title="Something went wrong" message={query.error.message} />
)
);
}
if (query.status === "loading") {
return opts.loading?.(query) ?? <Loader />;
}
if (query.status === "idle") {
return null;
}
// impossible state
return null;
}