Add event metadata

apps/web/src/app/events/components/EventInfoBox.tsx

@@ -1,6 +1,7 @@
 import type { Committee, Company, Event } from "@dotkomonline/types"
 import Image from "next/image"
 import type { FC } from "react"
+import { formatDate } from "../utils"
 
 interface Props {
   event: Event
@@ -19,9 +20,27 @@ export const EventInfoBox: FC<Props> = ({ event, committees, companies }) => {
   const committeeList = committees.map(mapToImageAndName)
   const companyList = companies.map(mapToImageAndName)
 
+  const dateString = formatDate(event.createdAt, {
+    absolute: {
+      capitalize: true,
+    },
+    relative: {
+      capitalize: true,
+    },
+  })
+
+  const date = dateString.isRelative && dateString.inPast ? `${dateString.value} siden` : dateString.value
+
   return (
-    <div className="mr-10 w-full flex flex-col gap-8 md:w-[60%]">
-      <div className="flex flex-row gap-8">{[...committeeList, ...companyList]}</div>
+    <div className="mr-10 w-full flex flex-col space-y-8 md:w-[60%]">
+      <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-4">{[...committeeList, ...companyList]}</div>
+        <div className="flex flex-row space-x-4 text-slate-9 items-center">
+          <p>{date}</p>
+          {/* TODO - implement name */}
+          <p>Lagt ut av Navn</p>
+        </div>
+      </div>
       <p className="bg-slate-2 p-5 text-[18px] rounded-2xl">{event.description}</p>
     </div>
   )

apps/web/src/app/events/components/StatusCard.tsx

@@ -1,6 +1,6 @@
 import type { Attendance } from "@dotkomonline/types"
 import type { FC } from "react"
-import { dateToString, getStructuredDateInfo } from "../utils"
+import { formatDate, getStructuredDateInfo } from "../utils"
 
 interface StatusCardProps {
   attendance: Attendance
@@ -39,17 +39,17 @@ export const StatusCard: FC<StatusCardProps> = ({ attendance }) => {
 
   switch (structuredDateInfo.status) {
     case "NOT_OPENED": {
-      const { value, isRelative } = dateToString(structuredDateInfo.timeUtilOpen)
+      const { value, isRelative } = formatDate(structuredDateInfo.timeUtilOpen)
       text = isRelative ? `Åpner om <strong>${value}</strong>` : `Åpner <strong>${value}</strong>`
       break
     }
     case "OPEN": {
-      const { value, isRelative } = dateToString(structuredDateInfo.timeUntilClose)
+      const { value, isRelative } = formatDate(structuredDateInfo.timeUntilClose)
       text = isRelative ? `Stenger om <strong>${value}</strong>` : `Stenger <strong>${value}</strong>`
       break
     }
     case "CLOSED": {
-      const { value, isRelative } = dateToString(structuredDateInfo.timeElapsedSinceClose)
+      const { value, isRelative } = formatDate(structuredDateInfo.timeElapsedSinceClose)
       text = isRelative ? `Stengte for <strong>${value}</strong> siden` : `Stengte <strong>${value}</strong>`
       break
     }

apps/web/src/app/events/utils.ts

@@ -1,42 +1,103 @@
 import type { Attendance } from "@dotkomonline/types"
 
+interface DateToStringOptions {
+  absolute: {
+    capitalize?: boolean
+    excludeYear?: boolean
+    force?: boolean
+    includeWeekday?: boolean
+  }
+  relative: {
+    capitalize?: boolean
+    force?: boolean
+  }
+}
+
 interface DateString {
   value: string
   isRelative: boolean
+  inPast: boolean
 }
-// todo: move out of file
-export const dateToString = (attendanceOpeningDate: Date): DateString => {
-  // todo: move out of scope
-  const THREE_DAYS_MS = 259_200_000
-  const ONE_DAY_MS = 86_400_000
-  const ONE_HOUR_MS = 3_600_000
-  const ONE_MINUTE_MS = 60_000
-  const ONE_SECOND_MS = 1_000
 
+const ONE_YEAR_MS = 31_536_000_000
+const THREE_DAYS_MS = 259_200_000
+const ONE_DAY_MS = 86_400_000
+const ONE_HOUR_MS = 3_600_000
+const ONE_MINUTE_MS = 60_000
+const ONE_SECOND_MS = 1_000
+
+const capitalizeFirstLetter = (value: string): string => {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+/**
+ * Converts a date to a string representation
+ * @param date - The date to convert
+ * @param options - Options for the conversion
+ * @returns The string representation of the date
+ * @example
+ * const date = Date.now()
+ * formatDate(date) // "nå"
+ * formatDate(date, { relative: { capitalize: true } }) // "Nå"
+ * formatDate(date, { absolute: { force: true, capitalize: true } }) // "Fredag 17. mai 2023"
+ *
+ * const inOneWeek = new Date(date.getTime() + 604_800_000)
+ * formatDate(inOneWeek) // "fredag 24. mai"
+ * formatDate(inOneWeek, { relative: { force: true } }) // "7 dager"
+ * formatDate(inOneWeek, { relative: { force: true , capitalize: true } }) // "7 dager"
+ */
+export const formatDate = (date: Date, options?: DateToStringOptions): DateString => {
   const now = new Date().getTime()
-  const dateDifference = attendanceOpeningDate.getTime() - now
+  const timeDifference = date.getTime() - now
 
-  if (Math.abs(dateDifference) > THREE_DAYS_MS) {
-    const formatter = new Intl.DateTimeFormat("nb-NO", {
-      day: "numeric",
-      month: "long",
-      weekday: "long",
-    })
+  const shouldForceAbsolute = options?.absolute.force && !options?.relative.force
+  const isBeyondThreshold = Math.abs(timeDifference) > THREE_DAYS_MS
 
-    // "mandag 12. april"
-    const value = formatter.format(attendanceOpeningDate)
+  if (shouldForceAbsolute || (isBeyondThreshold && !options?.relative.force)) {
+    return formatDateToAbsoluteString(date, options, timeDifference)
+  }
+  return formatDateToRelativeString(options, timeDifference)
+}
+
+const formatDateToAbsoluteString = (
+  date: Date,
+  options: DateToStringOptions | undefined,
+  timeDifference: number
+): DateString => {
+  const weekdayOption = options?.absolute.includeWeekday ? "long" : undefined
+  const yearOption = options?.absolute.excludeYear ? undefined : "numeric"
+
+  const formatter = new Intl.DateTimeFormat("nb-NO", {
+    day: "numeric",
+    month: "long",
+    weekday: weekdayOption,
+    year: yearOption,
+  })
+
+  const inPast = timeDifference < 0
+  let value = formatter.format(date)
 
-    return { value, isRelative: false }
+  if (options?.absolute.capitalize) {
+    value = capitalizeFirstLetter(value)
   }
 
-  const days = Math.floor(Math.abs(dateDifference) / ONE_DAY_MS)
-  const hours = Math.floor((Math.abs(dateDifference) % ONE_DAY_MS) / ONE_HOUR_MS)
-  const minutes = Math.floor((Math.abs(dateDifference) % ONE_HOUR_MS) / ONE_MINUTE_MS)
-  const seconds = Math.floor((Math.abs(dateDifference) % ONE_MINUTE_MS) / ONE_SECOND_MS)
+  return { value, isRelative: false, inPast }
+}
+
+const formatDateToRelativeString = (options: DateToStringOptions | undefined, timeDifference: number): DateString => {
+  const inPast = timeDifference < 0
+
+  const years = Math.floor(Math.abs(timeDifference) / ONE_YEAR_MS)
+  const days = Math.floor((Math.abs(timeDifference) % ONE_YEAR_MS) / ONE_DAY_MS)
+  const hours = Math.floor((Math.abs(timeDifference) % ONE_DAY_MS) / ONE_HOUR_MS)
+  const minutes = Math.floor((Math.abs(timeDifference) % ONE_HOUR_MS) / ONE_MINUTE_MS)
+  const seconds = Math.floor((Math.abs(timeDifference) % ONE_MINUTE_MS) / ONE_SECOND_MS)
 
-  let value = "nå"
+  let value = options?.relative.capitalize ? "Nå" : "nå"
 
-  if (days > 0) {
+  if (years > 0) {
+    value = `${years} år`
+  } else if (days > 0) {
     value = `${days} dag${days === 1 ? "" : "er"}`
   } else if (hours > 0) {
     value = `${hours} time${hours === 1 ? "" : "r"}`
@@ -46,7 +107,7 @@ export const dateToString = (attendanceOpeningDate: Date): DateString => {
     value = `${seconds} sekund${seconds === 1 ? "" : "er"}`
   }
 
-  return { value, isRelative: true }
+  return { value, isRelative: true, inPast }
 }
 
 type ReturnType =