Skip to content

Commit

Permalink
Migrate to DayJs from moment
Browse files Browse the repository at this point in the history
  • Loading branch information
@tananaev
tananaev committed Sep 4, 2023
1 parent 63eaa20 commit 9a59d65
Show file tree
Hide file tree
Showing 14 changed files with 127 additions and 123 deletions.
15 changes: 6 additions & 9 deletions modern/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion modern/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
"@turf/circle": "^6.5.0",
"@turf/turf": "^6.5.0",
"@vitejs/plugin-react": "^4.0.4",
"dayjs": "^1.11.9",
"events": "^3.3.0",
"mapbox-gl": "^1.13.3",
"maplibre-gl": "^3.3.0",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-country-flag": "3.1.0",
"react-dom": "^18.2.0",
Expand Down
123 changes: 60 additions & 63 deletions modern/src/common/components/LocalizationProvider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,66 @@
import React, {
createContext, useContext, useEffect, useMemo,
} from 'react';
import moment from 'moment';
import 'moment/min/locales.min';

import af from '../../resources/l10n/af.json';
import ar from '../../resources/l10n/ar.json';
import az from '../../resources/l10n/az.json';
import bg from '../../resources/l10n/bg.json';
import bn from '../../resources/l10n/bn.json';
import ca from '../../resources/l10n/ca.json';
import cs from '../../resources/l10n/cs.json';
import da from '../../resources/l10n/da.json';
import de from '../../resources/l10n/de.json';
import el from '../../resources/l10n/el.json';
import en from '../../resources/l10n/en.json';
import es from '../../resources/l10n/es.json';
import fa from '../../resources/l10n/fa.json';
import fi from '../../resources/l10n/fi.json';
import fr from '../../resources/l10n/fr.json';
import gl from '../../resources/l10n/gl.json';
import he from '../../resources/l10n/he.json';
import hi from '../../resources/l10n/hi.json';
import hr from '../../resources/l10n/hr.json';
import hu from '../../resources/l10n/hu.json';
import id from '../../resources/l10n/id.json';
import it from '../../resources/l10n/it.json';
import ja from '../../resources/l10n/ja.json';
import ka from '../../resources/l10n/ka.json';
import kk from '../../resources/l10n/kk.json';
import km from '../../resources/l10n/km.json';
import ko from '../../resources/l10n/ko.json';
import lo from '../../resources/l10n/lo.json';
import lt from '../../resources/l10n/lt.json';
import lv from '../../resources/l10n/lv.json';
import ml from '../../resources/l10n/ml.json';
import mn from '../../resources/l10n/mn.json';
import ms from '../../resources/l10n/ms.json';
import nb from '../../resources/l10n/nb.json';
import ne from '../../resources/l10n/ne.json';
import nl from '../../resources/l10n/nl.json';
import nn from '../../resources/l10n/nn.json';
import pl from '../../resources/l10n/pl.json';
import pt from '../../resources/l10n/pt.json';
import ptBR from '../../resources/l10n/pt_BR.json';
import ro from '../../resources/l10n/ro.json';
import ru from '../../resources/l10n/ru.json';
import si from '../../resources/l10n/si.json';
import sk from '../../resources/l10n/sk.json';
import sl from '../../resources/l10n/sl.json';
import sq from '../../resources/l10n/sq.json';
import sr from '../../resources/l10n/sr.json';
import sv from '../../resources/l10n/sv.json';
import ta from '../../resources/l10n/ta.json';
import th from '../../resources/l10n/th.json';
import tr from '../../resources/l10n/tr.json';
import uk from '../../resources/l10n/uk.json';
import uz from '../../resources/l10n/uz.json';
import vi from '../../resources/l10n/vi.json';
import zh from '../../resources/l10n/zh.json';
import zhTW from '../../resources/l10n/zh_TW.json';
import dayjs from 'dayjs';
import usePersistedState from '../util/usePersistedState';

