Issue #1054 - Replacing moment by dayjs

client/package.json

@@ -32,10 +32,10 @@
     "@pixi/filter-glow": "^4.2.0",
     "@pixi/filter-outline": "^4.2.0",
     "@pixi/sound": "^4.4.1",
+    "dayjs": "^1.11.13",
     "i18next": "^21.9.0",
     "labrute-fla-parser": "^1.0.13",
     "labrute-static-fla-parser": "^1.0.6",
-    "moment": "^2.29.4",
     "pixi-tweener": "^0.12.2",
     "pixi.js": "^6.5.9",
     "react": "^18.2.0",

client/src/App.tsx

@@ -1,6 +1,6 @@
 import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import React, { Suspense, useMemo, useState } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { useRoutes } from 'react-router-dom';
@@ -13,6 +13,7 @@ import routes from './routes';
 import { ColorModeContext } from './theme/ColorModeContext';
 import dark from './theme/dark';
 import light from './theme/light';
+import './utils/dayjs';
 
 /**
  * App entry point
@@ -44,7 +45,7 @@ const App = () => {
   );
 
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <HelmetProvider>
         <CssBaseline />
         <AlertProvider>

client/src/components/ActivityStatus.tsx

@@ -1,7 +1,7 @@
 import { User } from '@labrute/prisma';
 import { Circle } from '@mui/icons-material';
 import { SvgIconOwnProps, Tooltip } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,8 +14,8 @@ export const ActivityStatus = ({
   ...rest
 }: Props) => {
   const { t } = useTranslation();
-  const lastSeen = moment.utc(user.lastSeen);
-  const now = moment.utc();
+  const lastSeen = dayjs.utc(user.lastSeen);
+  const now = dayjs.utc();
 
   return (
     <Tooltip title={t('lastSeen', { date: lastSeen.fromNow() })}>

client/src/components/Cell/CellGlobalTournament.tsx

@@ -1,7 +1,7 @@
 import { Fighter, GLOBAL_TOURNAMENT_START_HOUR, TournamentsGetGlobalFight, TournamentsGetGlobalResponse } from '@labrute/core';
 import { Close } from '@mui/icons-material';
 import { Box, Paper, PaperProps, useTheme } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useBrute } from '../../hooks/useBrute';
@@ -29,7 +29,7 @@ const fighterToBrute = (fighter: Fighter) => ({
 });
 
 interface CellGlobalTournamentProps extends PaperProps {
-  date?: moment.Moment;
+  date?: dayjs.Dayjs;
   name?: string;
 }
 
@@ -45,14 +45,14 @@ const CellGlobalTournament = ({
   const Alert = useAlert();
   const navigate = useNavigate();
 
-  const now = useMemo(() => moment.utc(), []);
+  const now = useMemo(() => dayjs.utc(), []);
   const bruteName = useMemo(() => name || brute?.name || '', [brute, name]);
 
   const [data, setData] = useState<TournamentsGetGlobalResponse | null>(null);
 
   const watchingRound = useMemo(() => (date
     ? 999
-    : moment.utc().isSame(brute?.globalTournamentWatchedDate, 'day')
+    : dayjs.utc().isSame(brute?.globalTournamentWatchedDate, 'day')
       ? (brute?.globalTournamentRoundWatched || 0) + 1
       : data?.tournament?.fights.find((f) => f.tournamentStep === 1) ? 1 : 2), [brute, date, data]);
 

client/src/components/Cell/CellLog.tsx

@@ -1,6 +1,6 @@
 import { InventoryItemType, Log, LogType } from '@labrute/prisma';
 import { Box, Paper, PaperProps, Tooltip, useTheme } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Link from '../Link';
@@ -94,7 +94,7 @@ const CellLog = ({ log, sx, ...rest }: CellLogProps) => {
                   : log.type === LogType.ascend
                     ? t(log.level && log.level > 1 ? 'log.ascends' : 'log.ascend', { brute: log.currentBrute.name, value: log.level ?? 0 })
                     : log.type === LogType.tournament
-                      ? t('log.tournament', { date: moment.utc(log.date).format('DD/MM/YY') })
+                      ? t('log.tournament', { date: dayjs.utc(log.date).format('DD/MM/YY') })
                       : t(`log.${log.type}`, { value: log.brute })}
             </Text>
           )}

client/src/components/Cell/CellMain.tsx

@@ -1,7 +1,7 @@
 import { BruteRanking, getFightsLeft, getMaxFightsPerDay, getWinsNeededToRankUp, getXPNeeded } from '@labrute/core';
 import { Lang } from '@labrute/prisma';
 import { AlertTitle, Box, BoxProps, Alert as MuiAlert, Stack, Tooltip } from '@mui/material';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAlert } from '../../hooks/useAlert';
@@ -77,8 +77,8 @@ const CellMain = ({
           severity="error"
           variant="filled"
         >
-          <AlertTitle>{t('taggedForDeletion', { days: moment.utc(brute.willBeDeletedAt).diff(moment.utc(), 'days') })}</AlertTitle>
-          {t(`deletionReason.${brute.deletionReason}`, { days: moment.utc(brute.willBeDeletedAt).diff(moment.utc(), 'days') })}
+          <AlertTitle>{t('taggedForDeletion', { days: dayjs.utc(brute.willBeDeletedAt).diff(dayjs.utc(), 'days') })}</AlertTitle>
+          {t(`deletionReason.${brute.deletionReason}`, { days: dayjs.utc(brute.willBeDeletedAt).diff(dayjs.utc(), 'days') })}
         </MuiAlert>
       )}
       <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 2 }}>
@@ -134,13 +134,13 @@ const CellMain = ({
         )}
 
       {/* Rank up */}
