Replace moment with date-fns

Author: eltoder

package-lock.json

@@ -13,8 +13,9 @@
     "@stripe/stripe-js": "^1.25.0",
     "chart.js": "^3.7.1",
     "clsx": "^1.1.1",
+    "date-fns": "^4.1.0",
     "firebase": "^9.6.9",
-    "moment": "^2.29.1",
+    "format-duration": "^3.0.2",
     "obscenity": "^0.4.4",
     "project-name-generator": "^2.1.9",
     "react": "^17.0.2",

package.json

@@ -1,9 +1,12 @@
+import formatDistanceStrict from "date-fns/formatDistanceStrict";
+
 import useMoment from "../hooks/useMoment";
 
 // Wrapper around useMoment, since state hooks cause rerender of component
 function ElapsedTime({ value }) {
-  const time = useMoment();
-  return <>{time.to(value)}</>;
+  const time = useMoment(5000);
+  const opts = { addSuffix: true };
+  return <>{formatDistanceStrict(value, time, opts)}</>;
 }
 
 export default ElapsedTime;

src/components/ElapsedTime.js

@@ -1,18 +1,14 @@
-import moment from "moment";
 import { useEffect, useState } from "react";
 
 import useFirebaseRef from "./useFirebaseRef";
 
 function useMoment(delay = 1000) {
-  const [time, setTime] = useState(moment()); // Estimated firebase server time
+  const [time, setTime] = useState(Date.now()); // Estimated firebase server time
   const [offset] = useFirebaseRef(".info/serverTimeOffset");
 
   useEffect(() => {
     if (!delay) return;
-
-    const id = setInterval(() => {
-      setTime(moment(Date.now() + offset));
-    }, delay);
+    const id = setInterval(() => setTime(Date.now() + offset), delay);
     return () => clearInterval(id);
   }, [offset, delay]);
 

src/hooks/useMoment.js

@@ -1,4 +1,4 @@
-import moment from "moment";
+import formatDuration from "format-duration";
 import {
   RegExpMatcher,
   TextCensor,
@@ -196,11 +196,11 @@ export function generateName() {
 }
 
 export function formatTime(t, hideSubsecond) {
-  t = Math.max(t, 0);
-  const hours = Math.floor(t / (3600 * 1000));
-  const rest = t % (3600 * 1000);
-  const format = hideSubsecond ? "mm:ss" : "mm:ss.SS";
-  return (hours ? `${hours}:` : "") + moment.utc(rest).format(format);
+  const res = formatDuration(Math.max(t, 0), {
+    leading: true,
+    ms: !hideSubsecond,
+  });
+  return hideSubsecond ? res : res.slice(0, -1);
 }
 
 export function formatCount(count, singular, plural = null) {

src/util.js

@@ -1,4 +1,4 @@
-import { badWords, formatANoun, parseDuration } from "./util";
+import { badWords, formatANoun, formatTime, parseDuration } from "./util";
 
 describe("bad words filter", () => {
   it("sort of works", () => {
@@ -18,7 +18,7 @@ describe("bad words filter", () => {
   });
 });
 
-it("parseDuration works", () => {
+it("formatANoun works", () => {
   expect(formatANoun("Set")).toBe("a Set");
   expect(formatANoun("UltraSet")).toBe("an UltraSet");
   expect(formatANoun("GhostSet")).toBe("a GhostSet");
@@ -37,3 +37,23 @@ it("parseDuration works", () => {
   expect(parseDuration("300")).toBe(null);
   expect(parseDuration("")).toBe(null);
 });
+
+it("formatTime works", () => {
+  const check = (ms, expected) => {
+    expect(formatTime(ms)).toBe(expected);
+    expect(formatTime(ms, true)).toBe(expected.slice(0, -3));
+  };
+  check(-12345, "00:00.00");
+  check(0, "00:00.00");
+  check(999, "00:00.99");
+  check(12349, "00:12.34");
+  check(59999, "00:59.99");
+  check(123000, "02:03.00");
+  check(123459, "02:03.45");
+  check(1234599, "20:34.59");
+  check(3599999, "59:59.99");
+  check(3600000, "01:00:00.00");
+  check(3725669, "01:02:05.66");
+  check(37256699, "10:20:56.69");
+  check(372566999, "4:07:29:26.99");
+});