From 907cc90eb00a1fdfa3060907aa8bc3d084f26cf8 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 28 Jul 2022 21:49:05 +0300
Subject: [PATCH] Extract Tags component to a separate file

---
 TODO.md                                 |  3 ++-
 app/db/types.ts                         |  4 ++++
 app/routes/calendar/components/Tags.tsx | 19 +++++++++++++++++++
 app/routes/calendar/index.tsx           | 22 +---------------------
 app/styles/calendar.css                 | 14 --------------
 app/styles/common.css                   | 14 ++++++++++++++
 public/locales/en/calendar.json         |  4 ++--
 remix.config.js                         |  2 +-
 8 files changed, 43 insertions(+), 39 deletions(-)
 create mode 100644 app/routes/calendar/components/Tags.tsx

diff --git a/TODO.md b/TODO.md
index b73c0bd8b..7d8252e68 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,7 +4,7 @@ Calendar
 
 ## Features
 
-- [ ] Add badges to the seed
+- [x] Add badges to the seed
 - [ ] Implement badge prizes
 - [ ] Implement tags
 - [ ] Page to add a new event
@@ -20,6 +20,7 @@ Calendar
 - [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?
+- [ ] refactor global.css/common.css -> variables.css / utils.css / common.css
 - [ ] addTagArray get tags type from constant
 - [ ] Rename model events -> calendarEvents
 - [ ] On the event page should not say Day 1 if only one day
diff --git a/app/db/types.ts b/app/db/types.ts
index 7587c762c..01a805677 100644
--- a/app/db/types.ts
+++ b/app/db/types.ts
@@ -1,3 +1,5 @@
+import type allTags from "../routes/calendar/tags.json";
+
 export interface User {
   id: number;
   discordId: string;
@@ -88,6 +90,8 @@ export interface CalendarEvent {
   participantCount: number | null;
 }
 
+export type CalendarEventTag = keyof typeof allTags;
+
 export interface CalendarEventDate {
   id: number;
   eventId: number;
diff --git a/app/routes/calendar/components/Tags.tsx b/app/routes/calendar/components/Tags.tsx
new file mode 100644
index 000000000..b525ea588
--- /dev/null
+++ b/app/routes/calendar/components/Tags.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import type { CalendarEventTag } from "~/db/types";
+import allTags from "../tags.json";
+
+export function Tags({ tags }: { tags: Array<CalendarEventTag> }) {
+  const { t } = useTranslation("calendar");
+
+  if (tags.length === 0) return null;
+
+  return (
+    <ul className="calendar__event__tags">
+      {tags.map((tag) => (
+        <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
+          {t(`tag.${tag}`)}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index bd92ec293..70e222986 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -23,7 +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";
+import { Tags } from "./components/Tags";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -353,26 +353,6 @@ function EventsList() {
   );
 }
 
-function Tags({
-  tags,
-}: {
-  tags: Unpacked<UseDataFunctionReturn<typeof loader>["events"]>["tags"];
-}) {
-  const { t } = useTranslation("calendar");
-
-  if (tags.length === 0) return null;
-
-  return (
-    <ul className="calendar__event__tags">
-      {tags.map((tag) => (
-        <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
-          {t(`tag.${tag}`)}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 function eventsGroupedByDay(
   events: UseDataFunctionReturn<typeof loader>["events"]
 ) {
diff --git a/app/styles/calendar.css b/app/styles/calendar.css
index 690e21c4a..4312c1474 100644
--- a/app/styles/calendar.css
+++ b/app/styles/calendar.css
@@ -125,20 +125,6 @@
   line-height: 1.35;
 }
 
-.calendar__event__tags {
-  display: flex;
-  padding: 0;
-  color: var(--button-text);
-  font-size: var(--fonts-xxs);
-  font-weight: var(--semi-bold);
-  list-style: none;
-}
-
-.calendar__event__tags > li {
-  border-radius: var(--rounded);
-  padding-inline: var(--s-1-5);
-}
-
 .calendar__event__day {
   color: var(--text-lighter);
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index 562a81b07..77a4515fc 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -179,6 +179,20 @@
   margin-block-start: var(--label-margin);
 }
 
+.calendar__event__tags {
+  display: flex;
+  padding: 0;
+  color: var(--button-text);
+  font-size: var(--fonts-xxs);
+  font-weight: var(--semi-bold);
+  list-style: none;
+}
+
+.calendar__event__tags > li {
+  border-radius: var(--rounded);
+  padding-inline: var(--s-1-5);
+}
+
 /*
  *
  * Utility classes
diff --git a/public/locales/en/calendar.json b/public/locales/en/calendar.json
index 5d5ee8d5c..cc27d1d2f 100644
--- a/public/locales/en/calendar.json
+++ b/public/locales/en/calendar.json
@@ -1,3 +1,3 @@
 {
-    "tag.BADGE_PRIZE": "Badge prize"
-}
\ No newline at end of file
+  "tag.BADGE_PRIZE": "Badge prize"
+}
diff --git a/remix.config.js b/remix.config.js
index 069219709..7e53ed9a6 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -2,6 +2,6 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
-  ignoredRouteFiles: ["**/.*", "**/*.json"],
+  ignoredRouteFiles: ["**/.*", "**/*.json", "**/components/*"],
   cacheDirectory: process.env.NODE_ENV === "test" ? ".cache-test" : undefined,
 };