Tags to seed

TODO.md

@@ -8,7 +8,8 @@ Calendar
 - [x] Implement badge prizes
 - [x] Implement tags
 - [x] Add initial tags.json
-- [ ] Add tags to the seed
+- [x] Add tags to the seed
+- [ ] Tags should be clickable and apply a filter (also many tags)
 - [ ] Page to add a new event
   - [ ] Different fields to submit depending on if future date or past date
 - [ ] Edit page (add winners this way)

app/db/seed.ts

@@ -11,6 +11,7 @@ import { ADMIN_DISCORD_ID } from "~/constants";
 import shuffle from "just-shuffle";
 import { dateToDatabaseTimestamp } from "~/utils/dates";
 import capitalize from "just-capitalize";
+import allTags from "~/routes/calendar/tags.json";
 
 const ADMIN_TEST_AVATAR = "e424e1ba50d2019fdc4730d261e56c55";
 
@@ -320,6 +321,8 @@ function calendarEvents() {
     .map((u) => u.id);
 
   for (let id = 1; id <= AMOUNT_OF_CALENDAR_EVENTS; id++) {
+    const tags = shuffle(Object.keys(allTags));
+
     sql
       .prepare(
         `
@@ -329,14 +332,16 @@ function calendarEvents() {
         "description",
         "discordUrl",
         "bracketUrl",
-        "authorId"
+        "authorId",
+        "tags"
       ) values (
         $id,
         $name,
         $description,
         $discordUrl,
         $bracketUrl,
-        $authorId
+        $authorId,
+        $tags
       )
       `
       )
@@ -349,6 +354,17 @@ function calendarEvents() {
         discordUrl: faker.internet.url(),
         bracketUrl: faker.internet.url(),
         authorId: userIds.pop(),
+        tags:
+          Math.random() > 0.2
+            ? tags
+                .slice(
+                  0,
+                  faker.helpers.arrayElement([
+                    1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 4, 5, 6,
+                  ])
+                )
+                .join(",")
+            : null,
       });
 
     const twoDayEvent = Math.random() > 0.9;

app/routes/calendar/$id.tsx

@@ -75,7 +75,7 @@ export default function CalendarEventPage() {
           ))}
         </div>
         <div className="stack md">
-          <div>
+          <div className="stack xs">
             <h2>{event.name}</h2>
             <Tags tags={event.tags} />
           </div>

app/routes/calendar/index.tsx

@@ -301,7 +301,7 @@ function EventsList() {
                             From {discordFullName(calendarEvent)}
                           </div>
                         </div>
-                        <div className="stack sm">
+                        <div className="stack xs">
                           <Link to={String(calendarEvent.eventId)}>
                             <h2 className="calendar__event__title">
                               {calendarEvent.name}{" "}

app/styles/common.css

@@ -485,10 +485,13 @@ dialog::backdrop {
 
 .calendar__event__tags {
   display: flex;
+  max-width: 18rem;
+  flex-wrap: wrap;
   padding: 0;
   color: var(--black-text);
   font-size: var(--fonts-xxs);
   font-weight: var(--semi-bold);
+  gap: var(--s-1);
   list-style: none;
 }