Frontend/i18n: Default localizeDateTime to the browser's timezone. (#8124)

Author: tristanlabelle

app/web/features/auth/InviteCodesPage.tsx

@@ -19,7 +19,7 @@ import { ListInviteCodesRes } from "proto/account_pb";
 import React from "react";
 import { inviteRoute } from "routes";
 import { service } from "service";
-import { BROWSER_TIMEZONE, localizeDateTime } from "utils/date";
+import { localizeDateTime } from "utils/date";
 
 import { inviteCodesKey } from "../queryKeys";
 
@@ -166,7 +166,6 @@ export default function InviteCodesPage() {
                             datetime: localizeDateTime(
                               new Date(c.created.seconds * 1000),
                               {
-                                timezone: BROWSER_TIMEZONE,
                                 locale: locale,
                                 abbreviate: true,
                               },
@@ -181,7 +180,6 @@ export default function InviteCodesPage() {
                             datetime: localizeDateTime(
                               new Date(c.disabled.seconds * 1000),
                               {
-                                timezone: BROWSER_TIMEZONE,
                                 locale,
                                 abbreviate: true,
                               },

app/web/features/auth/jail/ModNoteCard.tsx

@@ -7,7 +7,7 @@ import { ModNote } from "proto/account_pb";
 import { useState } from "react";
 import { service } from "service";
 import { theme } from "theme";
-import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
+import { localizeDateTime, timestamp2Date } from "utils/date";
 
 const StyledNoteContainer = styled("div")(() => ({
   marginBottom: theme.spacing(4),
@@ -34,7 +34,6 @@ export default function ModNoteCard({ note, updateJailed }: ModNoteCardProps) {
   const [loading, setLoading] = useState(false);
 
   const formattedTime = localizeDateTime(timestamp2Date(note.created!), {
-    timezone: BROWSER_TIMEZONE,
     locale,
     abbreviate: true,
   });

app/web/features/auth/logins/LoginCard.tsx

@@ -21,7 +21,7 @@ import { AUTH, GLOBAL } from "i18n/namespaces";
 import { useTranslation } from "next-i18next";
 import { ActiveSession } from "proto/account_pb";
 import { service } from "service";
-import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
+import { localizeDateTime, timestamp2Date } from "utils/date";
 import { timeAgo } from "utils/timeAgo";
 
 const StyledCard = styled(Card)(({ theme }) => ({
@@ -45,13 +45,11 @@ export default function LoginsPage({
     locale,
   });
   const createdDisplay = localizeDateTime(timestamp2Date(session.created!), {
-    timezone: BROWSER_TIMEZONE,
     locale,
     includeSeconds: true,
     abbreviate: true,
   });
   const expiryDisplay = localizeDateTime(timestamp2Date(session.expiry!), {
-    timezone: BROWSER_TIMEZONE,
     locale,
     includeTime: false,
     abbreviate: true,

app/web/features/communities/discussions/DiscussionPage.tsx

@@ -17,7 +17,7 @@ import { useRouter } from "next/router";
 import { Discussion } from "proto/discussions_pb";
 import { service } from "service";
 import { theme } from "theme";
-import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
+import { localizeDateTime, timestamp2Date } from "utils/date";
 
 import CommunityBase from "../CommunityBase";
 import CommunityPageSubHeader from "../CommunityPage/CommunityPageSubHeader";
@@ -143,7 +143,6 @@ export default function DiscussionPage({
                             dateOnly: localizeDateTime(
                               timestamp2Date(discussion.created!),
                               {
-                                timezone: BROWSER_TIMEZONE,
                                 locale,
                                 includeTime: false,
                               },

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

@@ -141,6 +141,7 @@ export default function EventCard({
     dayjs(timestamp2Date(event.startTime!)),
     dayjs(timestamp2Date(event.endTime!)),
     {
+      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
       timezone: BROWSER_TIMEZONE,
       locale,
       includeDayOfWeek: true,

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

@@ -417,6 +417,7 @@ export default function EventPage({
                     dayjs(timestamp2Date(event.startTime!)),
                     dayjs(timestamp2Date(event.endTime!)),
                     {
+                      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
                       timezone: BROWSER_TIMEZONE,
                       locale,
                       includeDayOfWeek: true,

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

@@ -139,6 +139,7 @@ const LongEventCard = ({
     dayjs(timestamp2Date(event.startTime!)),
     dayjs(timestamp2Date(event.endTime!)),
     {
+      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
       timezone: BROWSER_TIMEZONE,
       locale,
       includeDayOfWeek: true,

app/web/utils/date.ts

@@ -16,16 +16,15 @@ const numNights = (date1: string, date2: string) => {
   return diffDays;
 };
 
-/// Explicitly identifies the browser's timezone (clearer than "undefined").
+/// Allow call sites to explicitly reference the browser's timezone (clearer than "undefined").
 export const BROWSER_TIMEZONE: unique symbol = Symbol("browser-timezone");
 export const UTC_TIMEZONE: string = "Etc/UTC";
 
 interface LocalizeDateTimeParams {
-  /// The timezone to be used to figure the date components.
-  /// This is a required parameter to avoid unexpected results.
-  timezone: string | typeof BROWSER_TIMEZONE;
   /// The locale to localize in.
   locale: string;
+  /// The timezone to be used to figure the date components (defaults to the browser's).
+  timezone?: string | typeof BROWSER_TIMEZONE;
   /// Whether to include the date (defaults to true).
   includeDate?: boolean;
   /// If including the date, whether to include the day of week (defaults to false).
@@ -106,7 +105,7 @@ function createIntlDateTimeFormat(
       options.second = "numeric";
     }
   }
-  if (args.timezone !== BROWSER_TIMEZONE) {
+  if (args.timezone && args.timezone !== BROWSER_TIMEZONE) {
     options.timeZone = args.timezone;
   }
   return Intl.DateTimeFormat(args.locale, options);