From 9a59d6524c45d5542433302a498f9ada4e45e806 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 4 Sep 2023 10:53:05 -0700 Subject: Migrate to DayJs from moment --- modern/package-lock.json | 15 +-- modern/package.json | 2 +- .../src/common/components/LocalizationProvider.jsx | 123 ++++++++++----------- modern/src/common/util/formatter.js | 21 ++-- modern/src/login/LoginPage.jsx | 4 +- modern/src/main/DeviceRow.jsx | 7 +- modern/src/main/useFilter.js | 6 +- modern/src/reports/ChartReportPage.jsx | 4 +- modern/src/reports/components/ReportFilter.jsx | 30 ++--- modern/src/settings/CalendarPage.jsx | 14 +-- modern/src/settings/DevicePage.jsx | 6 +- modern/src/settings/PreferencesPage.jsx | 6 +- modern/src/settings/UserPage.jsx | 6 +- modern/src/store/reports.js | 6 +- 14 files changed, 127 insertions(+), 123 deletions(-) (limited to 'modern') diff --git a/modern/package-lock.json b/modern/package-lock.json index 375f7f78..06744a6a 100644 --- a/modern/package-lock.json +++ b/modern/package-lock.json @@ -22,10 +22,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", @@ -5968,6 +5968,11 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "node_modules/dayjs": { + "version": "1.11.9", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz", + "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -8567,14 +8572,6 @@ "ufo": "^1.3.0" } }, - "node_modules/moment": { - "version": "2.29.4", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", - "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", - "engines": { - "node": "*" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/modern/package.json b/modern/package.json index c7d1e4bb..ce17f09d 100644 --- a/modern/package.json +++ b/modern/package.json @@ -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", diff --git a/modern/src/common/components/LocalizationProvider.jsx b/modern/src/common/components/LocalizationProvider.jsx index 2ace1e24..d48b12ce 100644 --- a/modern/src/common/components/LocalizationProvider.jsx +++ b/modern/src/common/components/LocalizationProvider.jsx @@ -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: 'العربية' }, @@ -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 ( diff --git a/modern/src/common/util/formatter.js b/modern/src/common/util/formatter.js index b00896c2..370542d1 100644 --- a/modern/src/common/util/formatter.js +++ b/modern/src/common/util/formatter.js @@ -1,4 +1,8 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; +import 'dayjs/plugin/duration'; +import duration from 'dayjs/plugin/duration'; +import relativeTime from 'dayjs/plugin/relativeTime'; + import { altitudeFromMeters, altitudeUnitString, @@ -11,6 +15,9 @@ import { } from './converter'; import { prefixString } from './stringUtils'; +dayjs.extend(duration) +dayjs.extend(relativeTime) + export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo')); export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision)); @@ -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 ''; @@ -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); diff --git a/modern/src/login/LoginPage.jsx b/modern/src/login/LoginPage.jsx index a177505c..73104def 100644 --- a/modern/src/login/LoginPage.jsx +++ b/modern/src/login/LoginPage.jsx @@ -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'; @@ -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}`), diff --git a/modern/src/main/DeviceRow.jsx b/modern/src/main/DeviceRow.jsx index 82ffb1b5..9f6f3a22 100644 --- a/modern/src/main/DeviceRow.jsx +++ b/modern/src/main/DeviceRow.jsx @@ -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, @@ -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', @@ -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 ( <> diff --git a/modern/src/main/useFilter.js b/modern/src/main/useFilter.js index 96a8c4b9..ccda6e14 100644 --- a/modern/src/main/useFilter.js +++ b/modern/src/main/useFilter.js @@ -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); @@ -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; diff --git a/modern/src/reports/ChartReportPage.jsx b/modern/src/reports/ChartReportPage.jsx index 643625df..6175e1d8 100644 --- a/modern/src/reports/ChartReportPage.jsx +++ b/modern/src/reports/ChartReportPage.jsx @@ -1,4 +1,4 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, @@ -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') { diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx index ff0dc146..eab7d0eb 100644 --- a/modern/src/reports/components/ReportFilter.jsx +++ b/modern/src/reports/components/ReportFilter.jsx @@ -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'; @@ -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; } diff --git a/modern/src/settings/CalendarPage.jsx b/modern/src/settings/CalendarPage.jsx index 2868d3d5..099858a3 100644 --- a/modern/src/settings/CalendarPage.jsx +++ b/modern/src/settings/CalendarPage.jsx @@ -1,4 +1,4 @@ -import moment from 'moment'; +import dayjs from 'dayjs'; import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import TextField from '@mui/material/TextField'; @@ -53,8 +53,8 @@ const simpleCalendar = () => window.btoa([ 'PRODID:-//Traccar//NONSGML Traccar//EN', 'BEGIN:VEVENT', 'UID:00000000-0000-0000-0000-000000000000', - `DTSTART;${formatCalendarTime(moment())}`, - `DTEND;${formatCalendarTime(moment().add(1, 'hours'))}`, + `DTSTART;${formatCalendarTime(dayjs())}`, + `DTEND;${formatCalendarTime(dayjs().add(1, 'hours'))}`, 'RRULE:FREQ=DAILY', 'SUMMARY:Event', 'END:VEVENT', @@ -148,18 +148,18 @@ const CalendarPage = () => { { - const time = formatCalendarTime(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL)); + const time = formatCalendarTime(dayjs(e.target.value, 'YYYY-MM-DDTHH:mm')); setItem({ ...item, data: updateCalendar(lines, 5, `DTSTART;${time}`) }); }} /> { - const time = formatCalendarTime(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL)); + const time = formatCalendarTime(dayjs(e.target.value, 'YYYY-MM-DDTHH:mm')); setItem({ ...item, data: updateCalendar(lines, 6, `DTEND;${time}`) }); }} /> diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx index 11d122d3..435a48bd 100644 --- a/modern/src/settings/DevicePage.jsx +++ b/modern/src/settings/DevicePage.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { Accordion, AccordionSummary, @@ -137,8 +137,8 @@ const DevicePage = () => { setItem({ ...item, expirationTime: moment(e.target.value, moment.HTML5_FMT.DATE).locale('en').format() })} + value={(item.expirationTime && dayjs(item.expirationTime).locale('en').format('YYYY-MM-DD')) || '2099-01-01'} + onChange={(e) => setItem({ ...item, expirationTime: dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format() })} disabled={!admin} /> { const socket = useSelector((state) => state.session.socket); const [token, setToken] = useState(null); - const [tokenExpiration, setTokenExpiration] = useState(moment().add(1, 'week').locale('en').format(moment.HTML5_FMT.DATE)); + const [tokenExpiration, setTokenExpiration] = useState(dayjs().add(1, 'week').locale('en').format('YYYY-MM-DD')); const mapStyles = useMapStyles(); const mapOverlays = useMapOverlays(); @@ -80,7 +80,7 @@ const PreferencesPage = () => { const filter = createFilterOptions(); const generateToken = useCatch(async () => { - const expiration = moment(tokenExpiration, moment.HTML5_FMT.DATE).toISOString(); + const expiration = dayjs(tokenExpiration, 'YYYY-MM-DD').toISOString(); const response = await fetch('/api/session/token', { method: 'POST', body: new URLSearchParams(`expiration=${expiration}`), diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx index 21859ea7..939859ae 100644 --- a/modern/src/settings/UserPage.jsx +++ b/modern/src/settings/UserPage.jsx @@ -19,7 +19,7 @@ import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; import { useDispatch, useSelector } from 'react-redux'; -import moment from 'moment'; +import dayjs from 'dayjs'; import EditItemView from './components/EditItemView'; import EditAttributesAccordion from './components/EditAttributesAccordion'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -304,8 +304,8 @@ const UserPage = () => { setItem({ ...item, expirationTime: moment(e.target.value, moment.HTML5_FMT.DATE).locale('en').format() })} + value={(item.expirationTime && dayjs(item.expirationTime).locale('en').format('YYYY-MM-DD')) || '2099-01-01'} + onChange={(e) => setItem({ ...item, expirationTime: dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format() })} disabled={!manager} />