From d39fa5c0d1e972084efc7aa954aebe2598d3599a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 28 Jul 2022 23:43:24 +0300
Subject: [PATCH] Tags to seed

---
 TODO.md                       |  3 ++-
 app/db/seed.ts                | 20 ++++++++++++++++++--
 app/routes/calendar/$id.tsx   |  2 +-
 app/routes/calendar/index.tsx |  2 +-
 app/styles/common.css         |  3 +++
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/TODO.md b/TODO.md
index 449346f7f..0ec85a497 100644
--- a/TODO.md
+++ b/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)
diff --git a/app/db/seed.ts b/app/db/seed.ts
index 9aeaad3be..6fb43fe13 100644
--- a/app/db/seed.ts
+++ b/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;
diff --git a/app/routes/calendar/$id.tsx b/app/routes/calendar/$id.tsx
index 65da28f18..767d4d3fd 100644
--- a/app/routes/calendar/$id.tsx
+++ b/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>
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index c37947681..3ba2e7025 100644
--- a/app/routes/calendar/index.tsx
+++ b/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}{" "}
diff --git a/app/styles/common.css b/app/styles/common.css
index 7d12b82d6..c500c2d78 100644
--- a/app/styles/common.css
+++ b/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;
 }