From 0bfa0eca209056fc30d7983da9dc33052fc30f06 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 24 Apr 2024 22:30:08 +0300
Subject: [PATCH] Events happening during the night grouped with previous day
 events

---
 app/features/calendar/routes/calendar.tsx | 32 +++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/features/calendar/routes/calendar.tsx b/app/features/calendar/routes/calendar.tsx
index 8d60c04ae..c9c79a82e 100644
--- a/app/features/calendar/routes/calendar.tsx
+++ b/app/features/calendar/routes/calendar.tsx
@@ -389,6 +389,10 @@ function EventsList({
           dividerRendered = true;
         }
 
+        const sectionWeekday = daysDate.toLocaleString(i18n.language, {
+          weekday: "long",
+        });
+
         return (
           <React.Fragment key={daysDate.getTime()}>
             <div className="calendar__event__date-container">
@@ -407,6 +411,12 @@ function EventsList({
             </div>
             <div className="stack md">
               {events.map((calendarEvent) => {
+                const eventWeekday = databaseTimestampToDate(
+                  calendarEvent.startTime,
+                ).toLocaleString(i18n.language, {
+                  weekday: "long",
+                });
+
                 return (
                   <section
                     key={calendarEvent.eventDateId}
@@ -432,6 +442,11 @@ function EventsList({
                             author: discordFullName(calendarEvent),
                           })}
                         </div>
+                        {sectionWeekday !== eventWeekday ? (
+                          <div className="text-xxs font-bold text-theme-secondary ml-auto">
+                            {eventWeekday}
+                          </div>
+                        ) : null}
                       </div>
                       <div className="stack xs">
                         <div className="stack horizontal sm-plus items-center">
@@ -519,6 +534,15 @@ function EventsList({
   );
 }
 
+// Goal with this is to make events that start during the night for EU (NA events)
+// grouped up with the previous day. Otherwise you have a past event showing at the
+// top of the page for the whole following day for EU.
+const dateToSixHoursAgo = (date: Date) => {
+  const sixHoursAgo = new Date(date);
+  sixHoursAgo.setHours(sixHoursAgo.getHours() - 6);
+  return sixHoursAgo;
+};
+
 type EventsGrouped = [Date, SerializeFrom<typeof loader>["events"]];
 function eventsGroupedByDay(events: SerializeFrom<typeof loader>["events"]) {
   const result: EventsGrouped[] = [];
@@ -526,10 +550,14 @@ function eventsGroupedByDay(events: SerializeFrom<typeof loader>["events"]) {
   for (const calendarEvent of events) {
     const previousIterationEvents = result[result.length - 1] ?? null;
 
-    const eventsDate = databaseTimestampToDate(calendarEvent.startTime);
+    const eventsDate = dateToSixHoursAgo(
+      databaseTimestampToDate(calendarEvent.startTime),
+    );
+
     if (
       !previousIterationEvents ||
-      previousIterationEvents[0].getDay() !== eventsDate.getDay()
+      dateToSixHoursAgo(previousIterationEvents[0]).getDay() !==
+        eventsDate.getDay()
     ) {
       result.push([eventsDate, [calendarEvent]]);
     } else {