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 = { type ErrorLike = {
message: string; message: string;
}; };
interface QueryCellOptions<TData, TError extends ErrorLike> {
interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
query: UseQueryResult<TData, TError>; query: UseQueryResult<TData, TError>;
success: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
error?: ( error?: (
query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError> query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
) => JSX.Element; ) => JSX.Element;
loading?: (query: QueryObserverLoadingResult<TData, TError>) => JSX.Element; loading?: (query: QueryObserverLoadingResult<TData, TError>) => JSX.Element;
idle?: (query: QueryObserverIdleResult<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 * 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; const { query } = opts;
if (query.status === "success") { 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.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") { if (query.status === "error") {
return ( return (

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

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