import af from '../../resources/l10n/af.json'; import 'dayjs/locale/af';
import ar from '../../resources/l10n/ar.json'; import 'dayjs/locale/ar';
import az from '../../resources/l10n/az.json'; import 'dayjs/locale/az';
import bg from '../../resources/l10n/bg.json'; import 'dayjs/locale/bg';
import bn from '../../resources/l10n/bn.json'; import 'dayjs/locale/bn';
import ca from '../../resources/l10n/ca.json'; import 'dayjs/locale/ca';
import cs from '../../resources/l10n/cs.json'; import 'dayjs/locale/cs';
import da from '../../resources/l10n/da.json'; import 'dayjs/locale/da';
import de from '../../resources/l10n/de.json'; import 'dayjs/locale/de';
import el from '../../resources/l10n/el.json'; import 'dayjs/locale/el';
import en from '../../resources/l10n/en.json'; import 'dayjs/locale/en';
import es from '../../resources/l10n/es.json'; import 'dayjs/locale/es';
import fa from '../../resources/l10n/fa.json'; import 'dayjs/locale/fa';
import fi from '../../resources/l10n/fi.json'; import 'dayjs/locale/fi';
import fr from '../../resources/l10n/fr.json'; import 'dayjs/locale/fr';
import gl from '../../resources/l10n/gl.json'; import 'dayjs/locale/gl';
import he from '../../resources/l10n/he.json'; import 'dayjs/locale/he';
import hi from '../../resources/l10n/hi.json'; import 'dayjs/locale/hi';
import hr from '../../resources/l10n/hr.json'; import 'dayjs/locale/hr';
import hu from '../../resources/l10n/hu.json'; import 'dayjs/locale/hu';
import id from '../../resources/l10n/id.json'; import 'dayjs/locale/id';
import it from '../../resources/l10n/it.json'; import 'dayjs/locale/it';
import ja from '../../resources/l10n/ja.json'; import 'dayjs/locale/ja';
import ka from '../../resources/l10n/ka.json'; import 'dayjs/locale/ka';
import kk from '../../resources/l10n/kk.json'; import 'dayjs/locale/kk';
import km from '../../resources/l10n/km.json'; import 'dayjs/locale/km';
import ko from '../../resources/l10n/ko.json'; import 'dayjs/locale/ko';
import lo from '../../resources/l10n/lo.json'; import 'dayjs/locale/lo';
import lt from '../../resources/l10n/lt.json'; import 'dayjs/locale/lt';
import lv from '../../resources/l10n/lv.json'; import 'dayjs/locale/lv';
import ml from '../../resources/l10n/ml.json'; import 'dayjs/locale/ml';
import mn from '../../resources/l10n/mn.json'; import 'dayjs/locale/mn';
import ms from '../../resources/l10n/ms.json'; import 'dayjs/locale/ms';
import nb from '../../resources/l10n/nb.json'; import 'dayjs/locale/nb';
import ne from '../../resources/l10n/ne.json'; import 'dayjs/locale/ne';
import nl from '../../resources/l10n/nl.json'; import 'dayjs/locale/nl';
import nn from '../../resources/l10n/nn.json'; import 'dayjs/locale/nn';
import pl from '../../resources/l10n/pl.json'; import 'dayjs/locale/pl';
import pt from '../../resources/l10n/pt.json'; import 'dayjs/locale/pt';
import ptBR from '../../resources/l10n/pt_BR.json'; import 'dayjs/locale/pt-br';
import ro from '../../resources/l10n/ro.json'; import 'dayjs/locale/ro';
import ru from '../../resources/l10n/ru.json'; import 'dayjs/locale/ru';
import si from '../../resources/l10n/si.json'; import 'dayjs/locale/si';
import sk from '../../resources/l10n/sk.json'; import 'dayjs/locale/sk';
import sl from '../../resources/l10n/sl.json'; import 'dayjs/locale/sl';
import sq from '../../resources/l10n/sq.json'; import 'dayjs/locale/sq';
import sr from '../../resources/l10n/sr.json'; import 'dayjs/locale/sr';
import sv from '../../resources/l10n/sv.json'; import 'dayjs/locale/sv';
import ta from '../../resources/l10n/ta.json'; import 'dayjs/locale/ta';
import th from '../../resources/l10n/th.json'; import 'dayjs/locale/th';
import tr from '../../resources/l10n/tr.json'; import 'dayjs/locale/tr';
import uk from '../../resources/l10n/uk.json'; import 'dayjs/locale/uk';
import uz from '../../resources/l10n/uz.json'; import 'dayjs/locale/uz';
import vi from '../../resources/l10n/vi.json'; import 'dayjs/locale/vi';
import zh from '../../resources/l10n/zh.json'; import 'dayjs/locale/zh';
import zhTW from '../../resources/l10n/zh_TW.json'; import 'dayjs/locale/zh-tw';

