cal.pub0.org/pages/bookings/index.tsx

// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import { ClockIcon, CalendarIcon, XIcon, CheckIcon, BanIcon } from "@heroicons/react/outline";
import { DotsHorizontalIcon } from "@heroicons/react/solid";
import { BookingStatus, User } from "@prisma/client";
import dayjs from "dayjs";
import { useSession } from "next-auth/client";
import { useRouter } from "next/router";
import { Fragment } from "react";

import { getSession } from "@lib/auth";
import classNames from "@lib/classNames";
import prisma from "@lib/prisma";

import EmptyScreen from "@components/EmptyScreen";
import Loader from "@components/Loader";
import Shell from "@components/Shell";
import { Button } from "@components/ui/Button";

export default function Bookings({ bookings }) {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [session, loading] = useSession();

  const isEmpty = Object.keys(bookings).length === 0;

  const router = useRouter();

  if (loading) {
    return <Loader />;
  }

  async function confirmBookingHandler(booking, 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) {
      await router.replace(router.asPath);
    }
  }

  return (
    <div>
      <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
        <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">
              {isEmpty ? (
                <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="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
                        .filter((booking) => booking.status !== BookingStatus.CANCELLED)
                        .map((booking) => (
                          <tr key={booking.id}>
                            <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.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">
                              {!booking.confirmed && !booking.rejected && (
                                <>
                                  <div className="space-x-2 hidden lg:block">
                                    <Button
                                      onClick={() => confirmBookingHandler(booking, true)}
                                      StartIcon={CheckIcon}
                                      color="secondary">
                                      Confirm
                                    </Button>
                                    <Button
                                      onClick={() => confirmBookingHandler(booking, false)}
                                      StartIcon={BanIcon}
                                      color="secondary">
                                      Reject
                                    </Button>
                                  </div>
                                  <Menu as="div" className="inline-block lg:hidden text-left ">
                                    {({ open }) => (
                                      <>
                                        <div>
                                          <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
                                            <span className="sr-only">Open options</span>
                                            <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
                                          </Menu.Button>
                                        </div>
                                        <Transition
                                          show={open}
                                          as={Fragment}
                                          enter="transition ease-out duration-100"
                                          enterFrom="transform opacity-0 scale-95"
                                          enterTo="transform opacity-100 scale-100"
                                          leave="transition ease-in duration-75"
                                          leaveFrom="transform opacity-100 scale-100"
                                          leaveTo="transform opacity-0 scale-95">
                                          <Menu.Items
                                            static
                                            className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
                                            <div className="py-1">
                                              <Menu.Item>
                                                {({ active }) => (
                                                  <span
                                                    onClick={() => confirmBookingHandler(booking, true)}
                                                    className={classNames(
                                                      active
                                                        ? "bg-neutral-100 text-neutral-900"
                                                        : "text-neutral-700",
                                                      "group flex items-center px-4 py-2 text-sm font-medium"
                                                    )}>
                                                    <CheckIcon
                                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                                      aria-hidden="true"
                                                    />
                                                    Confirm
                                                  </span>
                                                )}
                                              </Menu.Item>
                                              <Menu.Item>
                                                {({ active }) => (
                                                  <span
                                                    onClick={() => confirmBookingHandler(booking, false)}
                                                    className={classNames(
                                                      active
                                                        ? "bg-neutral-100 text-neutral-900"
                                                        : "text-neutral-700",
                                                      "group flex items-center px-4 py-2 text-sm w-full font-medium"
                                                    )}>
                                                    <BanIcon
                                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                                      aria-hidden="true"
                                                    />
                                                    Reject
                                                  </span>
                                                )}
                                              </Menu.Item>
                                            </div>
                                          </Menu.Items>
                                        </Transition>
                                      </>
                                    )}
                                  </Menu>
                                </>
                              )}
                              {booking.confirmed && !booking.rejected && (
                                <>
                                  <div className="space-x-2 hidden lg:block">
                                    <Button
                                      data-testid="cancel"
                                      href={"/cancel/" + booking.uid}
                                      StartIcon={XIcon}
                                      color="secondary">
                                      Cancel
                                    </Button>
                                    <Button
                                      href={"reschedule/" + booking.uid}
                                      StartIcon={ClockIcon}
                                      color="secondary">
                                      Reschedule
                                    </Button>
                                  </div>
                                  <Menu as="div" className="inline-block lg:hidden text-left ">
                                    {({ open }) => (
                                      <>
                                        <div>
                                          <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
                                            <span className="sr-only">Open options</span>
                                            <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
                                          </Menu.Button>
                                        </div>

                                        <Transition
                                          show={open}
                                          as={Fragment}
                                          enter="transition ease-out duration-100"
                                          enterFrom="transform opacity-0 scale-95"
                                          enterTo="transform opacity-100 scale-100"
                                          leave="transition ease-in duration-75"
                                          leaveFrom="transform opacity-100 scale-100"
                                          leaveTo="transform opacity-0 scale-95">
                                          <Menu.Items
                                            static
                                            className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
                                            <div className="py-1">
                                              <Menu.Item>
                                                {({ active }) => (
                                                  <a
                                                    href={window.location.href + "/../cancel/" + booking.uid}
                                                    className={classNames(
                                                      active
                                                        ? "bg-neutral-100 text-neutral-900"
                                                        : "text-neutral-700",
                                                      "group flex items-center px-4 py-2 text-sm font-medium"
                                                    )}>
                                                    <XIcon
                                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                                      aria-hidden="true"
                                                    />
                                                    Cancel
                                                  </a>
                                                )}
                                              </Menu.Item>
                                              <Menu.Item>
                                                {({ active }) => (
                                                  <a
                                                    href={
                                                      window.location.href + "/../reschedule/" + booking.uid
                                                    }
                                                    className={classNames(
                                                      active
                                                        ? "bg-neutral-100 text-neutral-900"
                                                        : "text-neutral-700",
                                                      "group flex items-center px-4 py-2 text-sm w-full font-medium"
                                                    )}>
                                                    <ClockIcon
                                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
                                                      aria-hidden="true"
                                                    />
                                                    Reschedule
                                                  </a>
                                                )}
                                              </Menu.Item>
                                            </div>
                                          </Menu.Items>
                                        </Transition>
                                      </>
                                    )}
                                  </Menu>
                                </>
                              )}
                              {!booking.confirmed && booking.rejected && (
                                <div className="text-sm text-gray-500">Rejected</div>
                              )}
                            </td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      </Shell>
    </div>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return { redirect: { permanent: false, destination: "/auth/login" } };
  }

  const user: User = await prisma.user.findUnique({
    where: {
      id: session.user.id,
    },
    select: {
      email: true,
    },
  });

  const b = await prisma.booking.findMany({
    where: {
      OR: [
        {
          userId: session.user.id,
        },
        {
          attendees: {
            some: {
              email: user.email,
            },
          },
        },
      ],
    },
    select: {
      uid: true,
      title: true,
      description: true,
      attendees: true,
      confirmed: true,
      rejected: true,
      id: true,
      startTime: true,
      endTime: true,
      eventType: {
        select: {
          team: {
            select: {
              name: true,
            },
          },
        },
      },
      status: true,
    },
    orderBy: {
      startTime: "asc",
    },
  });

  const bookings = b.reverse().map((booking) => {
    return { ...booking, startTime: booking.startTime.toISOString(), endTime: booking.endTime.toISOString() };
  });

  return { props: { session, bookings } };
}