-      {owner && brute.canRankUpSince && brute.ranking > 0 && (!moment.utc(brute.canRankUpSince).isSame(moment.utc(), 'day') || brute.currentTournamentStepWatched === 6) && (
+      {owner && brute.canRankUpSince && brute.ranking > 0 && (!dayjs.utc(brute.canRankUpSince).isSame(dayjs.utc(), 'day') || brute.currentTournamentStepWatched === 6) && (
         <FantasyButton color="warning" onClick={rankUp} sx={{ mb: 1 }}>
           {t('rankUp')}
         </FantasyButton>
       )}
       {/* Ascend */}
-      {owner && brute.canRankUpSince && brute.ranking === 0 && (!moment.utc(brute.canRankUpSince).isSame(moment.utc(), 'day') || brute.currentTournamentStepWatched === 6) && (
+      {owner && brute.canRankUpSince && brute.ranking === 0 && (!dayjs.utc(brute.canRankUpSince).isSame(dayjs.utc(), 'day') || brute.currentTournamentStepWatched === 6) && (
         <Link
           to={`/${brute.name}/ascend`}
           sx={{
@@ -208,7 +208,7 @@ const CellMain = ({
       )}
       {/* BRUTE SACRIFICE */}
       {owner
-        && moment.utc().isAfter(moment.utc(brute.createdAt), 'day')
+        && dayjs.utc().isAfter(dayjs.utc(brute.createdAt), 'day')
         && !!confirmSacrifice
         && (
           <FantasyButton

client/src/components/Cell/CellSocials.tsx

@@ -9,7 +9,7 @@ import useStateAsync from '../../hooks/useStateAsync';
 import Server from '../../utils/Server';
 import Link from '../Link';
 import Text from '../Text';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useAlert } from '../../hooks/useAlert';
 import catchError from '../../utils/catchError';
 import { ActivityStatus } from '../ActivityStatus';
@@ -135,10 +135,10 @@ const CellSocials = ({
               </Tooltip>
             </Grid>
             <Grid item xs={6}>
-              <Tooltip title={t('created', { date: moment.utc(brute.createdAt).format('LLL') })}>
+              <Tooltip title={t('created', { date: dayjs.utc(brute.createdAt).format('LLL') })}>
                 <Text bold component="span">
                   <Today color="secondary" sx={{ verticalAlign: 'middle', mr: 0.5 }} />
-                  {moment.utc(brute.createdAt).fromNow()}
+                  {dayjs.utc(brute.createdAt).fromNow()}
                 </Text>
               </Tooltip>
             </Grid>

client/src/components/Cell/CellTournament.tsx

@@ -1,6 +1,5 @@
 import { Lang } from '@labrute/prisma';
 import { Box, Paper, PaperProps } from '@mui/material';
-import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAlert } from '../../hooks/useAlert';
@@ -11,6 +10,7 @@ import catchError from '../../utils/catchError';
 import FantasyButton from '../FantasyButton';
 import StyledButton from '../StyledButton';
 import Text from '../Text';
+import dayjs from 'dayjs';
 
 export interface CellTournamentProps extends PaperProps {
   language: Lang;
@@ -26,8 +26,8 @@ const CellTournament = ({
   const { brute, owner, updateBrute } = useBrute();
   const { updateData } = useAuth();
 
-  const now = useMemo(() => moment.utc(), []);
-  const tomorrow = useMemo(() => moment.utc().add(1, 'day'), []);
+  const now = useMemo(() => dayjs.utc(), []);
+  const tomorrow = useMemo(() => dayjs.utc().add(1, 'day'), []);
 
   const registerBrute = useCallback(() => {
     if (!brute) return;
@@ -70,7 +70,7 @@ const CellTournament = ({
       {/* NEXT TOURNAMENT (Only displayed if you can't rank up and if you have watched your daily tournament) */}
       {
         !brute.canRankUpSince
-        && (!moment.utc(brute.currentTournamentDate).isSame(moment.utc(), 'day') || brute.currentTournamentStepWatched === 6)
+        && (!dayjs.utc(brute.currentTournamentDate).isSame(dayjs.utc(), 'day') || brute.currentTournamentStepWatched === 6)
         && (
           <Paper
             sx={{

client/src/components/Header.tsx

@@ -1,13 +1,13 @@
 import { pad } from '@labrute/core';
 import { Box, BoxProps, Link, Paper, Tooltip, useTheme } from '@mui/material';
-import moment from 'moment';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { useLanguage } from '../hooks/useLanguage';
 import Text from './Text';
 import { useAuth } from '../hooks/useAuth';
 import Marquee from 'react-fast-marquee';
+import dayjs from 'dayjs';
 
 export interface HeaderProps extends BoxProps {
   url?: string;
@@ -22,8 +22,8 @@ const Header = ({
   const theme = useTheme();
   const { modifiers } = useAuth();
 
-  const [time, setTime] = useState(moment.utc());
-  const [marqueePaused, setMarqueePaused] = useState(localStorage.getItem('marqueePaused') === moment.utc().format('YYYY-MM-DD'));
+  const [time, setTime] = useState(dayjs.utc());
+  const [marqueePaused, setMarqueePaused] = useState(localStorage.getItem('marqueePaused') === dayjs.utc().format('YYYY-MM-DD'));
 
   // Randomized left art
   const leftArt = useMemo(() => Math.floor(Math.random() * (11 - 1 + 1) + 1), []);
@@ -39,7 +39,7 @@ const Header = ({
   // Update time every minute
   useEffect(() => {
     const interval = setInterval(() => {
-      setTime(moment.utc());
+      setTime(dayjs.utc());
     }, 60000);
     return () => clearInterval(interval);
   }, []);

client/src/hooks/useAuth.tsx

@@ -1,9 +1,9 @@
 import { UserWithBrutesBodyColor } from '@labrute/core';
-import moment from 'moment';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import Server from '../utils/Server';
 import { useLanguage } from './useLanguage';
 import { Event, FightModifier } from '@labrute/prisma';
+import dayjs from 'dayjs';
 
 interface AuthContextInterface {
   user: UserWithBrutesBodyColor | null,
@@ -56,9 +56,9 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
     const userId = localStorage.getItem('user');
     const token = localStorage.getItem('token');
-    const expires = moment.utc(localStorage.getItem('expires'));
+    const expires = dayjs.utc(localStorage.getItem('expires'));
     if (userId && token) {
-      if (expires.isAfter(moment.utc())) {
+      if (expires.isAfter(dayjs.utc())) {
         Server.User.authenticate(userId, token).then((response) => {
           setUser(response.user);
           setModifiers(response.modifiers);

client/src/hooks/useLanguage.tsx

@@ -1,8 +1,8 @@
-import moment from 'moment';
-import 'moment/locale/de';
-import 'moment/locale/es';
-import 'moment/locale/fr';
-import 'moment/locale/ru';
+import dayjs from 'dayjs';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/ru';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAlert } from './useAlert';
@@ -44,8 +44,8 @@ export const LanguageProvider = ({ children }: LanguageProviderProps) => {
     // Update document language
     document.documentElement.lang = language;
 
-    // Update moment language
-    moment.locale(language);
+    // Update dayjs language
+    dayjs.locale(language);
 
     // Update language in localStorage
     localStorage.setItem('language', language);

client/src/utils/dayjs.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+
+export default dayjs;

client/src/utils/fight/FighterHolder.ts

@@ -1,11 +1,11 @@
 import { Animation, Fighter, bosses, readColorString, readBodyString, SkillById } from '@labrute/core';
 import { BossName, Gender, SkillName, WeaponName } from '@labrute/prisma';
-import moment from 'moment';
 import { AdjustmentFilter } from '@pixi/filter-adjustment';
 import { FramePart, Symbol as LaBruteSymbol, Svg, Symbol475, Symbol476, Symbol478, Symbol479, Symbol488, Symbol489, Symbol490, Symbol491, Symbol493, Symbol494, Symbol495, Symbol496, Symbol497, Symbol498, Symbol503, Symbol505, Symbol506, Symbol507, Symbol508, Symbol509, Symbol510, Symbol513, Symbol516, Symbol517, Symbol541, Symbol542, Symbol543, Symbol544, Symbol545, Symbol546, Symbol846, Symbol847, Symbol848, Symbol849, Symbol851, Symbol854, Symbol855, Symbol856, Symbol857, Symbol858, Symbol859, Symbol860, Symbol861, Symbol863, Symbol864, Symbol865, Symbol866, Symbol867, Symbol868, Symbol869, Symbol870, Symbol871, Symbol875, Symbol876, Symbol877, Symbol878, Symbol879, Symbol880, Symbol894, Symbol903, Symbol904, Symbol905, Symbol906, Symbol907, Symbol910, Symbol911, Symbol912, Symbol913, Symbol935, Symbol936, Symbol937, Symbol938, Symbol939, Symbol940, Symbol941, Symbol942, Symbol943, Symbol944 } from 'labrute-fla-parser';
 import * as PIXI from 'pixi.js';
 import { Filter, Matrix, Texture } from 'pixi.js';
 import { MutableRefObject } from 'react';
+import dayjs from 'dayjs';
 
 const ANIMATIONS: Record<
   Gender | 'dog' | 'bear' | 'panther',
@@ -567,7 +567,7 @@ export default class FighterHolder {
           throw new Error(`Boss not found: ${this.name}`);
         }
 
-        const aprilFools = moment().isSame(moment('04-01', 'MM-DD'), 'day');
+        const aprilFools = dayjs().isSame(dayjs('04-01', 'MM-DD'), 'day');
         // Apply color
         if (fighter.name === BossName.GoldClaw) {
           this.container.filters = [new AdjustmentFilter({