experiment with luxon

rjwats · rjwats · commit 9dcdba088f5b · 2021-01-16T23:58:13.000Z
diff --git a/interface/package-lock.json b/interface/package-lock.json
diff --git a/interface/package.json b/interface/package.json
@@ -6,6 +6,7 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@types/lodash": "^4.14.165",
+    "@types/luxon": "^1.25.1",
     "@types/node": "^12.12.32",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -15,9 +16,10 @@
     "compression-webpack-plugin": "^4.0.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.20",
+    "luxon": "^1.25.0",
     "mime-types": "^2.1.28",
-    "moment": "^2.29.1",
     "notistack": "^1.0.3",
+    "parse-ms": "^2.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
diff --git a/interface/src/ntp/NTPStatusForm.tsx b/interface/src/ntp/NTPStatusForm.tsx
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 import { WithTheme, withTheme } from '@material-ui/core/styles';
 import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText, Button } from '@material-ui/core';
@@ -14,7 +14,7 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 
 import { RestFormProps, FormButton, HighlightAvatar } from '../components';
 import { isNtpActive, ntpStatusHighlight, ntpStatus } from './NTPStatus';
-import { formatIsoDateTime, formatLocalDateTime } from './TimeFormat';
+import { formatDuration, formatIsoDateTime, formatLocalDateTime, fromISOWithOffset, toISOWithOffset } from './TimeFormat';
 import { NTPStatus, Time } from './types';
 import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
 import { TIME_ENDPOINT } from '../api';
@@ -43,21 +43,18 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
   }
 
   openSetTime = () => {
-    this.setState({ localTime: formatLocalDateTime(moment()), settingTime: true, });
+    this.setState({ localTime: formatLocalDateTime(DateTime.local()), settingTime: true, });
   }
 
   closeSetTime = () => {
     this.setState({ settingTime: false });
   }
 
   createAdjustedTime = (): Time => {
-    const currentLocalTime = moment(this.props.data.time_local);
-    const newLocalTime = moment(this.state.localTime);
-    newLocalTime.subtract(currentLocalTime.utcOffset())
-    newLocalTime.milliseconds(0);
-    newLocalTime.utc();
+    const currentLocalTime = fromISOWithOffset(this.props.data.time_local);
+    const newLocalTime = fromISOWithOffset(this.state.localTime).minus(currentLocalTime.offset).toUTC();
     return {
-      time_utc: newLocalTime.format()
+      time_utc: toISOWithOffset(newLocalTime)
     }
   }
 
@@ -171,7 +168,7 @@ class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
                 <AvTimerIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
+            <ListItemText primary="Uptime" secondary={formatDuration(data.uptime)} />
           </ListItem>
           <Divider variant="inset" component="li" />
         </List>
diff --git a/interface/src/ntp/TimeFormat.ts b/interface/src/ntp/TimeFormat.ts
@@ -1,5 +1,25 @@
-import moment, { Moment } from 'moment';
+import { DateTime } from 'luxon';
+import parseMilliseconds from 'parse-ms';
 
-export const formatIsoDateTime = (isoDateString: string) => moment.parseZone(isoDateString).format('ll @ HH:mm:ss');
+export const fromISOWithOffset = (isoDateString: string) => DateTime.fromISO(isoDateString, { setZone: true });
+export const toISOWithOffset = (dateTime: DateTime) =>  dateTime.toFormat("yyyy-LL-dd'T'HH:mm:ssZZZ");
+export const formatIsoDateTime = (isoDateString: string) => fromISOWithOffset(isoDateString).toFormat('DD @ HH:mm:ss ZZ');
+export const formatLocalDateTime = (dateTime: DateTime) => dateTime.toFormat("yyyy-LL-dd'T'HH:mm");
 
-export const formatLocalDateTime = (moment: Moment) => moment.format('YYYY-MM-DDTHH:mm');
+export const formatDuration = (duration: number) => {
+  const { days, hours, minutes, seconds } = parseMilliseconds(duration * 1000);
+  var formatted = '';
+  if (days) {
+    formatted += days + ' days ';
+  }
+  if (formatted || hours) {
+    formatted += hours + ' hours ';
+  }
+  if (formatted || minutes) {
+    formatted += minutes + ' minutes ';
+  }
+  if (formatted || seconds) {
+    formatted += seconds + ' seconds';
+  }
+  return formatted;
+}
