From 9f69a44bc7d1ee0d86126a8d622b07765b446bbd Mon Sep 17 00:00:00 2001
From: Mikael Siidorow <mikael@siidorow.com>
Date: Wed, 30 Oct 2024 14:37:37 +0200
Subject: [PATCH] feat: implement support for localizing event titles in UI
 with common practice divider

---
 .../signups/[signupId]/[signupEditToken]/page.tsx    |  7 +++++--
 .../[signupId]/[signupEditToken]/signup-form.tsx     |  5 +++--
 apps/web/src/components/events-display/index.tsx     | 12 ++++++++----
 apps/web/src/custom-pages/event-calendar.tsx         | 12 +++++++-----
 apps/web/src/custom-pages/events-page.tsx            |  3 ++-
 apps/web/src/lib/utils.ts                            | 11 +++++++++++
 6 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
index 7c75183..06ad194 100644
--- a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
+++ b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx
@@ -6,7 +6,8 @@ import {
   deleteSignUpAction,
   saveSignUpAction,
 } from "../../../../../lib/api/external/ilmomasiina/actions";
-import { getScopedI18n } from "../../../../../locales/server";
+import { getCurrentLocale, getScopedI18n } from "../../../../../locales/server";
+import { getLocalizedEventTitle } from "../../../../../lib/utils";
 import { SignupForm } from "./signup-form";
 
 interface PageProps {
@@ -48,6 +49,7 @@ export default async function Page({
     throw new Error("Failed to fetch signup info");
   }
 
+  const locale = await getCurrentLocale();
   const t = await getScopedI18n("ilmomasiina.form");
 
   return (
@@ -58,7 +60,8 @@ export default async function Page({
       <div className="relative flex max-w-4xl flex-col items-center gap-8 p-4 md:p-6">
         <hgroup className="space-y-4 text-pretty">
           <h1 className="font-mono text-2xl md:text-4xl">
-            {t("Edit sign up")} - {signupInfo.data.event.title}
+            {t("Edit sign up")} -{" "}
+            {getLocalizedEventTitle(signupInfo.data.event.title, locale)}
           </h1>
           <p>
             {signupInfo.data.signup.status === "in-queue"
diff --git a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx
index 4d5cebd..e8f91ea 100644
--- a/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx
+++ b/apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx
@@ -29,7 +29,7 @@ import {
   useCurrentLocale,
   useScopedI18n,
 } from "../../../../../locales/client";
-import { cn } from "../../../../../lib/utils";
+import { cn, getLocalizedEventTitle } from "../../../../../lib/utils";
 
 type FieldErrorI18n = ReturnType<typeof useScopedI18n>;
 
@@ -212,6 +212,7 @@ function Form({
   saveAction: typeof saveSignUpAction;
   deleteAction: typeof deleteSignUpAction;
 }) {
+  const locale = useCurrentLocale();
   const t = useScopedI18n("ilmomasiina.form");
   const [state, formAction] = useFormState(saveAction, null);
   const isSignupPeriodEnded =
@@ -386,7 +387,7 @@ function Form({
         />
         <ConfirmDeletePopover
           id="confirm-delete"
-          eventTitle={event.title}
+          eventTitle={getLocalizedEventTitle(event.title, locale)}
           deleteAction={deleteAction}
         />
       </div>
diff --git a/apps/web/src/components/events-display/index.tsx b/apps/web/src/components/events-display/index.tsx
index 0375da2..280e699 100644
--- a/apps/web/src/components/events-display/index.tsx
+++ b/apps/web/src/components/events-display/index.tsx
@@ -14,7 +14,11 @@ import {
 import type { IlmomasiinaEvent } from "../../lib/api/external/ilmomasiina";
 import { fetchUpcomingEvents } from "../../lib/api/external/ilmomasiina";
 import { getCurrentLocale, getI18n } from "../../locales/server";
-import { formatDateTime, formatDateTimeOptions } from "../../lib/utils";
+import {
+  formatDateTime,
+  formatDateTimeOptions,
+  getLocalizedEventTitle,
+} from "../../lib/utils";
 import { DateTime } from "../datetime";
 
 function EventListSkeleton() {
@@ -37,14 +41,14 @@ async function EventItem({ event }: { event: IlmomasiinaEvent }) {
     <li className="shadow-solid flex flex-col justify-between gap-4 rounded-md border-2 border-gray-900 p-4 font-mono text-gray-900 md:flex-row md:items-center">
       <div className="flex-1 shrink-0">
         <span className="block text-pretty text-lg font-bold">
-          {event.title}
+          {getLocalizedEventTitle(event.title, locale)}
         </span>
         <Button asChild className="hidden md:inline-flex" variant="link">
           <Link href={eventUrl}>
             <span aria-hidden="true">{t("action.Read more")}</span>
             <span className="sr-only">
               {t("action.Read more about {something}", {
-                something: event.title,
+                something: getLocalizedEventTitle(event.title, locale),
               })}
             </span>
           </Link>
@@ -81,7 +85,7 @@ async function EventItem({ event }: { event: IlmomasiinaEvent }) {
           <span aria-hidden="true">{t("action.Read more")}</span>
           <span className="sr-only">
             {t("action.Read more about {something}", {
-              something: event.title,
+              something: getLocalizedEventTitle(event.title, locale),
             })}
           </span>
         </Link>
diff --git a/apps/web/src/custom-pages/event-calendar.tsx b/apps/web/src/custom-pages/event-calendar.tsx
index 0ab90e1..0ffca90 100644
--- a/apps/web/src/custom-pages/event-calendar.tsx
+++ b/apps/web/src/custom-pages/event-calendar.tsx
@@ -20,15 +20,17 @@ import {
   useCurrentLocale,
   I18nProviderClient,
 } from "../locales/client";
+import { getLocalizedEventTitle } from "../lib/utils";
+import type { Locale } from "../locales/server";
 
 type IlmomasiinEventWithDate = IlmomasiinaEvent & { date: string };
 type CalendarEvent = Omit<Event, "resource"> & { resource: { url: string } };
 
 // Make calendar events into clickable links.
-function EventElement(event: EventProps<CalendarEvent>) {
+function EventElement(props: EventProps<CalendarEvent>) {
   return (
-    <Link className="block h-full" href={event.event.resource.url}>
-      {event.title}
+    <Link className="block h-full" href={props.event.resource.url}>
+      {props.title}
     </Link>
   );
 }
@@ -40,7 +42,7 @@ function EventCalendar({
 }: {
   events: IlmomasiinaEvent[];
   eventsUrl: string;
-  locale: string;
+  locale: Locale;
 }) {
   const t = useScopedI18n("calendar");
   const ta = useScopedI18n("action");
@@ -63,7 +65,7 @@ function EventCalendar({
     return {
       start: startDate,
       end: endDate,
-      title: event.title,
+      title: getLocalizedEventTitle(event.title, locale),
       resource: {
         url: eventUrl,
       },
diff --git a/apps/web/src/custom-pages/events-page.tsx b/apps/web/src/custom-pages/events-page.tsx
index af5344a..a16f65a 100644
--- a/apps/web/src/custom-pages/events-page.tsx
+++ b/apps/web/src/custom-pages/events-page.tsx
@@ -12,6 +12,7 @@ import {
   formatDateYear,
   formatDateYearOptions,
   formatDatetimeYear,
+  getLocalizedEventTitle,
 } from "../lib/utils";
 import { BackButton } from "../components/back-button";
 import { getCurrentLocale, getScopedI18n } from "../locales/server";
@@ -130,7 +131,7 @@ async function EventCard({ event }: { event: IlmomasiinaEvent }) {
         href={`/${locale}/${t("events")}/${event.slug}`}
         className="text-pretty text-lg font-bold underline-offset-2 before:absolute before:left-0 before:top-0 before:z-0 before:block before:size-full before:cursor-[inherit] group-hover:underline md:w-1/3"
       >
-        <h2>{event.title}</h2>
+        <h2>{getLocalizedEventTitle(event.title, locale)}</h2>
       </Link>
 
       {event.date ? (
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 9189650..50e2ae5 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -294,6 +294,17 @@ export const getQuotasWithOpenAndQueue = (
   return quotasWithOpenAndQueue;
 };
 
+export function getLocalizedEventTitle(eventTitle: string, locale: Locale) {
+  const titleLocaleSeparator = " // ";
+  const [fiTitle, enTitle] = eventTitle.split(titleLocaleSeparator);
+
+  if (locale === "en") {
+    return enTitle || fiTitle;
+  }
+
+  return fiTitle;
+}
+
 /**
  * Typescript gymnastics
  */