Frontend/i18n: Move monthFormatter to localizeDateTime infra. (#8123)

Author: tristanlabelle

app/web/features/profile/view/ReferenceListItem.tsx

@@ -7,7 +7,7 @@ import { COMMUNITIES, GLOBAL } from "i18n/namespaces";
 import { useTranslation } from "next-i18next";
 import { LiteUser } from "proto/api_pb";
 import { Reference } from "proto/references_pb";
-import { monthFormatter, timestamp2Date } from "utils/date";
+import { localizeYearMonth, timestamp2Date } from "utils/date";
 
 export const REFERENCE_LIST_ITEM_TEST_ID = "reference-list-item";
 
@@ -63,9 +63,10 @@ export default function ReferenceListItem({
           )}
           {reference.writtenTime && (
             <Pill variant="rounded">
-              {monthFormatter(locale).format(
-                timestamp2Date(reference.writtenTime),
-              )}
+              {localizeYearMonth(timestamp2Date(reference.writtenTime), {
+                locale,
+                abbreviate: true,
+              })}
             </Pill>
           )}
         </StyledBadgesContainer>

app/web/features/profile/view/userLabels.tsx

@@ -10,7 +10,12 @@ import {
   User,
 } from "proto/api_pb";
 import { theme } from "theme";
-import { localizeDateTime, monthFormatter, timestamp2Date } from "utils/date";
+import {
+  localizeDateTime,
+  localizeYearMonth,
+  timestamp2Date,
+  UTC_TIMEZONE,
+} from "utils/date";
 import dayjs from "utils/dayjs";
 import { timeAgo, TimeUnit } from "utils/timeAgo";
 
@@ -264,14 +269,17 @@ export const RemainingAboutLabels = ({ user }: Props) => {
         label={t("profile:heading.joined")}
         text={
           user.joined
-            ? monthFormatter(locale).format(timestamp2Date(user.joined))
+            ? localizeYearMonth(timestamp2Date(user.joined), {
+                locale,
+                abbreviate: true,
+              })
             : ""
         }
       />
       <LabelAndText
         label={t("profile:heading.local_time")}
         text={localizeDateTime(dayjs(), {
-          timezone: user.timezone || "Etc/UTC",
+          timezone: user.timezone || UTC_TIMEZONE,
           locale,
           includeDate: false,
         })}

app/web/utils/date.ts

@@ -4,12 +4,6 @@ import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
 import daysjs, { Dayjs } from "./dayjs";
 import { dayMillis } from "./timeAgo";
 
-const monthFormatter = (locale: string) =>
-  new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric",
-  });
-
 const numNights = (date1: string, date2: string) => {
   const diffTime = Date.parse(date1) - Date.parse(date2);
   const diffDays = Math.ceil(diffTime / dayMillis);
@@ -27,6 +21,8 @@ interface LocalizeDateTimeParams {
   timezone?: string | typeof BROWSER_TIMEZONE;
   /// Whether to include the date (defaults to true).
   includeDate?: boolean;
+  /// If including the date, whether to include the day (defaults to true).
+  includeDay?: boolean;
   /// If including the date, whether to include the day of week (defaults to false).
   includeDayOfWeek?: boolean;
   /// Whether to include the time (defaults to true).
@@ -49,6 +45,24 @@ export function localizeDateTime(
   return format.format(date);
 }
 
+/// Localizes only the year and month of a date.
+export function localizeYearMonth(
+  date: Date | Dayjs,
+  args: {
+    timezone?: string | typeof BROWSER_TIMEZONE;
+    locale: string;
+    abbreviate?: boolean;
+  },
+): string {
+  return localizeDateTime(date, {
+    timezone: args.timezone,
+    locale: args.locale,
+    abbreviate: args.abbreviate,
+    includeDay: false,
+    includeTime: false,
+  });
+}
+
 /// Localizes a range of date and times as a string.
 export function localizeDateTimeRange(
   start: Date | Dayjs,
@@ -93,7 +107,9 @@ function createIntlDateTimeFormat(
   if (args.includeDate !== false) {
     options.year = "numeric";
     options.month = args.abbreviate ? "short" : "long";
-    options.day = "numeric";
+    if (args.includeDay !== false) {
+      options.day = "numeric";
+    }
     if (args.includeDayOfWeek) {
       options.weekday = args.abbreviate ? "short" : "long";
     }
@@ -128,4 +144,4 @@ function isSameOrFutureDate(date1: Dayjs, date2: Dayjs): boolean {
   return isSameDate(date1, date2) || date1.isAfter(date2);
 }
 
-export { isSameOrFutureDate, monthFormatter, numNights, timestamp2Date };
+export { isSameOrFutureDate, numNights, timestamp2Date };