Frontend/i18n: Use Temporal in localizeDateTime (#9247)

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 { localizeDateTime } from "utils/date";
+import { localizeDateTime, timestampToPlainDateTime } from "utils/date";
 
 import { inviteCodesKey } from "../queryKeys";
 
@@ -164,7 +164,7 @@ export default function InviteCodesPage() {
                         <>
                           {t("global:invites.created_datetime", {
                             datetime: localizeDateTime(
-                              new Date(c.created.seconds * 1000),
+                              timestampToPlainDateTime(c.created),
                               {
                                 locale: locale,
                                 abbreviate: true,
@@ -178,7 +178,7 @@ export default function InviteCodesPage() {
                           {" • "}
                           {t("global:invites.disabled_datetime", {
                             datetime: localizeDateTime(
-                              new Date(c.disabled.seconds * 1000),
+                              timestampToPlainDateTime(c.disabled),
                               {
                                 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 { localizeDateTime, timestamp2Date } from "utils/date";
+import { localizeDateTime, timestampToPlainDateTime } from "utils/date";
 
 const StyledNoteContainer = styled("div")(() => ({
   marginBottom: theme.spacing(4),
@@ -33,10 +33,13 @@ export default function ModNoteCard({ note, updateJailed }: ModNoteCardProps) {
   const [acknowledged, setAcknowledged] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const formattedTime = localizeDateTime(timestamp2Date(note.created!), {
-    locale,
-    abbreviate: true,
-  });
+  const formattedTime = localizeDateTime(
+    timestampToPlainDateTime(note.created!),
+    {
+      locale,
+      abbreviate: true,
+    },
+  );
 
   const acknowledge = async () => {
     setLoading(true);

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

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

app/web/features/auth/timezone/Timezone.tsx

@@ -1,8 +1,8 @@
 import { Typography } from "@mui/material";
 import { Trans, useTranslation } from "i18n";
 import { AUTH } from "i18n/namespaces";
+import { Temporal } from "temporal-polyfill";
 import { localizeDateTime } from "utils/date";
-import dayjs from "utils/dayjs";
 
 interface TimezoneProps {
   className?: string;
@@ -24,27 +24,18 @@ export default function Timezone({ className, timezone }: TimezoneProps) {
         <Trans
           t={t}
           i18nKey="account_settings_page.timezone_section.description"
+          components={{
+            1: <strong />,
+            4: <strong />,
+          }}
           values={{
             timezone: timezone,
-            time: localizeDateTime(dayjs(), {
-              timezone,
+            time: localizeDateTime(Temporal.Now.plainDateTimeISO(timezone), {
               locale,
               includeDate: false,
             }),
           }}
-        >
-          {`Your timezone is `}
-          <strong>{timezone}</strong>. Based on this, your local time is
-          approximately{` `}
-          <strong>
-            {localizeDateTime(dayjs(), {
-              timezone,
-              locale,
-              includeDate: false,
-            })}
-          </strong>
-          {`.`}
-        </Trans>
+        />
       </Typography>
       <Typography variant="body1">
         {t("account_settings_page.timezone_section.explanation")}

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

@@ -24,7 +24,11 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { service } from "service";
 import { theme } from "theme";
-import { localizeDateTime, timestamp2Date } from "utils/date";
+import {
+  localizeDateTime,
+  timestamp2Date,
+  timestampToPlainDateTime,
+} from "utils/date";
 import { timeAgo } from "utils/timeAgo";
 
 import { sendNativeBack, useIsNativeEmbed } from "../../../utils/nativeLink";
@@ -287,7 +291,9 @@ export default function DiscussionPage({
                               <Typography variant="body2">
                                 {t("communities:discussion_creation_date", {
                                   dateOnly: localizeDateTime(
-                                    timestamp2Date(discussion.created!),
+                                    timestampToPlainDateTime(
+                                      discussion.created!,
+                                    ),
                                     {
                                       locale,
                                       includeTime: false,

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

@@ -16,12 +16,7 @@ import Link from "next/link";
 import { Event } from "proto/events_pb";
 import { useMemo } from "react";
 import { routeToEvent } from "routes";
-import {
-  BROWSER_TIMEZONE,
-  localizeDateTimeRange,
-  timestamp2Date,
-} from "utils/date";
-import dayjs from "utils/dayjs";
+import { localizeDateTimeRange, timestampToPlainDateTime } from "utils/date";
 import stripMarkdown from "utils/stripMarkdown";
 
 const StyledCard = styled(Card, {
@@ -133,11 +128,10 @@ export default function EventCard({ event, className }: EventCardProps) {
   } = useTranslation([COMMUNITIES]);
 
   const dateTimeRangeText = localizeDateTimeRange(
-    dayjs(timestamp2Date(event.startTime!)),
-    dayjs(timestamp2Date(event.endTime!)),
+    // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
+    timestampToPlainDateTime(event.startTime!),
+    timestampToPlainDateTime(event.endTime!),
     {
-      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
-      timezone: BROWSER_TIMEZONE,
       locale,
       includeDayOfWeek: true,
       abbreviate: true,

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

@@ -34,9 +34,9 @@ import {
 import { service } from "service";
 import { theme } from "theme";
 import {
-  BROWSER_TIMEZONE,
   localizeDateTimeRange,
   timestamp2Date,
+  timestampToPlainDateTime,
 } from "utils/date";
 import dayjs from "utils/dayjs";
 import { sendNativeBack, useIsNativeEmbed } from "utils/nativeLink";
@@ -411,11 +411,10 @@ export default function EventPage({
                 <StyledCalendarIcon />
                 <Typography variant="body1">
                   {localizeDateTimeRange(
-                    dayjs(timestamp2Date(event.startTime!)),
-                    dayjs(timestamp2Date(event.endTime!)),
+                    // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
+                    timestampToPlainDateTime(event.startTime!),
+                    timestampToPlainDateTime(event.endTime!),
                     {
-                      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
-                      timezone: BROWSER_TIMEZONE,
                       locale,
                       includeDayOfWeek: true,
                       capitalize: true,

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

@@ -1,14 +1,13 @@
 import { styled } from "@mui/material";
 import Datepicker from "components/Datepicker";
 import Timepicker from "components/Timepicker";
-import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
 import { useTranslation } from "i18n";
 import { COMMUNITIES } from "i18n/namespaces";
 import { Event } from "proto/events_pb";
 import { UseFormReturn } from "react-hook-form";
 import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
-import { timestamp2Date } from "utils/date";
+import { timestampToPlainDateTime } from "utils/date";
 import { timePattern } from "utils/validation";
 
 import { CreateEventData } from "./EventForm";
@@ -32,16 +31,6 @@ interface EventTimeChangerProps
   errors: UseFormReturn<CreateEventData>["formState"]["errors"];
 }
 
-function toPlainDateTime(
-  timestamp: Timestamp.AsObject,
-): Temporal.PlainDateTime {
-  const legacyDate = timestamp2Date(timestamp);
-  const instant = Temporal.Instant.fromEpochMilliseconds(legacyDate.getTime());
-  // FIXME(#8064): Event times should be interpreted in their timezones.
-  const zoned = instant.toZonedDateTimeISO(Temporal.Now.timeZoneId());
-  return zoned.toPlainDateTime();
-}
-
 export default function EventTimeChanger({
   control,
   dirtyFields,
@@ -52,11 +41,12 @@ export default function EventTimeChanger({
 }: EventTimeChangerProps) {
   const { t } = useTranslation([COMMUNITIES]);
 
+  // FIXME(#8064): Event times should be interpreted in their timezones.
   const defaultStartDateTime = event?.startTime
-    ? toPlainDateTime(event.startTime)
+    ? timestampToPlainDateTime(event.startTime)
     : undefined;
   const defaultEndDateTime = event?.endTime
-    ? toPlainDateTime(event.endTime)
+    ? timestampToPlainDateTime(event.endTime)
     : undefined;
 
   const handleStartDateChange = (value: Temporal.PlainDate) => {

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

@@ -15,12 +15,7 @@ import { COMMUNITIES } from "i18n/namespaces";
 import Link from "next/link";
 import { Event } from "proto/events_pb";
 import { routeToEvent } from "routes";
-import {
-  BROWSER_TIMEZONE,
-  localizeDateTimeRange,
-  timestamp2Date,
-} from "utils/date";
-import dayjs from "utils/dayjs";
+import { localizeDateTimeRange, timestampToPlainDateTime } from "utils/date";
 
 const StyledCard = styled(Card)(({ theme }) => ({
   margin: 0,
@@ -137,11 +132,10 @@ const LongEventCard = ({
   } = useTranslation([COMMUNITIES]);
 
   const dateTimeRangeText = localizeDateTimeRange(
-    dayjs(timestamp2Date(event.startTime!)),
-    dayjs(timestamp2Date(event.endTime!)),
+    // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
+    timestampToPlainDateTime(event.startTime!),
+    timestampToPlainDateTime(event.endTime!),
     {
-      // TODO(#8064): Should use the event.timezone, but it's currently incorrect.
-      timezone: BROWSER_TIMEZONE,
       locale,
       includeDayOfWeek: true,
       includeTime: true,

app/web/features/dashboard/DashboardPublicTripCard.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from "i18n";
 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 dayjs from "utils/dayjs";
 
@@ -202,8 +203,8 @@ export function DashboardPublicTripCard({
   );
 
   const dateRange = localizeDateTimeRange(
-    new Date(trip.fromDate + "T00:00:00"),
-    new Date(trip.toDate + "T00:00:00"),
+    Temporal.PlainDateTime.from(trip.fromDate),
+    Temporal.PlainDateTime.from(trip.toDate),
     { locale, includeTime: false, abbreviate: true },
   );