Replace moment library

packages/webapp/package.json

@@ -47,7 +47,7 @@
         "@material-ui/lab": "^4.0.0-alpha.57",
         "@reduxjs/toolkit": "^1.5.0",
         "axios": "^0.14.0",
-        "moment": "^2.29.1",
+        "dayjs": "^1.10.4",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-google-recaptcha": "^2.1.0",

packages/webapp/src/@types/typings.d.ts

@@ -4,3 +4,16 @@ declare module '*.jpeg';
 declare module '*.png';
 declare module '*.svg';
 declare module '*.json';
+
+import { Dayjs } from 'dayjs'
+type DateType = string | number | Date | Dayjs
+
+// @Todo: review if there is a better support for this.
+declare module 'dayjs' {
+  interface Dayjs {
+    fromNow(withoutSuffix?: boolean): string
+    from(compared: DateType, withoutSuffix?: boolean): string
+    toNow(withoutSuffix?: boolean): string
+    to(compared: DateType, withoutSuffix?: boolean): string
+  }
+}

packages/webapp/src/classes/app-i18n/index.ts

@@ -1,4 +1,7 @@
 import { fetchAccount } from './../../redux/clientSlice';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
 
 export class Locale {
     code: LocaleCode;

packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx

@@ -6,7 +6,7 @@ import Client, { ChangeHistory } from "../../../../classes/client";
 import { activeInstance } from '../../../../redux/clientSlice';
 import { SimpleDialogProps } from "..";
 import BaseDialog from "../base-dialog";
-import moment from "moment";
+import dayjs from "dayjs";
 
 import TableContainer from "@material-ui/core/TableContainer";
 import Table from "@material-ui/core/Table";
@@ -40,7 +40,6 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
       })
   };
 
-
   return (
     <div>
       <BaseDialog
@@ -70,8 +69,8 @@ const HistoryDialog = ({ mapId, onClose }: SimpleDialogProps) => {
                   <TableRow key={row.id}>
                     <TableCell align="left">{row.lastModificationBy}</TableCell>
                     <TableCell align="left">
-                      <Tooltip title={moment(row.lastModificationTime).format("lll")} placement="bottom-start">
+                      <Tooltip title={dayjs(row.lastModificationTime).format("lll")} placement="bottom-start">
-                        <span>{moment(row.lastModificationTime).fromNow()}</span>
+                        <span>{dayjs(row.lastModificationTime).fromNow()}</span>
                       </Tooltip>
                     </TableCell>
                     <TableCell align="left"><Link href={`c/maps/${mapId}/${row.id}/view`} target="history"><FormattedMessage id="maps.view" defaultMessage="View" /></Link></TableCell>

packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx

@@ -5,7 +5,7 @@ import { ErrorInfo } from '../../../../classes/client';
 import BaseDialog from '../base-dialog';
 import {  SimpleDialogProps } from '..';
 import { useStyles } from './style';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { fetchMapById } from '../../../../redux/clientSlice';
 import Paper from '@material-ui/core/Paper';
 import Card from '@material-ui/core/Card';
@@ -73,7 +73,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
                                 <FormattedMessage id="info.creation-time" defaultMessage="Creation Date" />:
                         </Typography>
                             <Typography variant="body2">
-                                {moment(map?.creationTime).format("lll")}
+                                {dayjs(map?.creationTime).format("lll")}
                             </Typography>
                         </ListItem>
 
@@ -92,7 +92,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => {
                                 <FormattedMessage id="info.modified-time" defaultMessage="Last Modified Date" />:
                         </Typography>
                             <Typography variant="body2">
-                                {moment(map?.lastModificationTime).format("lll")}
+                                {dayjs(map?.lastModificationTime).format("lll")}
                             </Typography>
                         </ListItem>
 

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -7,7 +7,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 import Client, { ErrorInfo, MapInfo } from '../../../classes/client';
 import ActionChooser, { ActionType } from '../action-chooser';
 import ActionDispatcher from '../action-dispatcher';
-import moment from 'moment'
+import dayjs from 'dayjs';
 import { Filter, LabelFilter } from '..';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -210,7 +210,7 @@ export const MapsList = (props: MapsListProps) => {
   // Configure locale ...
   const account = fetchAccount();
   if (account) {
-    moment.locale(account.locale.code);
+    dayjs.locale(account.locale.code);
   }
 
   useEffect(() => {
@@ -331,6 +331,9 @@ export const MapsList = (props: MapsListProps) => {
     });
   }
 
+  const relativeTime = require('dayjs/plugin/relativeTime')
+  dayjs.extend(relativeTime);
+
   const isSelected = (id: number) => selected.indexOf(id) !== -1;
   return (
     <div className={classes.root}>
@@ -476,9 +479,9 @@ export const MapsList = (props: MapsListProps) => {
 
                           <TableCell className={classes.bodyCell}>
                             <Tooltip title={
-                              `Modified by ${row.lastModificationBy} on ${moment(row.lastModificationTime).format("lll")}`
+                              `Modified by ${row.lastModificationBy} on ${dayjs(row.lastModificationTime).format("lll")}`
                             } placement="bottom-start">
-                              <span>{moment(row.lastModificationTime).fromNow()}</span>
+                              <span>{dayjs(row.lastModificationTime).fromNow()}</span>
                             </Tooltip>
                           </TableCell>
 

packages/webapp/webpack.common.js

@@ -64,10 +64,5 @@ module.exports = {
                     ]
                 }
             }]
-        }),
+        })]
-        // Ignore all locale files of moment.js
-        new webpack.ContextReplacementPlugin(
-            /moment[\/\\]locale$/,
-            /de$|es$|fr$/
-        )]
 }