import React, { ReactNode } from "react"; import { QueryObserverIdleResult, QueryObserverLoadingErrorResult, QueryObserverLoadingResult, QueryObserverRefetchErrorResult, QueryObserverSuccessResult, UseQueryResult, } from "react-query"; import { Alert } from "@calcom/ui/Alert"; import { trpc } from "@lib/trpc"; import Loader from "@components/Loader"; import type { AppRouter } from "@server/routers/_app"; import type { TRPCClientErrorLike } from "@trpc/client"; import type { UseTRPCQueryOptions } from "@trpc/react"; // import type { inferProcedures } from "@trpc/react/src/createReactQueryHooks"; import type { inferHandlerInput, inferProcedureInput, inferProcedureOutput, ProcedureRecord, } from "@trpc/server"; type ErrorLike = { message: string; }; type JSXElementOrNull = JSX.Element | null; interface QueryCellOptionsBase { query: UseQueryResult; customLoader?: ReactNode; error?: ( query: QueryObserverLoadingErrorResult | QueryObserverRefetchErrorResult ) => JSXElementOrNull; loading?: (query: QueryObserverLoadingResult) => JSXElementOrNull; idle?: (query: QueryObserverIdleResult) => JSXElementOrNull; } interface QueryCellOptionsNoEmpty extends QueryCellOptionsBase { success: (query: QueryObserverSuccessResult) => JSXElementOrNull; } interface QueryCellOptionsWithEmpty extends QueryCellOptionsBase { success: (query: QueryObserverSuccessResult, TError>) => JSXElementOrNull; /** * If there's no data (`null`, `undefined`, or `[]`), render this component */ empty: (query: QueryObserverSuccessResult) => JSXElementOrNull; } export function QueryCell( opts: QueryCellOptionsWithEmpty ): JSXElementOrNull; export function QueryCell( opts: QueryCellOptionsNoEmpty ): JSXElementOrNull; export function QueryCell( opts: QueryCellOptionsNoEmpty | QueryCellOptionsWithEmpty ) { const { query } = opts; if (query.status === "success") { if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) { return opts.empty(query); } return opts.success(query as any); } if (query.status === "error") { return ( opts.error?.(query) ?? ( ) ); } const StatusLoader = opts.customLoader || ; // Fixes edge case where this can return null form query cell if (query.status === "loading") { return opts.loading?.(query) ?? StatusLoader; } if (query.status === "idle") { return opts.idle?.(query) ?? StatusLoader; } // impossible state return null; } type inferProcedures> = { [TPath in keyof TObj]: { input: inferProcedureInput; output: inferProcedureOutput; }; }; type TQueryValues = inferProcedures; type TQueries = AppRouter["_def"]["queries"]; type TError = TRPCClientErrorLike; const withQuery = ( pathAndInput: [path: TPath, ...args: inferHandlerInput], params?: UseTRPCQueryOptions ) => { return function WithQuery( opts: Omit< Partial> & QueryCellOptionsNoEmpty, "query" > ) { const query = trpc.useQuery(pathAndInput, params); return ; }; }; export { withQuery };