Show many days on event page

app/db/models/calendar.server.ts

@@ -60,10 +60,11 @@ const findByIdStm = sql.prepare(`
   join "CalendarEventDate" on "CalendarEvent"."id" = "CalendarEventDate"."eventId"
   join "User" on "CalendarEvent"."authorId" = "User"."id"
   where "CalendarEvent"."id" = $id
+  order by "CalendarEventDate"."startTime" asc
 `);
 
 export function findById(id: CalendarEvent["id"]) {
-  return findByIdStm.get({ id }) as Nullable<
+  const rows = findByIdStm.all({ id }) as Array<
     Pick<CalendarEvent, "name" | "description" | "discordUrl" | "bracketUrl"> &
       Pick<CalendarEventDate, "startTime" | "eventId"> &
       Pick<
@@ -71,6 +72,14 @@ export function findById(id: CalendarEvent["id"]) {
         "discordName" | "discordDiscriminator" | "discordId" | "discordAvatar"
       >
   >;
+
+  if (rows.length === 0) return null;
+
+  return {
+    ...rows[0],
+    startTimes: rows.map((row) => row.startTime),
+    startTime: undefined,
+  };
 }
 
 const startTimesOfRangeStm = sql.prepare(`

app/routes/calendar/$id.tsx

@@ -13,6 +13,7 @@ import { actualNumber, id } from "~/utils/zod";
 import styles from "~/styles/calendar-event.css";
 import { Avatar } from "~/components/Avatar";
 import { discordFullName } from "~/utils/strings";
+import * as React from "react";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -34,29 +35,35 @@ export default function CalendarEventPage() {
   const { i18n } = useTranslation();
   const isMounted = useIsMounted();
 
-  // xxx: not taking in account many dates
+  // xxx: should not say day 1 if we only have one day
+  // -> implement badges
+  // -> implement tags
 
   return (
     <Main className="stack lg">
       <section className="stack sm">
-        <div className="event__time">
-          <time
-            dateTime={databaseTimestampToDate(event.startTime).toISOString()}
-          >
-            {isMounted
-              ? databaseTimestampToDate(event.startTime).toLocaleDateString(
-                  i18n.language,
-                  {
-                    hour: "numeric",
-                    minute: "numeric",
-                    day: "numeric",
-                    month: "long",
-                    weekday: "long",
-                  }
-                )
-              : null}
-          </time>
+        <div className="event__times">
+          {event.startTimes.map((startTime, i) => (
+            <React.Fragment key={startTime}>
+              <span className="event__day">Day {i + 1}</span>
+              <time dateTime={databaseTimestampToDate(startTime).toISOString()}>
+                {isMounted
+                  ? databaseTimestampToDate(startTime).toLocaleDateString(
+                      i18n.language,
+                      {
+                        hour: "numeric",
+                        minute: "numeric",
+                        day: "numeric",
+                        month: "long",
+                        weekday: "long",
+                      }
+                    )
+                  : null}
+              </time>
+            </React.Fragment>
+          ))}
         </div>
+        {/* xxx: are we even loading these styles? */}
         <h2 className="calendar__event__title">{event.name}</h2>
         {event.discordUrl || event.bracketUrl ? (
           <div className="stack horizontal sm">

app/styles/calendar-event.css

@@ -2,9 +2,15 @@
   line-height: 1.35;
 }
 
-.event__time {
-  height: 1rem;
+.event__day {
+  color: var(--text-lighter);
+}
+
+.event__times {
   font-weight: var(--semi-bold);
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: var(--s-1-5);
 }
 
 .event__author {