delete moment of client

Author: purpleeeee

src/client/foundation/pages/Top/Top.jsx

@@ -1,4 +1,3 @@
-import moment from "moment-timezone";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
@@ -97,7 +96,9 @@ function useHeroImage(todayRaces) {
 
 /** @type {React.VFC} */
 export const Top = () => {
-  const { date = moment().format("YYYY-MM-DD") } = useParams();
+  const {
+    date = new Intl.DateTimeFormat().format(new Date()).replace(/\//g, "-"),
+  } = useParams();
 
   const ChargeButton = styled.button`
     background: ${Color.mono[700]};
@@ -136,7 +137,7 @@ export const Top = () => {
       ? [...raceData.races]
           .sort(
             (/** @type {Model.Race} */ a, /** @type {Model.Race} */ b) =>
-              moment(a.startAt) - moment(b.startAt),
+              new Date(a.startAt).getTime() - new Date(b.startAt).getTime(),
           )
           .filter((/** @type {Model.Race} */ race) =>
             isSameDay(race.startAt, date),

src/client/foundation/pages/races/Odds/Odds.jsx

@@ -1,4 +1,3 @@
-import moment from "moment-timezone";
 import React, { useCallback, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
@@ -11,7 +10,7 @@ import { TabNav } from "../../../components/navs/TabNav";
 import { Heading } from "../../../components/typographies/Heading";
 import { useFetch } from "../../../hooks/useFetch";
 import { Color, Radius, Space } from "../../../styles/variables";
-import { formatTime } from "../../../utils/DateUtils";
+import { formatTime, isBefore } from "../../../utils/DateUtils";
 import { jsonFetcher } from "../../../utils/HttpUtils";
 
 import { OddsRankingList } from "./internal/OddsRankingList";
@@ -61,7 +60,7 @@ export const Odds = () => {
     return <Container>Loading...</Container>;
   }
 
-  const isRaceClosed = moment(data.closeAt).isBefore(new Date());
+  const isRaceClosed = isBefore(new Date(), new Date(data.closeAt));
 
   return (
     <Container>

src/client/foundation/utils/DateUtils.js

@@ -1,11 +1,21 @@
-import moment from "moment-timezone";
+export const isBefore = (dateLeft, dateRight) => {
+  return new Date(dateLeft).getTime() < new Date(dateRight).getTime();
+};
+
+const isAfter = (dateLeft, dateRight) => {
+  return new Date(dateLeft).getTime() > new Date(dateRight).getTime();
+};
 /**
  * @param {string} dateLeft
  * @param {string} dateRight
  * @returns {boolean}
  */
 export const isSameDay = (dateLeft, dateRight) => {
-  return moment(dateLeft).isSame(moment(dateRight), "day");
+  const left = new Date(dateLeft);
+  left.setHours(0, 0, 0, 0);
+  const right = new Date(dateRight);
+  right.setHours(0, 0, 0, 0);
+  return left.getTime() === right.getTime();
 };
 
 /**
@@ -14,7 +24,10 @@ export const isSameDay = (dateLeft, dateRight) => {
  * @returns {string}
  */
 export const formatTime = (ts) => {
-  return moment(ts).format("H:mm");
+  return new Intl.DateTimeFormat("ja-jp", {
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(new Date(ts));
 };
 
 /**
@@ -23,13 +36,14 @@ export const formatTime = (ts) => {
  * @returns {string}
  */
 export const formatCloseAt = (closeAt, now = new Date()) => {
-  if (moment(closeAt).isBefore(now)) {
+  if (isBefore(new Date(closeAt), now)) {
     return "投票締切";
   }
 
-  if (moment(closeAt).isAfter(moment(now).add(2, "hours"))) {
+  if (isAfter(new Date(closeAt), new Date(now.setHours(now.getHours() + 2)))) {
     return "投票受付中";
   }
 
-  return `締切${moment(closeAt).diff(now, "minutes")}分前`;
+  const diff = (now.getTime() - new Date(closeAt).getTime()) / 3600000;
+  return `締切${Math.trunc(diff)}分前`;
 };

webpack.config.js

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
+
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-
 const CopyPlugin = require("copy-webpack-plugin");
 const nodeExternals = require("webpack-node-externals");