From d8c1c103a159bce0effa041378541c40d9b38dc5 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Fri, 2 Dec 2022 18:08:12 +0800
Subject: [PATCH] [CAL-103] All Bookings show up under Today and Today should
 be uppercase (#5155)

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/pages/bookings/[status].tsx | 105 ++++++++++++++++++---------
 1 file changed, 72 insertions(+), 33 deletions(-)

diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 7b427e3ef5..fbd4c78c40 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -17,6 +17,13 @@ import SkeletonLoader from "@components/booking/SkeletonLoader";
 type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
 type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
 
+type RecurringInfo = {
+  recurringEventId: string | null;
+  count: number;
+  firstDate: Date | null;
+  bookings: { [key: string]: Date[] };
+};
+
 const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
 
 const descriptionByStatus: Record<BookingListingStatus, string> = {
@@ -73,6 +80,18 @@ export default function Bookings() {
     return true;
   };
 
+  let recurringInfoToday: RecurringInfo | undefined;
+
+  const bookingsToday =
+    query.data?.pages.map((page) =>
+      page.bookings.filter((booking: BookingOutput) => {
+        recurringInfoToday = page.recurringInfo.find(
+          (info) => info.recurringEventId === booking.recurringEventId
+        );
+        return new Date(booking.startTime).toDateString() === new Date().toDateString();
+      })
+    )[0] || [];
+
   const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
@@ -83,45 +102,65 @@ export default function Bookings() {
         )}
         {(query.status === "loading" || query.isPaused) && <SkeletonLoader />}
         {query.status === "success" && !isEmpty && (
-          <div className="pt-2 xl:pt-0">
-            <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
-            {/* TODO: add today only for the current day
-            <p className="pb-3 text-xs font-medium leading-4 text-gray-500 uppercase">{t("today")}</p>
-             */}
-
-            <div className="overflow-hidden rounded-md border border-gray-200">
-              <table className="w-full max-w-full table-fixed">
-                <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
-                  {query.data.pages.map((page, index) => (
-                    <Fragment key={index}>
-                      {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
-                        const recurringInfo = page.recurringInfo.find(
-                          (info) => info.recurringEventId === booking.recurringEventId
-                        );
-                        return (
+          <>
+            {!!bookingsToday.length && status === "upcoming" && (
+              <div className="mb-6 pt-2 xl:pt-0">
+                <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
+                <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
+                <div className="overflow-hidden rounded-md border border-gray-200">
+                  <table className="w-full max-w-full table-fixed">
+                    <tbody className="divide-y divide-gray-200 bg-white">
+                      <Fragment>
+                        {bookingsToday.map((booking: BookingOutput) => (
                           <BookingListItem
                             key={booking.id}
                             listingStatus={status}
-                            recurringInfo={recurringInfo}
+                            recurringInfo={recurringInfoToday}
                             {...booking}
                           />
-                        );
-                      })}
-                    </Fragment>
-                  ))}
-                </tbody>
-              </table>
+                        ))}
+                      </Fragment>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+            <div className="pt-2 xl:pt-0">
+              <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("all")}</p>
+              <div className="overflow-hidden rounded-md border border-gray-200">
+                <table className="w-full max-w-full table-fixed">
+                  <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
+                    {query.data.pages.map((page, index) => (
+                      <Fragment key={index}>
+                        {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
+                          const recurringInfo = page.recurringInfo.find(
+                            (info) => info.recurringEventId === booking.recurringEventId
+                          );
+                          return (
+                            <BookingListItem
+                              key={booking.id}
+                              listingStatus={status}
+                              recurringInfo={recurringInfo}
+                              {...booking}
+                            />
+                          );
+                        })}
+                      </Fragment>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div className="p-4 text-center" ref={buttonInView.ref}>
+                <Button
+                  color="minimal"
+                  loading={query.isFetchingNextPage}
+                  disabled={!query.hasNextPage}
+                  onClick={() => query.fetchNextPage()}>
+                  {query.hasNextPage ? t("load_more_results") : t("no_more_results")}
+                </Button>
+              </div>
             </div>
-            <div className="p-4 text-center" ref={buttonInView.ref}>
-              <Button
-                color="minimal"
-                loading={query.isFetchingNextPage}
-                disabled={!query.hasNextPage}
-                onClick={() => query.fetchNextPage()}>
-                {query.hasNextPage ? t("load_more_results") : t("no_more_results")}
-              </Button>
-            </div>
-          </div>
+          </>
         )}
         {query.status === "success" && isEmpty && (
           <div className="flex items-center justify-center pt-2 xl:mx-6 xl:pt-0">