From ea80fc53153fc724edfa940793422aae8980a3a1 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Tue, 16 Feb 2021 13:07:54 -0800 Subject: [PATCH] Replace moment library --- packages/webapp/package.json | 2 +- packages/webapp/src/@types/typings.d.ts | 15 ++++++++++++++- packages/webapp/src/classes/app-i18n/index.ts | 3 +++ .../action-dispatcher/history-dialog/index.tsx | 7 +++---- .../action-dispatcher/info-dialog/index.tsx | 6 +++--- .../src/components/maps-page/maps-list/index.tsx | 11 +++++++---- packages/webapp/webpack.common.js | 7 +------ 7 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 63a139da..3207f4e5 100644 --- a/packages/webapp/package.json +++ b/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", diff --git a/packages/webapp/src/@types/typings.d.ts b/packages/webapp/src/@types/typings.d.ts index b1f7bf1d..fe4cdc9f 100644 --- a/packages/webapp/src/@types/typings.d.ts +++ b/packages/webapp/src/@types/typings.d.ts @@ -3,4 +3,17 @@ declare module '*.jpg'; declare module '*.jpeg'; declare module '*.png'; declare module '*.svg'; -declare module '*.json'; \ No newline at end of file +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 + } +} \ No newline at end of file diff --git a/packages/webapp/src/classes/app-i18n/index.ts b/packages/webapp/src/classes/app-i18n/index.ts index b43cf02e..6f3a70c6 100644 --- a/packages/webapp/src/classes/app-i18n/index.ts +++ b/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; diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx index 07c7ff42..29fa98f3 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx +++ b/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 (
{ {row.lastModificationBy} - - {moment(row.lastModificationTime).fromNow()} + + {dayjs(row.lastModificationTime).fromNow()} diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx index f58f9e79..c225f6da 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx +++ b/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) => { : - {moment(map?.creationTime).format("lll")} + {dayjs(map?.creationTime).format("lll")} @@ -92,7 +92,7 @@ const InfoDialog = ({ mapId, onClose }: SimpleDialogProps) => { : - {moment(map?.lastModificationTime).format("lll")} + {dayjs(map?.lastModificationTime).format("lll")} diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx index 982a9075..59e9d462 100644 --- a/packages/webapp/src/components/maps-page/maps-list/index.tsx +++ b/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 (
@@ -476,9 +479,9 @@ export const MapsList = (props: MapsListProps) => { - {moment(row.lastModificationTime).fromNow()} + {dayjs(row.lastModificationTime).fromNow()} diff --git a/packages/webapp/webpack.common.js b/packages/webapp/webpack.common.js index 02d51bc2..221ed22a 100644 --- a/packages/webapp/webpack.common.js +++ b/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$/ - )] + })] } \ No newline at end of file