Replace moment library

This commit is contained in:
Paulo Gustavo Veiga 2021-02-16 13:07:54 -08:00
parent ea04199c14
commit ea80fc5315
7 changed files with 32 additions and 19 deletions

View File

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

View File

@ -4,3 +4,16 @@ declare module '*.jpeg';
declare module '*.png'; declare module '*.png';
declare module '*.svg'; declare module '*.svg';
declare module '*.json'; 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
}
}

View File

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

View File

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

View File

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

View File

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

View File

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