mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

<QueryCell /> type inference improvement (#849)

Browse source 
* asserts that `query.data` is never `null` when using `<QueryCell />`
This commit is contained in:
Alex Johansson 2021-10-04 11:48:40 +02:00 committed by GitHub
parent f70d92df7e
commit abe4f38a5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
lib/hooks/QueryCell.tsx → lib/QueryCell.tsx
View file

@ -13,28 +13,47 @@ import { Alert } from "@components/ui/Alert";
type ErrorLike = {
message: string;
};
interface QueryCellOptions<TData, TError extends ErrorLike> {
interface QueryCellOptionsBase<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;
}
interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
extends QueryCellOptionsBase<TData, TError> {
success: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
}
interface QueryCellOptionsWithEmpty<TData, TError extends ErrorLike>
extends QueryCellOptionsBase<TData, TError> {
success: (query: QueryObserverSuccessResult<NonNullable<TData>, TError>) => JSX.Element;
/**
* If there's no data (`null`, `undefined`, or `[]`), render this component
*/
empty?: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
empty: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
}
export function QueryCell<TData, TError extends ErrorLike>(opts: QueryCellOptions<TData, TError>) {
export function QueryCell<TData, TError extends ErrorLike>(
opts: QueryCellOptionsWithEmpty<TData, TError>
): JSX.Element;
export function QueryCell<TData, TError extends ErrorLike>(
opts: QueryCellOptionsNoEmpty<TData, TError>
): JSX.Element;
export function QueryCell<TData, TError extends ErrorLike>(
opts: QueryCellOptionsNoEmpty<TData, TError> | QueryCellOptionsWithEmpty<TData, TError>
) {
const { query } = opts;
if (query.status === "success") {
if (opts.empty && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
return opts.empty(query);
}
return opts.success(query);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return opts.success(query as any);
}
if (query.status === "error") {
return (

2
pages/bookings/[status].tsx
View file

@ -1,7 +1,7 @@
import { CalendarIcon } from "@heroicons/react/outline";
import { useRouter } from "next/router";
import { QueryCell } from "@lib/hooks/QueryCell";
import { QueryCell } from "@lib/QueryCell";
import { inferQueryInput, trpc } from "@lib/trpc";
import BookingsShell from "@components/BookingsShell";