Tags showing in calendar page

TODO.md

@@ -14,11 +14,13 @@ Calendar
 - [ ] Add "playerCount" to Tournament table
 - [ ] There should be a banner on the list page if you have past tournaments to report
 - [ ] On the user page tab showing past results
+- [ ] Translations
 
 ## Other
 
 - [x] WeekLinks make opaque blocks not take space on mobile
 - [x] Type problem with Avatar
 - [x] Maybe classNames that do nothing on calendar event page?
+- [ ] addTagArray get tags type from constant
 - [ ] Rename model events -> calendarEvents
 - [ ] On the event page should not say Day 1 if only one day

app/db/models/calendar.server.ts

@@ -1,7 +1,9 @@
 import { dateToDatabaseTimestamp } from "~/utils/dates";
+import { Unpacked } from "~/utils/types";
 import { sql } from "../sql";
 import type { CalendarEvent, CalendarEventDate, User } from "../types";
 
+// xxx: TODO: add tags
 const findAllBetweenTwoTimestampsStm = sql.prepare(`
   select
     "CalendarEvent"."name",
@@ -12,7 +14,11 @@ const findAllBetweenTwoTimestampsStm = sql.prepare(`
     "CalendarEventDate"."startTime",
     "User"."discordName",
     "User"."discordDiscriminator",
-    "CalendarEventRanks"."nthAppearance"
+    "CalendarEventRanks"."nthAppearance",
+    exists (select 1 
+      from "CalendarEventBadge" 
+      where "badgeId" = "CalendarEventDate"."eventId"
+    ) as "hasBadge"
     from "CalendarEvent"
     join "CalendarEventDate" on "CalendarEvent"."id" = "CalendarEventDate"."eventId"
     join "User" on "CalendarEvent"."authorId" = "User"."id"
@@ -28,6 +34,17 @@ const findAllBetweenTwoTimestampsStm = sql.prepare(`
     order by "CalendarEventDate"."startTime" asc
 `);
 
+function addTagArray<
+  T extends { hasBadge: number; tags?: CalendarEvent["tags"] }
+>(arg: T) {
+  const { hasBadge, ...row } = arg;
+  const tags = (row.tags ? row.tags.split(",") : []) as Array<"BADGE_PRIZE">;
+
+  if (hasBadge) tags.push("BADGE_PRIZE");
+
+  return { ...row, tags };
+}
+
 export function findAllBetweenTwoTimestamps({
   startTime,
   endTime,
@@ -35,16 +52,18 @@ export function findAllBetweenTwoTimestamps({
   startTime: Date;
   endTime: Date;
 }) {
-  return findAllBetweenTwoTimestampsStm.all({
+  const rows = findAllBetweenTwoTimestampsStm.all({
     startTime: dateToDatabaseTimestamp(startTime),
     endTime: dateToDatabaseTimestamp(endTime),
   }) as Array<
-    Pick<CalendarEvent, "name" | "discordUrl" | "bracketUrl"> &
+    Pick<CalendarEvent, "name" | "discordUrl" | "bracketUrl" | "tags"> &
       Pick<CalendarEventDate, "id" | "eventId" | "startTime"> &
       Pick<User, "discordName" | "discordDiscriminator"> & {
         nthAppearance: number;
-      }
+      } & { hasBadge: number }
   >;
+
+  return rows.map(addTagArray);
 }
 
 const findByIdStm = sql.prepare(`

app/db/types.ts

@@ -81,6 +81,7 @@ export interface CalendarEvent {
   id: number;
   name: string;
   authorId: number;
+  tags?: string; // xxx: TODO: add in migration
   description: string | null;
   discordUrl: string | null;
   bracketUrl: string | null;

app/routes/calendar/index.tsx

@@ -23,6 +23,7 @@ import { discordFullName, makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
 import { resolveBaseUrl } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
+import allTags from "./tags.json";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -288,16 +289,19 @@ function EventsList() {
                           From {discordFullName(calendarEvent)}
                         </div>
                       </div>
-                      <Link to={String(calendarEvent.eventId)}>
-                        <h2 className="calendar__event__title">
-                          {calendarEvent.name}{" "}
-                          {calendarEvent.nthAppearance > 1 ? (
-                            <span className="calendar__event__day">
-                              Day {calendarEvent.nthAppearance}
-                            </span>
-                          ) : null}
-                        </h2>
-                      </Link>
+                      <div>
+                        <Link to={String(calendarEvent.eventId)}>
+                          <h2 className="calendar__event__title">
+                            {calendarEvent.name}{" "}
+                            {calendarEvent.nthAppearance > 1 ? (
+                              <span className="calendar__event__day">
+                                Day {calendarEvent.nthAppearance}
+                              </span>
+                            ) : null}
+                          </h2>
+                        </Link>
+                        <Tags tags={calendarEvent.tags} />
+                      </div>
                       {calendarEvent.discordUrl || calendarEvent.bracketUrl ? (
                         <div className="calendar__event__bottom-info-container">
                           {calendarEvent.discordUrl ? (
@@ -333,6 +337,25 @@ function EventsList() {
   );
 }
 
+function Tags({
+  tags,
+}: {
+  tags: Unpacked<UseDataFunctionReturn<typeof loader>["events"]>["tags"];
+}) {
+  if (tags.length === 0) return null;
+
+  // xxx: fix name
+  return (
+    <ul className="calendar__event__tags">
+      {tags.map((tag) => (
+        <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
+          Badge prize
+        </li>
+      ))}
+    </ul>
+  );
+}
+
 function eventsGroupedByDay(
   events: UseDataFunctionReturn<typeof loader>["events"]
 ) {

app/routes/calendar/tags.json

@@ -0,0 +1,5 @@
+{
+    "BADGE_PRIZE": {
+        "color": "#FDFD96"
+    }
+}

app/styles/calendar.css

@@ -128,6 +128,20 @@
   margin-block: var(--s-1);
 }
 
+.calendar__event__tags {
+  list-style: none;
+  padding: 0;
+  font-size: var(--fonts-xxs);
+  display: flex;
+  color: var(--button-text);
+  font-weight: var(--semi-bold);
+}
+
+.calendar__event__tags > li {
+  padding-inline: var(--s-1-5);
+  border-radius: var(--rounded);
+}
+
 .calendar__event__day {
   color: var(--text-lighter);
 }