Merge pull request #434 from joshsny/bugfix/cancel

Fix 500 error when trying to cancel a booking that was already cancelled.

pages/availability/troubleshoot.tsx

@@ -1,26 +1,22 @@
-import Head from "next/head";
-import Shell from "../../components/Shell";
-import { getSession, useSession } from "next-auth/client";
-import { useState } from "react";
+import Loader from "@components/Loader";
+import prisma from "@lib/prisma";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { GetServerSideProps } from "next";
-import prisma from "@lib/prisma";
-import Loader from "@components/Loader";
+import { getSession } from "next-auth/client";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import Shell from "../../components/Shell";
 
 dayjs.extend(utc);
 
 export default function Troubleshoot({ user }) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [session, loading] = useSession();
+  const [loading, setLoading] = useState(true);
   const [availability, setAvailability] = useState([]);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [selectedDate, setSelectedDate] = useState(dayjs());
 
-  if (loading) {
-    return <Loader />;
-  }
-
   function convertMinsToHrsMins(mins) {
     let h = Math.floor(mins / 60);
     let m = mins % 60;
@@ -30,23 +26,29 @@ export default function Troubleshoot({ user }) {
   }
 
   const fetchAvailability = (date) => {
-    fetch(
-      `/api/availability/${session.user.username}?dateFrom=${date
-        .startOf("day")
-        .utc()
-        .startOf("day")
-        .format()}&dateTo=${date.endOf("day").utc().endOf("day").format()}`
-    )
+    const dateFrom = date.startOf("day").utc().format();
+    const dateTo = date.endOf("day").utc().format();
+
+    fetch(`/api/availability/${user.username}?dateFrom=${dateFrom}&dateTo=${dateTo}`)
       .then((res) => {
         return res.json();
       })
-      .then((apires) => setAvailability(apires))
+      .then((availableIntervals) => {
+        setAvailability(availableIntervals);
+        setLoading(false);
+      })
       .catch((e) => {
         console.error(e);
       });
   };
 
+  useEffect(() => {
     fetchAvailability(selectedDate);
+  }, [selectedDate]);
+
+  if (loading) {
+    return <Loader />;
+  }
 
   return (
     <div>
@@ -106,11 +108,12 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   const user = await prisma.user.findFirst({
     where: {
-      username: session.user.username,
+      id: session.user.id,
     },
     select: {
       startTime: true,
       endTime: true,
+      username: true,
     },
   });
 

pages/cancel/[uid].tsx

@@ -1,13 +1,13 @@
-import { useState } from "react";
-import Head from "next/head";
-import prisma from "../../lib/prisma";
-import { useRouter } from "next/router";
+import { CalendarIcon, XIcon } from "@heroicons/react/solid";
 import dayjs from "dayjs";
-import { CalendarIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import isBetween from "dayjs/plugin/isBetween";
-import utc from "dayjs/plugin/utc";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import prisma from "../../lib/prisma";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
 
 dayjs.extend(isSameOrBefore);
@@ -23,7 +23,7 @@ export default function Type(props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [is24h, setIs24h] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState(props.booking ? null : "This booking was already cancelled");
   const telemetry = useTelemetry();
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -46,7 +46,7 @@ export default function Type(props) {
     });
 
     if (res.status >= 200 && res.status < 300) {
-      router.push("/cancel/success?user=" + props.user.username + "&title=" + props.eventType.title);
+      router.push("/cancel/success?user=" + props.user.username + "&title=" + props.booking.title);
     } else {
       setLoading(false);
       setError("An error with status code " + res.status + " occurred. Please try again later.");
@@ -57,7 +57,8 @@ export default function Type(props) {
     <div>
       <Head>
         <title>
-          Cancel {props.booking.title} | {props.user.name || props.user.username} | Calendso
+          Cancel {props.booking && `${props.booking.title} | ${props.user.name || props.user.username} `}|
+          Calendso
         </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
@@ -86,6 +87,7 @@ export default function Type(props) {
                   </div>
                 )}
                 {!error && (
+                  <>
                     <div>
                       <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                         <XIcon className="h-6 w-6 text-red-600" />
@@ -99,10 +101,6 @@ export default function Type(props) {
                         </div>
                         <div className="mt-4 border-t border-b py-4">
                           <h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
-                        <p className="text-gray-500 mb-1">
-                          <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                          {props.eventType.length} minutes
-                        </p>
                           <p className="text-gray-500">
                             <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                             {dayjs
@@ -112,7 +110,6 @@ export default function Type(props) {
                         </div>
                       </div>
                     </div>
-                )}
                     <div className="mt-5 sm:mt-6 text-center">
                       <div className="mt-5">
                         <button
@@ -131,6 +128,8 @@ export default function Type(props) {
                         </button>
                       </div>
                     </div>
+                  </>
+                )}
               </div>
             </div>
           </div>
@@ -163,6 +162,12 @@ export async function getServerSideProps(context) {
     },
   });
 
+  if (!booking) {
+    return {
+      props: { booking: null },
+    };
+  }
+
   // Workaround since Next.js has problems serializing date objects (see https://github.com/vercel/next.js/issues/11993)
   const bookingObj = Object.assign({}, booking, {
     startTime: booking.startTime.toString(),