const languages = {
af: { data: af, country: 'ZA', name: 'Afrikaans' },
ar: { data: ar, country: 'AE', name: 'العربية' },
Expand Down Expand Up @@ -156,14 +155,12 @@ export const LocalizationProvider = ({ children }) => {

useEffect(() => {
let selected;
if (language === 'zh') {
selected = 'zh-cn';
} else if (language.length > 2) {
if (language.length > 2) {
selected = `${language.slice(0, 2)}-${language.slice(-2).toLowerCase()}`;
} else {
selected = language;
}
moment.locale([selected, 'en']);
dayjs.locale(selected);
}, [language]);

return (
Expand Down
21 changes: 14 additions & 7 deletions modern/src/common/util/formatter.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import moment from 'moment';
import dayjs from 'dayjs';
import 'dayjs/plugin/duration';

Check failure on line 2 in modern/src/common/util/formatter.js

View workflow job for this annotation

GitHub Actions / build 

'/home/runner/work/traccar-web/traccar-web/modern/node_modules/dayjs/plugin/duration.js' imported multiple times
import duration from 'dayjs/plugin/duration';

Check failure on line 3 in modern/src/common/util/formatter.js

View workflow job for this annotation

GitHub Actions / build 

'/home/runner/work/traccar-web/traccar-web/modern/node_modules/dayjs/plugin/duration.js' imported multiple times
import relativeTime from 'dayjs/plugin/relativeTime';

import {
altitudeFromMeters,
altitudeUnitString,
Expand All @@ -11,6 +15,9 @@ import {
} from './converter';
import { prefixString } from './stringUtils';

dayjs.extend(duration)

Check failure on line 18 in modern/src/common/util/formatter.js

View workflow job for this annotation

GitHub Actions / build 

Missing semicolon
dayjs.extend(relativeTime)

Check failure on line 19 in modern/src/common/util/formatter.js

View workflow job for this annotation

GitHub Actions / build 

Missing semicolon

export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo'));

export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
Expand All @@ -25,16 +32,16 @@ export const formatConsumption = (value, t) => `${value} ${t('sharedLiterPerHour

export const formatTime = (value, format, hours12) => {
if (value) {
const m = moment(value);
const d = dayjs(value);
switch (format) {
case 'date':
return m.format('YYYY-MM-DD');
return d.format('YYYY-MM-DD');
case 'time':
return m.format(hours12 ? 'hh:mm:ss A' : 'HH:mm:ss');
return d.format(hours12 ? 'hh:mm:ss A' : 'HH:mm:ss');
case 'minutes':
return m.format(hours12 ? 'YYYY-MM-DD hh:mm A' : 'YYYY-MM-DD HH:mm');
return d.format(hours12 ? 'YYYY-MM-DD hh:mm A' : 'YYYY-MM-DD HH:mm');
default:
return m.format(hours12 ? 'YYYY-MM-DD hh:mm:ss A' : 'YYYY-MM-DD HH:mm:ss');
return d.format(hours12 ? 'YYYY-MM-DD hh:mm:ss A' : 'YYYY-MM-DD HH:mm:ss');
}
}
return '';
Expand All @@ -60,7 +67,7 @@ export const formatSpeed = (value, unit, t) => `${speedFromKnots(value, unit).to

export const formatVolume = (value, unit, t) => `${volumeFromLiters(value, unit).toFixed(2)} ${volumeUnitString(unit, t)}`;

export const formatHours = (value) => moment.duration(value).humanize();
export const formatHours = (value) => dayjs.duration(value).humanize();

export const formatNumericHours = (value, t) => {
const hours = Math.floor(value / 3600000);
Expand Down
4 changes: 2 additions & 2 deletions modern/src/login/LoginPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import dayjs from 'dayjs';
import {
useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, Box,
} from '@mui/material';
Expand Down Expand Up @@ -72,7 +72,7 @@ const LoginPage = () => {
if (nativeEnvironment) {
let token = '';
try {
const expiration = moment().add(6, 'months').toISOString();
const expiration = dayjs().add(6, 'months').toISOString();
const response = await fetch('/api/session/token', {
method: 'POST',
body: new URLSearchParams(`expiration=${expiration}`),
Expand Down
7 changes: 5 additions & 2 deletions modern/src/main/DeviceRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
import Battery20Icon from '@mui/icons-material/Battery20';
import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
import ErrorIcon from '@mui/icons-material/Error';
import moment from 'moment';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { devicesActions } from '../store';
import {
formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
Expand All @@ -22,6 +23,8 @@ import { useAdministrator } from '../common/util/permissions';
import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg';
import { useAttributePreference } from '../common/util/preferences';

dayjs.extend(relativeTime);

const useStyles = makeStyles((theme) => ({
icon: {
width: '25px',
Expand Down Expand Up @@ -65,7 +68,7 @@ const DeviceRow = ({ data, index, style }) => {
if (item.status === 'online' || !item.lastUpdate) {
status = formatStatus(item.status, t);
} else {
status = moment(item.lastUpdate).fromNow();
status = dayjs(item.lastUpdate).fromNow();
}
return (
<>
Expand Down
6 changes: 3 additions & 3 deletions modern/src/main/useFilter.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import moment from 'moment';
import dayjs from 'dayjs';

export default (keyword, filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions) => {
const groups = useSelector((state) => state.groups.items);
Expand Down Expand Up @@ -30,8 +30,8 @@ export default (keyword, filter, filterSort, filterMap, positions, setFilteredDe
break;
case 'lastUpdate':
filtered.sort((device1, device2) => {
const time1 = device1.lastUpdate ? moment(device1.lastUpdate).valueOf() : 0;
const time2 = device2.lastUpdate ? moment(device2.lastUpdate).valueOf() : 0;
const time1 = device1.lastUpdate ? dayjs(device1.lastUpdate).valueOf() : 0;
const time2 = device2.lastUpdate ? dayjs(device2.lastUpdate).valueOf() : 0;
return time2 - time1;
});
break;
Expand Down
4 changes: 2 additions & 2 deletions modern/src/reports/ChartReportPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import moment from 'moment';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import {
FormControl, InputLabel, Select, MenuItem,
Expand Down Expand Up @@ -52,7 +52,7 @@ const ChartReportPage = () => {
const formattedPositions = positions.map((position) => {
const data = { ...position, ...position.attributes };
const formatted = {};
formatted.fixTime = moment(position.fixTime).valueOf();
formatted.fixTime = dayjs(position.fixTime).valueOf();
Object.keys(data).filter((key) => !['id', 'deviceId'].includes(key)).forEach((key) => {
const value = data[key];
if (typeof value === 'number') {
Expand Down
30 changes: 15 additions & 15 deletions modern/src/reports/components/ReportFilter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
} from '@mui/material';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import dayjs from 'dayjs';
import { useTranslation } from '../../common/components/LocalizationProvider';
import useReportStyles from '../common/useReportStyles';
import { devicesActions, reportsActions } from '../../store';
Expand Down Expand Up @@ -47,32 +47,32 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
let selectedTo;
switch (period) {
case 'today':
selectedFrom = moment().startOf('day');
selectedTo = moment().endOf('day');
selectedFrom = dayjs().startOf('day');
selectedTo = dayjs().endOf('day');
break;
case 'yesterday':
selectedFrom = moment().subtract(1, 'day').startOf('day');
selectedTo = moment().subtract(1, 'day').endOf('day');
selectedFrom = dayjs().subtract(1, 'day').startOf('day');
selectedTo = dayjs().subtract(1, 'day').endOf('day');
break;
case 'thisWeek':
selectedFrom = moment().startOf('week');
selectedTo = moment().endOf('week');
selectedFrom = dayjs().startOf('week');
selectedTo = dayjs().endOf('week');
break;
case 'previousWeek':
selectedFrom = moment().subtract(1, 'week').startOf('week');
selectedTo = moment().subtract(1, 'week').endOf('week');
selectedFrom = dayjs().subtract(1, 'week').startOf('week');
selectedTo = dayjs().subtract(1, 'week').endOf('week');
break;
case 'thisMonth':
selectedFrom = moment().startOf('month');
selectedTo = moment().endOf('month');
selectedFrom = dayjs().startOf('month');
selectedTo = dayjs().endOf('month');
break;
case 'previousMonth':
selectedFrom = moment().subtract(1, 'month').startOf('month');
selectedTo = moment().subtract(1, 'month').endOf('month');
selectedFrom = dayjs().subtract(1, 'month').startOf('month');
selectedTo = dayjs().subtract(1, 'month').endOf('month');
break;
default:
selectedFrom = moment(from, moment.HTML5_FMT.DATETIME_LOCAL);
selectedTo = moment(to, moment.HTML5_FMT.DATETIME_LOCAL);
selectedFrom = dayjs(from, 'YYYY-MM-DDTHH:mm');
selectedTo = dayjs(to, 'YYYY-MM-DDTHH:mm');
break;
}

Expand Down
Loading

0 comments on commit 9a59d65

Please sign in to comment.