Revert "Replace moment with date-fns (#196)"

This reverts commit a321507.

Author: eltoder

package-lock.json

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

package.json

@@ -1,12 +1,9 @@
-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(5000);
-  const opts = { addSuffix: true };
-  return <>{formatDistanceStrict(value, time, opts)}</>;
+  const time = useMoment();
+  return <>{time.to(value)}</>;
 }
 
 export default ElapsedTime;

src/components/ElapsedTime.js

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

src/hooks/useMoment.js

@@ -1,4 +1,4 @@
-import formatDuration from "format-duration";
+import moment from "moment";
 import {
   RegExpMatcher,
   TextCensor,
@@ -196,11 +196,11 @@ export function generateName() {
 }
 
 export function formatTime(t, hideSubsecond) {
-  const res = formatDuration(Math.max(t, 0), {
-    leading: true,
-    ms: !hideSubsecond,
-  });
-  return hideSubsecond ? res : res.slice(0, -1);
+  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);
 }
 
 export function formatCount(count, singular, plural = null) {

src/util.js

@@ -1,4 +1,4 @@
-import { badWords, formatANoun, formatTime, parseDuration } from "./util";
+import { badWords, formatANoun, parseDuration } from "./util";
 
 describe("bad words filter", () => {
   it("sort of works", () => {
@@ -18,7 +18,7 @@ describe("bad words filter", () => {
   });
 });
 
-it("formatANoun works", () => {
+it("parseDuration works", () => {
   expect(formatANoun("Set")).toBe("a Set");
   expect(formatANoun("UltraSet")).toBe("an UltraSet");
   expect(formatANoun("GhostSet")).toBe("a GhostSet");
@@ -37,23 +37,3 @@ 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");
-});