Frontend: More dayjs -> Temporal migration (#9282)

tristanlabelle · web-flow · commit b8ce1c3dc829 · 2026-07-19T09:34:43.000-04:00
diff --git a/app/web/features/dashboard/UpcomingStayCard.tsx b/app/web/features/dashboard/UpcomingStayCard.tsx
@@ -3,7 +3,6 @@ import { Box, Skeleton, styled, Typography } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import Avatar from "components/Avatar";
 import { useAuthContext } from "features/auth/AuthProvider";
-import useCurrentUser from "features/userQueries/useCurrentUser";
 import { useLiteUser } from "features/userQueries/useLiteUsers";
 import { useTranslation } from "i18n";
 import { DASHBOARD } from "i18n/namespaces";
@@ -12,11 +11,10 @@ import { HostRequest } from "proto/requests_pb";
 import { routeToHostRequest } from "routes";
 import { Temporal } from "temporal-polyfill";
 import {
+  daysBetween,
   localizeDateTimeRange,
   localizeRelativeTimeUnit,
-  UTC_TIMEZONE,
 } from "utils/date";
-import dayjs from "utils/dayjs";
 
 const StyledCard = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -131,8 +129,6 @@ export default function UpcomingStayCard({
   hostRequest,
 }: UpcomingStayCardProps) {
   const { authState } = useAuthContext();
-  const { data: currentUser } = useCurrentUser();
-  const timezone = currentUser?.timezone ?? UTC_TIMEZONE;
   const {
     t,
     i18n: { language: locale },
@@ -144,31 +140,29 @@ export default function UpcomingStayCard({
     : hostRequest.hostUserId;
   const { data: otherUser, isLoading } = useLiteUser(otherUserId);
 
-  const fromDate = dayjs.tz(hostRequest.fromDate, UTC_TIMEZONE);
-  const toDate = dayjs.tz(hostRequest.toDate, UTC_TIMEZONE);
-  const nights = toDate.diff(fromDate, "day");
-  const today = dayjs().tz(timezone).startOf("day");
-  const daysUntil = fromDate.diff(today, "day");
-  const daysUntilEnd = toDate.diff(today, "day");
+  const fromDate = Temporal.PlainDate.from(hostRequest.fromDate);
+  const toDate = Temporal.PlainDate.from(hostRequest.toDate);
+  const today = Temporal.Now.plainDateISO();
+  const nights = daysBetween(fromDate, toDate);
+  const daysUntil = daysBetween(today, fromDate);
+  const daysUntilEnd = daysBetween(today, toDate);
   const isOngoing = daysUntil <= 0 && daysUntilEnd >= 0;
   const isImminent = daysUntil <= 3;
   const relativeDaysLabel = localizeRelativeTimeUnit(
     daysUntil,
     "days",
     locale,
-    { capitalize: true },
-  );
-
-  const dateRange = localizeDateTimeRange(
-    Temporal.PlainDateTime.from(hostRequest.fromDate),
-    Temporal.PlainDateTime.from(hostRequest.toDate),
     {
-      locale,
-      includeTime: false,
-      abbreviate: true,
+      capitalize: true,
     },
   );
 
+  const dateRange = localizeDateTimeRange(fromDate, toDate, {
+    locale,
+    includeTime: false,
+    abbreviate: true,
+  });
+
   const primary = isLoading ? (
     <Skeleton width={80} />
   ) : (
diff --git a/app/web/features/messages/groupchats/MuteDialog.tsx b/app/web/features/messages/groupchats/MuteDialog.tsx
@@ -20,7 +20,8 @@ import { useTranslation } from "i18n";
 import { GLOBAL, MESSAGES } from "i18n/namespaces";
 import React, { useState } from "react";
 import { service } from "service";
-import dayjs from "utils/dayjs";
+import { Temporal } from "temporal-polyfill";
+import { approxTimeDuration } from "utils/date";
 
 type DurationChoice = "1h" | "8h" | "1d" | "1w" | "1m" | "forever";
 
@@ -33,14 +34,14 @@ export default function MuteDialog({
   const muteMutation = useMutation<void, RpcError, DurationChoice>({
     mutationFn: async (duration) => {
       let d;
-      if (duration === "1h") d = dayjs.duration({ hours: 1 });
-      else if (duration === "8h") d = dayjs.duration({ hours: 8 });
-      else if (duration === "1d") d = dayjs.duration({ days: 1 });
-      else if (duration === "1w") d = dayjs.duration({ weeks: 1 });
-      else if (duration === "1m") d = dayjs.duration({ months: 1 });
+      if (duration === "1h") d = Temporal.Duration.from({ hours: 1 });
+      else if (duration === "8h") d = Temporal.Duration.from({ hours: 8 });
+      else if (duration === "1d") d = Temporal.Duration.from({ days: 1 });
+      else if (duration === "1w") d = Temporal.Duration.from({ weeks: 1 });
+      else if (duration === "1m") d = Temporal.Duration.from({ months: 1 });
       await service.conversations.muteChat({
         groupChatId,
-        forDuration: d,
+        forDuration: d ? approxTimeDuration(d) : undefined,
         forever: !d,
       });
     },
diff --git a/app/web/features/messages/requests/HostRequestListItem.tsx b/app/web/features/messages/requests/HostRequestListItem.tsx
@@ -33,7 +33,6 @@ import { service } from "service";
 import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
 import { localizeDateTimeRange } from "utils/date";
-import dayjs from "utils/dayjs";
 import { firstName } from "utils/names";
 
 import HostRequestStatusText from "./HostRequestStatusText";
@@ -141,7 +140,12 @@ export default function HostRequestListItem({
         }`
     : "";
 
-  const isPast = dayjs(hostRequest?.toDate).isBefore(dayjs(), "day");
+  const isPast =
+    hostRequest &&
+    Temporal.PlainDate.compare(
+      Temporal.PlainDate.from(hostRequest.toDate),
+      Temporal.Now.plainDateISO(),
+    ) < 0;
 
   const queryClient = useQueryClient();
 
diff --git a/app/web/features/messages/requests/HostRequestUserSummarySection.tsx b/app/web/features/messages/requests/HostRequestUserSummarySection.tsx
@@ -13,7 +13,7 @@ import { LiteUser } from "proto/api_pb";
 import { HostRequest } from "proto/requests_pb";
 import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
-import { localizeDateTimeRange, numNights } from "utils/date";
+import { daysBetween, localizeDateTimeRange } from "utils/date";
 import truncateTextEllipsis from "utils/truncateTextEllipsis";
 
 const StyledRequestedDatesWrapper = styled("div")(({ theme }) => ({
@@ -136,7 +136,10 @@ const HostRequestUserSummarySection = ({
             >
               (
               {t("host_request_view.request_duration", {
-                count: numNights(hostRequest.toDate, hostRequest.fromDate),
+                count: daysBetween(
+                  Temporal.PlainDate.from(hostRequest.fromDate),
+                  Temporal.PlainDate.from(hostRequest.toDate),
+                ),
               })}
               )
             </Typography>
diff --git a/app/web/features/messages/requests/HostRequestView.tsx b/app/web/features/messages/requests/HostRequestView.tsx
@@ -35,8 +35,8 @@ import {
 import { useRef, useState } from "react";
 import { messagesRoute } from "routes";
 import { service } from "service";
+import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
-import dayjs from "utils/dayjs";
 import { firstName } from "utils/names";
 import { useIsNativeEmbed } from "utils/nativeLink";
 
@@ -154,7 +154,12 @@ export default function HostRequestView({
   const currentUserId = useAuthContext().authState.userId;
   const isHost = hostRequest?.hostUserId === currentUserId;
   const otherUser = isHost ? surfer : host;
-  const isRequestPast = dayjs(hostRequest?.toDate).isBefore(dayjs(), "day");
+  const isRequestPast =
+    hostRequest &&
+    Temporal.PlainDate.compare(
+      Temporal.PlainDate.from(hostRequest.toDate),
+      Temporal.Now.plainDateISO(),
+    ) < 0;
 
   let title =
     otherUser && hostRequest
diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
@@ -13,12 +13,11 @@ import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
 import {
   localizeDateTime,
+  localizeDuration,
   localizeRelativeTime,
   localizeYearMonth,
   timestampToPlainDateTime,
-  UTC_TIMEZONE,
 } from "utils/date";
-import dayjs, { i18nToDayjsLocale } from "utils/dayjs";
 
 interface Props {
   user: User.AsObject;
@@ -80,11 +79,8 @@ export const ResponseRateText = ({
 export const ResponseRateLabel = ({ user }: Props) => {
   const {
     t,
-    i18n: { language },
+    i18n: { language: locale },
   } = useTranslation(PROFILE);
-  // Localize the humanized durations at the call site (no global dayjs locale).
-  const dayjsLocale = i18nToDayjsLocale(language);
-
   let rateText = undefined;
   let timeText = undefined;
 
@@ -95,34 +91,38 @@ export const ResponseRateLabel = ({ user }: Props) => {
   } else if (user.some) {
     rateText = t("response_rate_text_some");
     timeText = t("response_time_text_some", {
-      p33: dayjs
-        .duration(user.some.responseTimeP33!.seconds, "second")
-        .locale(dayjsLocale)
-        .humanize(),
+      p33: localizeDuration(
+        Temporal.Duration.from({ seconds: user.some.responseTimeP33!.seconds }),
+        locale,
+      ),
     });
   } else if (user.most) {
     rateText = t("response_rate_text_most");
     timeText = t("response_time_text_most", {
-      p33: dayjs
-        .duration(user.most.responseTimeP33!.seconds, "second")
-        .locale(dayjsLocale)
-        .humanize(),
-      p66: dayjs
-        .duration(user.most.responseTimeP66!.seconds, "second")
-        .locale(dayjsLocale)
-        .humanize(),
+      p33: localizeDuration(
+        Temporal.Duration.from({ seconds: user.most.responseTimeP33!.seconds }),
+        locale,
+      ),
+      p66: localizeDuration(
+        Temporal.Duration.from({ seconds: user.most.responseTimeP66!.seconds }),
+        locale,
+      ),
     });
   } else if (user.almostAll) {
     rateText = t("response_rate_text_almost_all");
     timeText = t("response_time_text_almost_all", {
-      p33: dayjs
-        .duration(user.almostAll.responseTimeP33!.seconds, "second")
-        .locale(dayjsLocale)
-        .humanize(),
-      p66: dayjs
-        .duration(user.almostAll.responseTimeP66!.seconds, "second")
-        .locale(dayjsLocale)
-        .humanize(),
+      p33: localizeDuration(
+        Temporal.Duration.from({
+          seconds: user.almostAll.responseTimeP33!.seconds,
+        }),
+        locale,
+      ),
+      p66: localizeDuration(
+        Temporal.Duration.from({
+          seconds: user.almostAll.responseTimeP66!.seconds,
+        }),
+        locale,
+      ),
     });
   }
 
@@ -288,16 +288,15 @@ export const RemainingAboutLabels = ({ user }: Props) => {
             : ""
         }
       />
-      <LabelAndText
-        label={t("profile:heading.local_time")}
-        text={localizeDateTime(
-          Temporal.Now.plainDateTimeISO(user.timezone || UTC_TIMEZONE),
-          {
+      {user.timezone ? (
+        <LabelAndText
+          label={t("profile:heading.local_time")}
+          text={localizeDateTime(Temporal.Now.plainDateTimeISO(user.timezone), {
             locale,
             includeDate: false,
-          },
-        )}
-      />
+          })}
+        />
+      ) : undefined}
     </>
   );
 };
diff --git a/app/web/service/conversations.ts b/app/web/service/conversations.ts
@@ -21,9 +21,10 @@ import {
   SendMessageReq,
   SetGroupChatArchiveStatusReq,
 } from "proto/conversations_pb";
+import { Temporal } from "temporal-polyfill";
+import { durationToProtobuf } from "utils/date";
 
 import client from "./client";
-import { Duration, duration2pb } from "./utils/date";
 import isGrpcError from "./utils/isGrpcError";
 
 export async function listGroupChats(
@@ -172,14 +173,15 @@ export async function getDirectMessage(userId: number) {
 
 export type MuteChatOptions = Pick<MuteGroupChatReq.AsObject, "groupChatId"> &
   Partial<Omit<MuteGroupChatReq.AsObject, "groupChatId" | "forDuration">> & {
-    forDuration?: Duration;
+    forDuration?: Temporal.Duration;
   };
 export async function muteChat(options: MuteChatOptions) {
   const req = new MuteGroupChatReq();
   req.setGroupChatId(options.groupChatId);
   if (options.unmute) req.setUnmute(true);
   if (options.forever) req.setForever(true);
-  if (options.forDuration) req.setForDuration(duration2pb(options.forDuration));
+  if (options.forDuration)
+    req.setForDuration(durationToProtobuf(options.forDuration));
   return client.conversations.muteGroupChat(req);
 }
 
diff --git a/app/web/service/utils/date.ts b/app/web/service/utils/date.ts
diff --git a/app/web/utils/date.test.ts b/app/web/utils/date.test.ts
diff --git a/app/web/utils/date.ts b/app/web/utils/date.ts

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ import { LiteUser } from "proto/api_pb";`
`13`	`13`	`import { HostRequest } from "proto/requests_pb";`
`14`	`14`	`import { Temporal } from "temporal-polyfill";`
`15`	`15`	`import { theme } from "theme";`
`16`		`-import { localizeDateTimeRange, numNights } from "utils/date";`
	`16`	`+import { daysBetween, localizeDateTimeRange } from "utils/date";`
`17`	`17`	`import truncateTextEllipsis from "utils/truncateTextEllipsis";`
`18`	`18`
`19`	`19`	`const StyledRequestedDatesWrapper = styled("div")(({ theme }) => ({`
`@@ -136,7 +136,10 @@ const HostRequestUserSummarySection = ({`
`136`	`136`	`>`
`137`	`137`	`(`
`138`	`138`	`{t("host_request_view.request_duration", {`
`139`		`- count: numNights(hostRequest.toDate, hostRequest.fromDate),`
	`139`	`+ count: daysBetween(`
	`140`	`+ Temporal.PlainDate.from(hostRequest.fromDate),`
	`141`	`+ Temporal.PlainDate.from(hostRequest.toDate),`
	`142`	`+ ),`
`140`	`143`	`})}`
`141`	`144`	`)`
`142`	`145`	`</Typography>`