switch from timeago.js to day.js

azukaar · Sep 23, 2024 · a4423e9 · a4423e9
1 parent bd45133
commit a4423e9
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 20 deletions.
diff --git a/client/src/index.jsx b/client/src/index.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import customParseFormat from 'dayjs/plugin/customParseFormat'; // import this if you need to parse custom formats
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat'; // import this for localized formatting
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 // import i18n (needs to be bundled ;)) 
 import './utils/locales/i18n';
@@ -29,6 +30,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers';
 import dayjs from 'dayjs';
 dayjs.extend(customParseFormat); // if needed
 dayjs.extend(localizedFormat); // if needed
+dayjs.extend(relativeTime);
 
 /* // Dynamically loading the dayjs-locale does not work.
 import(`dayjs/locale/${getLanguage().toLowerCase()}.js`).then(() => dayjs.locale(language.toLowerCase()))

diff --git a/client/src/layout/MainLayout/Header/HeaderContent/Notification.jsx b/client/src/layout/MainLayout/Header/HeaderContent/Notification.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
@@ -20,8 +21,6 @@ import {
     Typography,
     useMediaQuery
 } from '@mui/material';
-import { register, format } from 'timeago.js';
-import de from "timeago.js/lib/lang/de";
 
 // project import
 import MainCard from '../../../../components/MainCard';
@@ -52,7 +51,6 @@ const actionSX = {
 // ==============================|| HEADER CONTENT - NOTIFICATION ||============================== //
 
 const Notification = () => {
-    register('de', de);
     const { t, i18n } = useTranslation();
     const theme = useTheme();
     const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
@@ -256,7 +254,7 @@ const Notification = () => {
                                                 />
                                                 <ListItemSecondaryAction>
                                                     <Typography variant="caption" noWrap>
-                                                        {format(notification.Date, i18n.resolvedLanguage)}
+                                                        {dayjs(notification.Date).fromNow()}
                                                     </Typography>
                                                 </ListItemSecondaryAction>
                                             </ListItemButton>

diff --git a/client/src/layout/MainLayout/Header/HeaderContent/jobs.jsx b/client/src/layout/MainLayout/Header/HeaderContent/jobs.jsx
@@ -21,8 +21,7 @@ import {
     useMediaQuery,
     Button
 } from '@mui/material';
-import { register, format } from 'timeago.js';
-import de from "timeago.js/lib/lang/de";
+import dayjs from 'dayjs';
 
 // project import
 import MainCard from '../../../../components/MainCard';
@@ -60,7 +59,6 @@ const getStatus = (job) => {
 }
 
 const Jobs = () => {
-    register('de', de);
     const { t, i18n } = useTranslation();
     const {role} = useClientInfos();
     const isAdmin = role === "2";
@@ -252,7 +250,7 @@ const Jobs = () => {
                                             }}>
                                             <Typography variant="caption" noWrap >
                                                 {job.LastStarted == '0001-01-01T00:00:00Z' ? t('mgmt.scheduler.list.status.neverRan') : (
-                                                    job.Running ? <span><LoadingOutlined />{` `+t('mgmt.cron.list.state.running')+` ${format(job.LastStarted, i18n.resolvedLanguage)}`}</span> : t('mgmt.cron.list.state.lastRan')+` ${format(job.LastRun, i18n.resolvedLanguage)}`
+                                                    job.Running ? <span><LoadingOutlined />{` `+t('mgmt.cron.list.state.running')+` ${dayjs(job.LastStarted).fromNow()}`}</span> : t('mgmt.cron.list.state.lastRan')+` ${dayjs(job.LastRun).fromNow()}`
                                                 )}
                                             </Typography>
                                             </ListItemButton>

diff --git a/client/src/pages/dashboard/eventsExplorer.jsx b/client/src/pages/dashboard/eventsExplorer.jsx
@@ -4,16 +4,14 @@ import * as API from '../../api';
 import { Button, CircularProgress, Stack, TextField } from "@mui/material";
 import { CosmosCollapse, CosmosSelect } from "../config/users/formShortcuts";
 import MainCard from '../../components/MainCard';
-import { register, format } from 'timeago.js';
-import de from "timeago.js/lib/lang/de";
+import dayjs from 'dayjs';
 import { ExclamationOutlined, SettingOutlined } from "@ant-design/icons";
 import { Alert } from "@mui/material";
 import { DownloadFile } from "../../api/downloadButton";
 import { Trans, useTranslation } from 'react-i18next';
 
 const EventsExplorer = ({from, to, xAxis, zoom, slot, initLevel, initSearch = ''}) => {
-	register('de', de);
-	const { t, i18n } = useTranslation();
+	const { t } = useTranslation();
 	const [events, setEvents] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [search, setSearch] = useState(initSearch);
@@ -174,7 +172,7 @@ const EventsExplorer = ({from, to, xAxis, zoom, slot, initLevel, initSearch = ''
 									event.level == "debug" ? <SettingOutlined /> : event.level == "important" ? <ExclamationOutlined /> : undefined
 								}>
 									<div style={{fontWeight: 'bold', fontSize: '120%'}}>{event.label}</div>
-									<div>{(new Date(event.date)).toLocaleString()} - {format(event.date, i18n.resolvedLanguage)}</div>
+									<div>{(new Date(event.date)).toLocaleString()} - {dayjs(event.date).fromNow()}</div>
 									<div>{event.eventId} - {event.object}</div>
 								</Alert>}>
 								<div style={{overflow: 'auto'}}>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,6 @@
     "semver-compare": "^1.0.0",
     "simplebar": "^5.3.8",
     "simplebar-react": "^2.4.1",
-    "timeago.js": "^4.0.2",
     "typescript": "4.8.3",
     "vite": "^4.2.0",
     "web-vitals": "^3.0.2",