Sort tags before adding to DB

TODO.md

@@ -9,9 +9,11 @@ Calendar
 - [x] Implement tags
 - [x] Add initial tags.json
 - [x] Add tags to the seed
-- [ ] Tags should be clickable and apply a filter (also many tags)
 - [ ] Page to add a new event
 - [ ] Edit page
+- [ ] E2E test form controls (adding/removing date, adding/removing tags) etc.
+- [ ] E2E test browsing events + event page
+- [ ] E2E test adding and editing event
 - [ ] Add winners page
 - [ ] Winners on the event info page
 - [ ] There should be a banner on the list page if you have past tournaments to report
@@ -20,9 +22,10 @@ Calendar
 
 ## Other
 
+- [ ] Move "BADGE" tag resolving to DB?
 - [x] Tags selector can remove
 - [ ] Calendar new title
-- [ ] Sort tags so that they are always in same order
+- [x] Sort tags so that they are always in same order
 - [x] Maybe make bracket URL mandatory?
 - [ ] components render twice on state change?
 - [ ] If week has no events show some text + don't show time zone text

app/constants.ts

@@ -1,3 +1,6 @@
+import allTags from "~/routes/calendar/tags.json";
+import type { CalendarEventTag } from "./db/types";
+
 export const TWEET_LENGTH_MAX_LENGTH = 280;
 export const DISCORD_MESSAGE_MAX_LENGTH = 2000;
 
@@ -12,6 +15,9 @@ export const CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 export const CALENDAR_EVENT_DISCORD_INVITE_CODE_MAX_LENGTH = 50;
 export const CALENDAR_EVENT_BRACKET_URL_MAX_LENGTH = 100;
 export const CALENDAR_EVENT_MAX_AMOUNT_OF_DATES = 5;
+export const CALENDAR_EVENT_TAGS = Object.keys(
+  allTags
+) as Array<CalendarEventTag>;
 
 export const PLUS_TIERS = [1, 2, 3];
 

app/db/models/calendar.server.ts

@@ -167,7 +167,7 @@ function addTagArray<
   const { hasBadge, ...row } = arg;
   const tags = (row.tags ? row.tags.split(",") : []) as Array<CalendarEventTag>;
 
-  if (hasBadge) tags.push("BADGE");
+  if (hasBadge) tags.unshift("BADGE");
 
   return { ...row, tags };
 }

app/routes/calendar/new.tsx

@@ -4,6 +4,7 @@ import { Main } from "~/components/Main";
 import * as React from "react";
 import type { Badge as BadgeType, CalendarEventTag } from "~/db/types";
 import {
+  CALENDAR_EVENT_TAGS,
   CALENDAR_EVENT_BRACKET_URL_MAX_LENGTH,
   CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH,
   CALENDAR_EVENT_DISCORD_INVITE_CODE_MAX_LENGTH,
@@ -26,7 +27,6 @@ import { TrashIcon } from "~/components/icons/Trash";
 import { Input } from "~/components/Input";
 import { FormMessage } from "~/components/FormMessage";
 import { useIsMounted } from "~/hooks/useIsMounted";
-import allTags from "./tags.json";
 import { Tags } from "./components/Tags";
 import { db } from "~/db";
 import { requireUser } from "~/modules/auth";
@@ -98,7 +98,13 @@ const newCalendarEventActionSchema = z.object({
   tags: z.preprocess(
     processMany(safeJSONParse, removeDuplicates),
     z
-      .array(z.string().refine((val) => Object.keys(allTags).includes(val)))
+      .array(
+        z
+          .string()
+          .refine((val) =>
+            CALENDAR_EVENT_TAGS.includes(val as CalendarEventTag)
+          )
+      )
       .nullable()
   ),
   badges: z.preprocess(
@@ -120,7 +126,15 @@ export const action: ActionFunction = async ({ request }) => {
     startTimes: data.dates.map((date) => dateToDatabaseTimestamp(date)),
     bracketUrl: data.bracketUrl,
     discordInviteCode: data.discordInviteCode,
-    tags: data.tags ? data.tags.join(",") : data.tags,
+    tags: data.tags
+      ? data.tags
+          .sort(
+            (a, b) =>
+              CALENDAR_EVENT_TAGS.indexOf(a as CalendarEventTag) -
+              CALENDAR_EVENT_TAGS.indexOf(b as CalendarEventTag)
+          )
+          .join(",")
+      : data.tags,
     badges: data.badges ?? [],
   };
   if (data.eventToEditId) {
@@ -386,9 +400,9 @@ function TagsAdder() {
   );
   const id = React.useId();
 
-  const tagsForSelect = (
-    Object.keys(allTags) as Array<CalendarEventTag>
-  ).filter((tag) => !tags.includes(tag) && tag !== "BADGE");
+  const tagsForSelect = CALENDAR_EVENT_TAGS.filter(
+    (tag) => !tags.includes(tag) && tag !== "BADGE"
+  );
 
   return (
     <div className="stack sm">