add `<QueryCell />` to remove bespoke loading/error/empty/success logic (#835)

lib/hooks/QueryCell.tsx

@@ -0,0 +1,54 @@
+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;
+}

pages/bookings/[status].tsx

@@ -1,14 +1,13 @@
 import { CalendarIcon } from "@heroicons/react/outline";
 import { useRouter } from "next/router";
 
+import { QueryCell } from "@lib/hooks/QueryCell";
 import { inferQueryInput, trpc } from "@lib/trpc";
 
 import BookingsShell from "@components/BookingsShell";
 import EmptyScreen from "@components/EmptyScreen";
-import Loader from "@components/Loader";
 import Shell from "@components/Shell";
 import BookingListItem from "@components/booking/BookingListItem";
-import { Alert } from "@components/ui/Alert";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
 
@@ -16,7 +15,6 @@ export default function Bookings() {
   const router = useRouter();
   const status = router.query?.status as BookingListingStatus;
   const query = trpc.useQuery(["viewer.bookings", { status }]);
-  const bookings = query.data;
 
   return (
     <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
@@ -24,28 +22,27 @@ export default function Bookings() {
         <div className="-mx-4 sm:mx-auto flex flex-col">
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-              {query.status === "error" && (
+              <QueryCell
-                <Alert severity="error" title="Something went wrong" message={query.error.message} />
+                query={query}
-              )}
+                success={({ data }) => (
-              {query.status === "loading" && <Loader />}
-              {bookings &&
-                (bookings.length === 0 ? (
-                  <EmptyScreen
-                    Icon={CalendarIcon}
-                    headline="No upcoming bookings, yet"
-                    description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
-                  />
-                ) : (
                   <div className="my-6 border border-gray-200 overflow-hidden border-b rounded-sm">
                     <table className="min-w-full divide-y divide-gray-200">
                       <tbody className="bg-white divide-y divide-gray-200" data-testid="bookings">
-                        {bookings.map((booking) => (
+                        {data.map((booking) => (
                           <BookingListItem key={booking.id} {...booking} />
                         ))}
                       </tbody>
                     </table>
                   </div>
-                ))}
+                )}
+                empty={() => (
+                  <EmptyScreen
+                    Icon={CalendarIcon}
+                    headline={`No upcoming bookings, yet`}
+                    description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
+                  />
+                )}
+              />
             </div>
           </div>
         </div>