fix: parse story dates, add Story type

Author: wackerow

app/[locale]/10years/_components/types.ts

@@ -0,0 +1,10 @@
+export type Story = {
+  storyEnglish: string
+  storyOriginal: string
+  category: string
+  name: string
+  date: string
+  country: string
+  twitter: string
+  region: string
+}

app/[locale]/10years/_components/utils.ts

@@ -0,0 +1,31 @@
+import { formatDate, isValidDate } from "@/lib/utils/date"
+
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+import type { Story } from "./types"
+
+const parseDate = (date: string, locale = DEFAULT_LOCALE): string => {
+  // TODO: Remove this check when spreadsheet is fixed
+  // Currently dates are in the formatted as "DD.MM." which is not parsable by Date.parse
+  // If partially valid date, reformat it
+  const partiallyValidDate = /^(\d{1,2})\.(\d{1})\.$/
+  if (partiallyValidDate.test(date)) {
+    const [, day, month] = date.match(partiallyValidDate) || []
+    const newDate = `2025-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
+    return formatDate(newDate, locale)
+  }
+
+  // If the date is already in a valid format, return it
+  if (isValidDate(date)) return formatDate(date, locale)
+  // If the date is not recognized, return original value
+  return date
+}
+
+export const parseStoryDates = (
+  stories: Story[],
+  locale = DEFAULT_LOCALE
+): Story[] =>
+  stories.map(({ date, ...story }) => ({
+    ...story,
+    date: parseDate(date, locale),
+  }))

app/[locale]/10years/page.tsx

@@ -29,6 +29,7 @@ import InnovationSwiper from "./_components/InnovationSwiper"
 import Stories from "./_components/Stories"
 import TenYearGlobe from "./_components/TenYearGlobe"
 import TenYearHero from "./_components/TenYearHero"
+import { parseStoryDates } from "./_components/utils"
 
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
@@ -54,6 +55,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
 
   const [fetched10YearEvents, fetched10YearStories] = await loadData()
 
+  const stories = parseStoryDates(fetched10YearStories, locale)
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage("/10years")
@@ -319,7 +322,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
               </ButtonLink>
             </div>
           </div>
-          <Stories stories={fetched10YearStories} />
+          <Stories stories={stories} />
         </div>
 
         <div className="w-full gap-8 px-8 py-8 pt-32">