Support capitalization, remove localizeRelativeDays, default to "auto" numeric, and fix EventPage isPastEvent

Author: tristanlabelle

app/web/features/communities/events/EventPage.tsx

@@ -239,7 +239,7 @@ export default function EventPage({
     ? Temporal.Instant.compare(
         timestampToInstant(event.endTime),
         Temporal.Now.instant(),
-      ) >= 0
+      ) < 0
     : false;
 
   const isCreator = currentUserId === event?.creatorUserId;

app/web/features/dashboard/DashboardPublicTripCard.tsx

@@ -14,7 +14,7 @@ import { DASHBOARD, PUBLIC_TRIPS } from "i18n/namespaces";
 import Link from "next/link";
 import { myPublicTripsRoute, routeToCommunity } from "routes";
 import { Temporal } from "temporal-polyfill";
-import { localizeDateTimeRange, localizeRelativeDays } from "utils/date";
+import { localizeDateTimeRange, localizeRelativeTimeUnit } from "utils/date";
 import dayjs from "utils/dayjs";
 
 export const CARD_WIDTH = 220;
@@ -120,7 +120,7 @@ function WhenChip({
   if (isOngoing) {
     label = t("dashboard:public_trips.when_now");
   } else if (daysUntil === 0 || daysUntil === 1) {
-    label = localizeRelativeDays(daysUntil, locale);
+    label = localizeRelativeTimeUnit(daysUntil, "days", locale);
   }
 
   if (!label) return null;

app/web/features/dashboard/UpcomingStayCard.tsx

@@ -13,7 +13,7 @@ import { routeToHostRequest } from "routes";
 import { Temporal } from "temporal-polyfill";
 import {
   localizeDateTimeRange,
-  localizeRelativeDays,
+  localizeRelativeTimeUnit,
   UTC_TIMEZONE,
 } from "utils/date";
 import dayjs from "utils/dayjs";
@@ -152,10 +152,12 @@ export default function UpcomingStayCard({
   const daysUntilEnd = toDate.diff(today, "day");
   const isOngoing = daysUntil <= 0 && daysUntilEnd >= 0;
   const isImminent = daysUntil <= 3;
-  const relativeDaysLabel = (() => {
-    const label = localizeRelativeDays(daysUntil, locale);
-    return label.charAt(0).toUpperCase() + label.slice(1);
-  })();
+  const relativeDaysLabel = localizeRelativeTimeUnit(
+    daysUntil,
+    "days",
+    locale,
+    { standalone: true },
+  );
 
   const dateRange = localizeDateTimeRange(
     Temporal.PlainDateTime.from(hostRequest.fromDate),

app/web/utils/date.test.ts

@@ -173,6 +173,7 @@ describe("localizeDurationLargestUnit", () => {
       localizeDurationLargestUnit(
         Temporal.Duration.from({ milliseconds: 1 }),
         "en",
+        { numeric: "always" },
       ),
     ).toBe("in 0 seconds");
     expect(
@@ -292,7 +293,10 @@ describe("localizeDurationLargestUnit", () => {
       localizeDurationLargestUnit(
         Temporal.Duration.from({ seconds: 1 }),
         "en",
-        { smallestUnit: "minutes" },
+        {
+          numeric: "always",
+          smallestUnit: "minutes",
+        },
       ),
     ).toBe("in 0 minutes");
     expect(
@@ -322,6 +326,16 @@ describe("localizeDurationLargestUnit", () => {
       ),
     ).toBe("1 minute ago");
   });
+
+  it("supports capitalizing", () => {
+    expect(
+      localizeDurationLargestUnit(
+        Temporal.Duration.from({ seconds: 1 }),
+        "en",
+        { standalone: true },
+      ),
+    ).toBe("In 1 second");
+  });
 });
 
 describe("localizeRelativeInstant", () => {
@@ -360,14 +374,20 @@ describe("localizeRelativeInstant", () => {
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * 7n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("in 1 week");
     expect(
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * 13n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("in 1 week");
     expect(
@@ -388,7 +408,10 @@ describe("localizeRelativeInstant", () => {
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * 30n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("in 1 month");
     expect(
@@ -402,7 +425,10 @@ describe("localizeRelativeInstant", () => {
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * 365n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("in 1 year"); // We approximate years as 365 days
   });
@@ -412,14 +438,20 @@ describe("localizeRelativeInstant", () => {
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * -13n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("1 week ago");
     expect(
       localizeRelativeInstant(
         new Temporal.Instant(nanosecondsPerDay * -14n),
         "en",
-        { relativeTo: instantZero },
+        {
+          numeric: "always",
+          relativeTo: instantZero,
+        },
       ),
     ).toBe("2 weeks ago");
   });

app/web/utils/date.ts

@@ -274,41 +274,44 @@ export function timestampToPlainDateTime(
   return instantToPlainDateTime(timestampToInstant(timestamp), timezone);
 }
 
+export interface LocalizeRelativeTimeOptions {
+  style?: Intl.RelativeTimeFormatStyle;
+  /// We override the default to "auto"
+  numeric?: Intl.RelativeTimeFormatNumeric;
+  /// If true, capitalize if the script supports it.
+  standalone?: boolean;
+}
+
+// Creating Intl objects every time is slow, so cache them.
 const relativeTimeFormatCache = new Map<string, Intl.RelativeTimeFormat>();
 
 export function localizeRelativeTimeUnit(
   value: number,
   unit: Intl.RelativeTimeFormatUnit,
   locale: string,
-  options?: {
-    style?: Intl.RelativeTimeFormatStyle;
-    numeric?: Intl.RelativeTimeFormatNumeric;
-  },
+  options?: LocalizeRelativeTimeOptions,
 ): string {
-  const cacheKey = JSON.stringify({ locale, ...options });
+  const intlOptions = {
+    style: options?.style ?? "long",
+    numeric: options?.numeric ?? "auto",
+  };
+  const cacheKey = JSON.stringify({ locale, ...intlOptions });
   let formatter = relativeTimeFormatCache.get(cacheKey);
   if (!formatter) {
-    formatter = new Intl.RelativeTimeFormat(locale, options);
+    formatter = new Intl.RelativeTimeFormat(locale, intlOptions);
     relativeTimeFormatCache.set(cacheKey, formatter);
   }
-  return formatter.format(value, unit);
-}
-
-/// Localizes a number of days as a relative time string (e.g. "today", "tomorrow", "in 3 days").
-export function localizeRelativeDays(days: number, locale: string): string {
-  return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(
-    days,
-    "day",
-  );
+  let result = formatter.format(value, unit);
+  if (options?.standalone === true)
+    result = capitalizeFirstLetter(result, locale);
+  return result;
 }
 
 /// Localizes a duration (positive or negative)'s largest unit (e.g. "4 days" ignoring minutes).
 export function localizeDurationLargestUnit(
   delta: Temporal.Duration,
   locale: string,
-  options?: {
-    style?: Intl.RelativeTimeFormatStyle;
-    numeric?: Intl.RelativeTimeFormatNumeric;
+  options?: LocalizeRelativeTimeOptions & {
     smallestUnit?: Temporal.PluralizeUnit<Temporal.TimeUnit>;
     t?: TFunction<"global", undefined>;
   },
@@ -351,10 +354,8 @@ export function localizeDurationLargestUnit(
 export function localizeRelativeInstant(
   instant: Temporal.Instant | Timestamp.AsObject,
   locale: string,
-  options?: {
+  options?: LocalizeRelativeTimeOptions & {
     relativeTo?: Temporal.Instant;
-    style?: Intl.RelativeTimeFormatStyle;
-    numeric?: Intl.RelativeTimeFormatNumeric;
     smallestUnit?: Temporal.PluralizeUnit<Temporal.TimeUnit>;
     t?: TFunction<"global", undefined>;
   },