Bookings UI improvements (#826)

components/booking/BookingListItem.tsx

@@ -0,0 +1,130 @@
+import { BanIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
+import { BookingStatus } from "@prisma/client";
+import dayjs from "dayjs";
+import { useMutation } from "react-query";
+
+import { HttpError } from "@lib/core/http/error";
+import { inferQueryOutput, trpc } from "@lib/trpc";
+
+import TableActions from "@components/ui/TableActions";
+
+type BookingItem = inferQueryOutput<"viewer.bookings">[number];
+
+function BookingListItem(booking: BookingItem) {
+  const utils = trpc.useContext();
+  const mutation = useMutation(
+    async (confirm: boolean) => {
+      const res = await fetch("/api/book/confirm", {
+        method: "PATCH",
+        body: JSON.stringify({ id: booking.id, confirmed: confirm }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (!res.ok) {
+        throw new HttpError({ statusCode: res.status });
+      }
+    },
+    {
+      async onSettled() {
+        await utils.invalidateQuery(["viewer.bookings"]);
+      },
+    }
+  );
+  const isUpcoming = new Date(booking.endTime) >= new Date();
+  const isCancelled = booking.status === BookingStatus.CANCELLED;
+
+  const pendingActions = [
+    {
+      id: "reject",
+      label: "Reject",
+      onClick: () => mutation.mutate(false),
+      icon: BanIcon,
+      disabled: mutation.isLoading,
+    },
+    {
+      id: "confirm",
+      label: "Confirm",
+      onClick: () => mutation.mutate(true),
+      icon: CheckIcon,
+      disabled: mutation.isLoading,
+      color: "primary",
+    },
+  ];
+
+  const bookedActions = [
+    {
+      id: "cancel",
+      label: "Cancel",
+      href: `/cancel/${booking.uid}`,
+      icon: XIcon,
+    },
+    {
+      id: "reschedule",
+      label: "Reschedule",
+      href: `/reschedule/${booking.uid}`,
+      icon: ClockIcon,
+    },
+  ];
+
+  const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
+
+  return (
+    <tr>
+      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
+        <div className="text-sm text-gray-900">{startTime}</div>
+        {!booking.confirmed && !booking.rejected && (
+          <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
+            Unconfirmed
+          </span>
+        )}
+      </td>
+      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
+        <div className="text-sm text-gray-500">
+          {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+        </div>
+      </td>
+      <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
+        <div className="sm:hidden">
+          {!booking.confirmed && !booking.rejected && (
+            <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
+              Unconfirmed
+            </span>
+          )}
+          <div className="text-sm text-gray-900 font-medium">
+            {startTime}:{" "}
+            <small className="text-sm text-gray-500">
+              {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+            </small>
+          </div>
+        </div>
+        <div className="text-sm text-neutral-900 font-medium  truncate max-w-60 md:max-w-96">
+          {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
+          {booking.title}
+        </div>
+        {booking.description && (
+          <div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96">
+            &quot;{booking.description}&quot;
+          </div>
+        )}
+        {booking.attendees.length !== 0 && (
+          <div className="text-sm text-blue-500">
+            <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
+          </div>
+        )}
+      </td>
+
+      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+        {isUpcoming && !isCancelled ? (
+          <>
+            {!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
+            {booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
+            {!booking.confirmed && booking.rejected && <div className="text-sm text-gray-500">Rejected</div>}
+          </>
+        ) : null}
+      </td>
+    </tr>
+  );
+}
+
+export default BookingListItem;

components/ui/TableActions.tsx

@@ -12,6 +12,7 @@ type ActionType = {
   icon: SVGComponent;
   label: string;
   disabled?: boolean;
+  color?: "primary" | "secondary";
 } & ({ href?: never; onClick: () => any } | { href: string; onClick?: never });
 
 interface Props {
@@ -30,7 +31,7 @@ const TableActions: FC<Props> = ({ actions }) => {
             onClick={action.onClick}
             StartIcon={action.icon}
             disabled={action.disabled}
-            color="secondary">
+            color={action.color || "secondary"}>
             {action.label}
           </Button>
         ))}

pages/bookings/[status].tsx

@@ -1,140 +1,22 @@
-// TODO: replace headlessui with radix-ui
+import { CalendarIcon } from "@heroicons/react/outline";
-import { BanIcon, CalendarIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
-import { BookingStatus } from "@prisma/client";
-import dayjs from "dayjs";
 import { useRouter } from "next/router";
-import { useMutation } from "react-query";
 
-import { HttpError } from "@lib/core/http/error";
+import { inferQueryInput, trpc } from "@lib/trpc";
-import { inferQueryOutput, 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";
-import TableActions from "@components/ui/TableActions";
 
-type BookingItem = inferQueryOutput<"viewer.bookings">[number];
+type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
-
-function BookingListItem(booking: BookingItem) {
-  const utils = trpc.useContext();
-  const mutation = useMutation(
-    async (confirm: boolean) => {
-      const res = await fetch("/api/book/confirm", {
-        method: "PATCH",
-        body: JSON.stringify({ id: booking.id, confirmed: confirm }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      if (!res.ok) {
-        throw new HttpError({ statusCode: res.status });
-      }
-    },
-    {
-      async onSettled() {
-        await utils.invalidateQuery(["viewer.bookings"]);
-      },
-    }
-  );
-  const isUpcoming = new Date(booking.endTime) >= new Date();
-  const isCancelled = booking.status === BookingStatus.CANCELLED;
-
-  const pendingActions = [
-    {
-      id: "confirm",
-      label: "Confirm",
-      onClick: () => mutation.mutate(true),
-      icon: CheckIcon,
-      disabled: mutation.isLoading,
-    },
-    {
-      id: "reject",
-      label: "Reject",
-      onClick: () => mutation.mutate(false),
-      icon: BanIcon,
-      disabled: mutation.isLoading,
-    },
-  ];
-
-  const bookedActions = [
-    {
-      id: "cancel",
-      label: "Cancel",
-      href: `/cancel/${booking.uid}`,
-      icon: XIcon,
-    },
-    {
-      id: "reschedule",
-      label: "Reschedule",
-      href: `/reschedule/${booking.uid}`,
-      icon: ClockIcon,
-    },
-  ];
-
-  return (
-    <tr>
-      <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
-        {!booking.confirmed && !booking.rejected && (
-          <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
-            Unconfirmed
-          </span>
-        )}
-        <div className="text-sm text-neutral-900 font-medium  truncate max-w-60 md:max-w-96">
-          {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
-          {booking.title}
-        </div>
-        <div className="sm:hidden">
-          <div className="text-sm text-gray-900">
-            {dayjs(booking.startTime).format("D MMMM YYYY")}:{" "}
-            <small className="text-sm text-gray-500">
-              {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-            </small>
-          </div>
-        </div>
-        {booking.description && (
-          <div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96">
-            &quot;{booking.description}&quot;
-          </div>
-        )}
-        {booking.attendees.length !== 0 && (
-          <div className="text-sm text-blue-500">
-            <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
-          </div>
-        )}
-      </td>
-      <td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
-        <div className="text-sm text-gray-900">{dayjs(booking.startTime).format("D MMMM YYYY")}</div>
-        <div className="text-sm text-gray-500">
-          {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-        </div>
-      </td>
-      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-        {isUpcoming && !isCancelled ? (
-          <>
-            {!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
-            {booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
-            {!booking.confirmed && booking.rejected && <div className="text-sm text-gray-500">Rejected</div>}
-          </>
-        ) : null}
-      </td>
-    </tr>
-  );
-}
 
 export default function Bookings() {
   const router = useRouter();
-  const query = trpc.useQuery(["viewer.bookings"]);
+  const status = router.query?.status as BookingListingStatus;
-  const filtersByStatus = {
+  const query = trpc.useQuery(["viewer.bookings", { status }]);
-    upcoming: (booking: BookingItem) =>
+  const bookings = query.data;
-      new Date(booking.endTime) >= new Date() && booking.status !== BookingStatus.CANCELLED,
-    past: (booking: BookingItem) => new Date(booking.endTime) < new Date(),
-    cancelled: (booking: BookingItem) => booking.status === BookingStatus.CANCELLED,
-  } as const;
-  const filterKey = (router.query?.status as string as keyof typeof filtersByStatus) || "upcoming";
-  const appliedFilter = filtersByStatus[filterKey];
-  const bookings = query.data?.filter(appliedFilter);
 
   return (
     <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">

server/routers/viewer.tsx

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { Prisma, BookingStatus } from "@prisma/client";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
@@ -20,8 +20,25 @@ export const viewerRouter = createProtectedRouter()
     },
   })
   .query("bookings", {
-    async resolve({ ctx }) {
+    input: z.object({
+      status: z.enum(["upcoming", "past", "cancelled"]).optional(),
+    }),
+    async resolve({ ctx, input }) {
       const { prisma, user } = ctx;
+      const bookingListingByStatus = input.status || "upcoming";
+      const bookingListingFilters: Record<typeof bookingListingByStatus, Prisma.BookingWhereInput[]> = {
+        upcoming: [{ endTime: { gte: new Date() } }],
+        past: [{ endTime: { lte: new Date() } }],
+        cancelled: [{ status: { equals: BookingStatus.CANCELLED } }],
+      };
+      const bookingListingOrderby: Record<typeof bookingListingByStatus, Prisma.BookingOrderByInput> = {
+        upcoming: { startTime: "desc" },
+        past: { startTime: "asc" },
+        cancelled: { startTime: "asc" },
+      };
+      const passedBookingsFilter = bookingListingFilters[bookingListingByStatus];
+      const orderBy = bookingListingOrderby[bookingListingByStatus];
+
       const bookingsQuery = await prisma.booking.findMany({
         where: {
           OR: [
@@ -36,6 +53,7 @@ export const viewerRouter = createProtectedRouter()
               },
             },
           ],
+          AND: passedBookingsFilter,
         },
         select: {
           uid: true,
@@ -58,9 +76,7 @@ export const viewerRouter = createProtectedRouter()
           },
           status: true,
         },
-        orderBy: {
+        orderBy,
-          startTime: "asc",
-        },
       });
 
       const bookings = bookingsQuery.reverse().map((booking) => {