Switch from Date to Temporal (#2051)

* useClock.ts * schema.prisma migration.sql _index.tsx admin.shows.$show_.edit.tsx admin.shows.new.tsx show.ts admin.spec.ts global.setup.ts * AudioControllerTest.tsx * helpers.ts useShowInfo.spec.tsx * useShowInfo.spec.tsx * ShowInfo.ts useShowInfo.ts AudioController.tsx ShowPlaying.spec.tsx * $show.[data.json].ts package.json package-lock.json * eslint.config.js
stephenwade · Feb 23, 2025 · 0130cc3 · 0130cc3
1 parent 52d5619
commit 0130cc3
Show file tree

Hide file tree

Showing 20 changed files with 152 additions and 111 deletions.
diff --git a/app/components/AudioController/AudioController.tsx b/app/components/AudioController/AudioController.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 
-import { differenceInSeconds } from 'date-fns';
 import type { AudioHTMLAttributes, FC, ReactNode, SyntheticEvent } from 'react';
 import {
   useCallback,
@@ -248,10 +247,9 @@ export const AudioController: FC<AudioControllerProps> = ({
           showInfo.currentSet &&
           change.currentSet.id !== showInfo.currentSet.id
         ) {
-          const setDifference = differenceInSeconds(
-            change.currentSet.start,
-            showInfo.currentSet.start,
-          );
+          const setDifference = showInfo.currentSet.start
+            .until(change.currentSet.start)
+            .total({ unit: 'seconds' });
           delay += setDifference;
         }
 

diff --git a/app/hooks/useClock.ts b/app/hooks/useClock.ts
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Temporal } from 'temporal-polyfill';
 
 function getCurrentSecond() {
-  return Math.floor(Date.now() / 1000);
+  return Math.floor(Temporal.Now.instant().epochMilliseconds / 1000);
 }
 
 export function useClock(enabled = true): void {

diff --git a/app/hooks/useShowInfo.ts b/app/hooks/useShowInfo.ts
@@ -1,5 +1,5 @@
-import { addMilliseconds, addSeconds, isBefore, parseISO } from 'date-fns';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Temporal } from 'temporal-polyfill';
 
 import type { loader as showDataLoader } from '~/routes/$show.[data.json]';
 import type { ShowData } from '~/types/ShowData';
@@ -10,6 +10,10 @@ import { useFetcherIgnoreErrors } from './useFetcherIgnoreErrors';
 
 type LoadedMetadataHandler = (args: { id: string; duration: number }) => void;
 
+function isBefore(a: Temporal.Instant, b: Temporal.Instant): boolean {
+  return Temporal.Instant.compare(a, b) === -1;
+}
+
 export function useShowInfo(
   loaderData: Pick<ShowData, 'slug' | 'serverDate' | 'sets'>,
   { ci = false, enableClock = true } = {},
@@ -46,48 +50,58 @@ export function useShowInfo(
   const data = fetcher.data ?? loaderData;
 
   const clientTimeSkewMs = useMemo(() => {
-    const serverDate = parseISO(data.serverDate);
+    const serverDate = Temporal.Instant.from(data.serverDate);
 
-    return Date.now() - serverDate.valueOf();
+    return (
+      Temporal.Now.instant().epochMilliseconds - serverDate.epochMilliseconds
+    );
   }, [data.serverDate]);
 
   const sets = useMemo(() => {
     return data.sets
       .map(function parseDates(set) {
-        const start = parseISO(set.start);
+        const start = Temporal.Instant.from(set.start);
 
         const length = audioDurations[set.id] ?? set.duration;
-        const end = addSeconds(start, length);
+        const end = start.add({
+          // `.add()` requires integers
+          // seconds: length,
+          milliseconds: Math.round(length * 1000),
+        });
 
         return { ...set, start, end };
       })
       .map(function adjustForClientTimeSkew(set) {
-        const start = addMilliseconds(set.start, clientTimeSkewMs);
-        const end = addMilliseconds(set.end, clientTimeSkewMs);
+        const start = set.start.add({ milliseconds: clientTimeSkewMs });
+        const end = set.end.add({ milliseconds: clientTimeSkewMs });
 
         return { ...set, start, end };
       });
   }, [audioDurations, clientTimeSkewMs, data.sets]);
 
   const currentSetIndex = sets.findIndex((set) =>
-    isBefore(Date.now(), set.end),
+    isBefore(Temporal.Now.instant(), set.end),
   );
   const currentSet = currentSetIndex === -1 ? undefined : sets[currentSetIndex];
   const nextSet =
     currentSetIndex === -1 ? undefined : sets[currentSetIndex + 1];
 
   const timeInfo: TargetTimeInfo = currentSet
-    ? isBefore(Date.now(), currentSet.start)
+    ? isBefore(Temporal.Now.instant(), currentSet.start)
       ? {
           status: 'WAITING_UNTIL_START',
           secondsUntilSet: Math.ceil(
-            (currentSet.start.valueOf() - Date.now()) / 1000,
+            Temporal.Now.instant()
+              .until(currentSet.start)
+              .total({ unit: 'seconds' }),
           ),
         }
       : {
           status: 'PLAYING',
           currentTime: Math.floor(
-            (Date.now() - currentSet.start.valueOf()) / 1000,
+            currentSet.start
+              .until(Temporal.Now.instant())
+              .total({ unit: 'seconds' }),
           ),
         }
     : { status: 'ENDED' };

diff --git a/app/routes/$show.[data.json].ts b/app/routes/$show.[data.json].ts
@@ -1,5 +1,5 @@
 import { json, type LoaderFunction } from '@remix-run/node';
-import { addSeconds, formatISO } from 'date-fns';
+import { Temporal } from 'temporal-polyfill';
 
 import { db } from '~/db.server/db';
 import type { ShowData } from '~/types/ShowData';
@@ -28,10 +28,16 @@ export const loader = (async ({ params }) => {
       id: set.id,
       audioUrl: set.audioFile.url,
       artist: set.artist,
-      start: addSeconds(show.startDate, set.offset).toISOString(),
+      start: Temporal.Instant.from(show.startDate)
+        .add({
+          // `.add()` requires integers
+          // seconds: set.offset,
+          milliseconds: Math.round(set.offset * 1000),
+        })
+        .toString(),
       duration: set.audioFile.duration,
     })),
-    serverDate: formatISO(new Date()),
+    serverDate: Temporal.Now.instant().toString(),
   };
 
   // Single Fetch doesn't work with Clerk

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -3,15 +3,18 @@ import '~/styles/index.css';
 
 import type { LoaderFunction } from '@remix-run/node';
 import { redirect } from '@remix-run/node';
-import { addSeconds } from 'date-fns';
 import type { FC } from 'react';
-import { Temporal, toTemporalInstant } from 'temporal-polyfill';
+import { Temporal } from 'temporal-polyfill';
 
 import { cache, INDEX_SHOW_SLUG_KEY } from '~/cache.server/cache';
 import { db } from '~/db.server/db';
 import { showIncludeData } from '~/types/ShowWithData';
 import { validateShow } from '~/types/validateShow';
 
+function isAfter(a: Temporal.Instant, b: Temporal.Instant): boolean {
+  return Temporal.Instant.compare(a, b) === 1;
+}
+
 /**
  * Returns the slug of the earliest show that hasn't ended yet.
  */
@@ -26,18 +29,23 @@ async function calculateIndexShowSlug(): Promise<string | null> {
     // `validateShow` ensures there's at least one set
     const lastSet = show.sets.at(-1)!;
 
+    const startDate = Temporal.Instant.from(show.startDate);
+
     return {
       slug: show.slug,
-      startDate: toTemporalInstant.call(show.startDate),
-      endDate: addSeconds(
-        show.startDate,
-        lastSet.offset + lastSet.audioFile.duration,
-      ),
+      startDate,
+      endDate: startDate.add({
+        // `.add()` requires integers
+        // seconds: lastSet.offset + lastSet.audioFile.duration,
+        milliseconds: Math.round(
+          (lastSet.offset + lastSet.audioFile.duration) * 1000,
+        ),
+      }),
     };
   });
 
-  const upcomingShows = showsWithEndDate.filter(
-    ({ endDate }) => endDate > new Date(),
+  const upcomingShows = showsWithEndDate.filter(({ endDate }) =>
+    isAfter(endDate, Temporal.Now.instant()),
   );
 
   upcomingShows.sort((a, b) =>

diff --git a/app/routes/admin.shows.$show_.edit.tsx b/app/routes/admin.shows.$show_.edit.tsx
@@ -7,7 +7,7 @@ import { json, redirect } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import type { FC } from 'react';
 import { validationError } from 'remix-validated-form';
-import { Temporal, toTemporalInstant } from 'temporal-polyfill';
+import { Temporal } from 'temporal-polyfill';
 
 import { redirectToLogin } from '~/auth/redirect-to-login.server';
 import { cache, INDEX_SHOW_SLUG_KEY } from '~/cache.server/cache';
@@ -41,8 +41,7 @@ export const loader = (async (args) => {
   if (!show) throw notFound();
 
   const startDate = show.startDate
-    ? toTemporalInstant
-        .call(show.startDate)
+    ? Temporal.Instant.from(show.startDate)
         .toZonedDateTimeISO(show.timeZone)
         .toPlainDateTime()
         .toString({ smallestUnit: 'second' })
@@ -76,21 +75,19 @@ export const action = (async (args) => {
   const { data, error } = await validator.validate(form);
   if (error) return validationError(error);
 
-  const { sets, ...rest } = replaceUndefinedsWithNull(data);
+  const { startDate, sets, ...rest } = replaceUndefinedsWithNull(data);
 
-  const startDate = rest.startDate
-    ? new Date(
-        Temporal.PlainDateTime.from(rest.startDate).toZonedDateTime(
-          rest.timeZone,
-        ).epochMilliseconds,
-      )
-    : null;
+  const startInstant = startDate
+    ? Temporal.PlainDateTime.from(startDate)
+        .toZonedDateTime(rest.timeZone)
+        .toInstant()
+    : undefined;
 
   await db.show.update({
     where: { id },
     data: {
       ...rest,
-      startDate,
+      startDate: startInstant?.toString(),
       sets: {
         deleteMany: {
           id: { notIn: sets.map((set) => set.id).filter(isDefined) },

diff --git a/app/routes/admin.shows.new.tsx b/app/routes/admin.shows.new.tsx
@@ -29,20 +29,18 @@ export const action = (async (args) => {
   const { data, error } = await validator.validate(form);
   if (error) return validationError(error);
 
-  const { sets, ...rest } = data;
+  const { startDate, sets, ...rest } = data;
 
-  const startDate = rest.startDate
-    ? new Date(
-        Temporal.PlainDateTime.from(rest.startDate).toZonedDateTime(
-          rest.timeZone,
-        ).epochMilliseconds,
-      )
-    : null;
+  const startInstant = startDate
+    ? Temporal.PlainDateTime.from(startDate)
+        .toZonedDateTime(rest.timeZone)
+        .toInstant()
+    : undefined;
 
   const show = await db.show.create({
     data: {
       ...rest,
-      startDate,
+      startDate: startInstant?.toString(),
       sets: { create: sets },
     },
   });

diff --git a/app/types/ShowInfo.ts b/app/types/ShowInfo.ts
@@ -1,8 +1,10 @@
+import type { Temporal } from 'temporal-polyfill';
+
 import type { SetData } from './ShowData';
 
 type SetInfo = Omit<SetData, 'start'> & {
-  start: Date;
-  end: Date;
+  start: Temporal.Instant;
+  end: Temporal.Instant;
 };
 
 interface SetsInfo {

diff --git a/eslint.config.js b/eslint.config.js
@@ -69,6 +69,19 @@ export default tseslint.config(
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       ...reactHooks.configs.recommended.rules,
 
+      'no-restricted-globals': [
+        'error',
+        { name: 'Date', message: 'Use `Temporal` instead.' },
+      ],
+      '@typescript-eslint/no-restricted-types': [
+        'error',
+        {
+          types: {
+            Date: 'Use `Temporal` instead.',
+          },
+        },
+      ],
+
       'no-plusplus': 'error',
       'object-shorthand': 'warn',
       quotes: ['warn', 'single', { avoidEscape: true }],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,6 @@
     "@remix-run/react": "2.15.3",
     "@remix-run/serve": "2.15.3",
     "@remix-validated-form/with-zod": "2.0.7",
-    "date-fns": "3.6.0",
     "nanoid": "5.1.2",
     "node-cache": "5.1.2",
     "react": "18.3.1",

diff --git a/playwright/ct-tests/AudioController/AudioControllerTest.tsx b/playwright/ct-tests/AudioController/AudioControllerTest.tsx
@@ -1,9 +1,9 @@
 import { json } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { createRemixStub } from '@remix-run/testing';
-import { addSeconds } from 'date-fns';
 import type { FC } from 'react';
 import { useState } from 'react';
+import { Temporal } from 'temporal-polyfill';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
 import type { AudioMetadata } from '~/components/AudioController';
@@ -31,7 +31,7 @@ function getMockData({
   alternate = false,
   empty = false,
 }: GetMockDataProps): Pick<ShowData, 'slug' | 'serverDate' | 'sets'> {
-  const now = new Date();
+  const now = Temporal.Now.instant();
 
   const sets: ShowData['sets'] = empty
     ? []
@@ -40,21 +40,21 @@ function getMockData({
           id: alternate ? ID_3 : ID_1,
           audioUrl: `${AUDIO_FILE_URL}?${alternate ? 3 : 1}`,
           artist: `Artist ${alternate ? 3 : 1}`,
-          start: addSeconds(now, 0 - offsetSec).toISOString(),
+          start: now.add({ seconds: 0 - offsetSec }).toString(),
           duration: AUDIO_FILE_LENGTH,
         },
         {
           id: alternate ? ID_4 : ID_2,
           audioUrl: `${AUDIO_FILE_URL}?${alternate ? 4 : 2}`,
           artist: `Artist ${alternate ? 4 : 2}`,
-          start: addSeconds(now, 100 - offsetSec).toISOString(),
+          start: now.add({ seconds: 100 - offsetSec }).toString(),
           duration: AUDIO_FILE_LENGTH,
         },
       ];
 
   return {
     slug: 'test',
-    serverDate: now.toISOString(),
+    serverDate: now.toString(),
     sets,
   };
 }