add day.js

package.json

@@ -33,8 +33,8 @@
     "@sentry/vite-plugin": "^2.4.0",
     "classnames": "^2.3.2",
     "connected-react-router": "^4.5.0",
+    "dayjs": "^1.11.9",
     "debounce": "^1.2.1",
-    "fecha": "^3.0.3",
     "global": "^4.4.0",
     "history": "^4.10.1",
     "jwt-decode": "^3.1.2",

src/components/AppHeader/TimeFilter.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import { Button, Divider, FormControl, MenuItem, Modal, Paper, Select, Typography, withStyles } from '@material-ui/core';
 
@@ -146,13 +146,13 @@ class TimeSelect extends Component {
   }
 
   lastWeekText() {
-    const weekAgo = Date.now() - (1000 * 60 * 60 * 24 * 7);
-    return `Last Week${fecha.format(new Date(weekAgo), ' (M/D - ')}${fecha.format(new Date(), 'M/D)')}`;
+    const weekAgo = dayjs().subtract(1, 'week');
+    return `Last Week${weekAgo.format('M/D')} - ${dayjs().format('M/D')})`;
   }
 
   last2WeeksText() {
-    const twoWeeksAgo = Date.now() - (1000 * 60 * 60 * 24 * 14);
-    return `2 Weeks${fecha.format(new Date(twoWeeksAgo), ' (M/D - ')}${fecha.format(new Date(), 'M/D)')}`;
+    const twoWeeksAgo = dayjs().subtract(14, 'day');
+    return `2 Weeks Ago (${twoWeeksAgo.format('M/D')} - ${dayjs().format('M/D')})`;
   }
 
   last24HoursText() {
@@ -166,10 +166,10 @@ class TimeSelect extends Component {
 
   render() {
     const { classes } = this.props;
-    const minDate = fecha.format(new Date(Date.now() - LOOKBACK_WINDOW_MILLIS), 'YYYY-MM-DD');
-    const maxDate = fecha.format(new Date(), 'YYYY-MM-DD');
-    const startDate = fecha.format(new Date(this.state.start || this.props.filter.start), 'YYYY-MM-DD');
-    const endDate = fecha.format(new Date(this.state.end || this.props.filter.end), 'YYYY-MM-DD');
+    const minDate = dayjs().subtract(LOOKBACK_WINDOW_MILLIS, 'millisecond').format('YYYY-MM-DD');
+    const maxDate = dayjs().format('YYYY-MM-DD');
+    const startDate = dayjs(this.state.start || this.props.filter.start).format('YYYY-MM-DD');
+    const endDate = dayjs(this.state.end || this.props.filter.end).format('YYYY-MM-DD');
 
     return (
       <>

src/components/ClipView/ClipCreate.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 import { clips as Clips } from '@commaai/api';
 
 import { withStyles, Typography, TextField, Button, CircularProgress } from '@material-ui/core';
@@ -172,8 +172,8 @@ class ClipCreate extends Component {
     const { windowWidth, videoTypeOption, clipTitle, createLoading, error } = this.state;
     const viewerPadding = windowWidth < 768 ? 12 : 32;
 
-    const startStr = fecha.format(new Date(loop.startTime), 'h:mm:ss\u00a0a').toLowerCase();
-    const endStr = fecha.format(new Date(loop.startTime + loop.duration), 'h:mm:ss\u00a0a').toLowerCase();
+    const startStr = dayjs(loop.startTime).format('h:mm:ss A').toLowerCase();
+    const endStr = dayjs(loop.startTime + loop.duration).format('h:mm:ss A').toLowerCase();
     const durSeconds = Math.floor(loop.duration / 1000);
     let durationStr = durSeconds >= 3600 ? `${Math.floor(durSeconds / 3600)}:` : '';
     durationStr += `${Math.floor((durSeconds % 3600) / 60).toString().padStart(durSeconds >= 3600 ? 2 : 1, '0')}:`;

src/components/Dashboard/DriveListItem.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import { withStyles, Grid, Typography } from '@material-ui/core';
 
@@ -88,9 +88,9 @@ const DriveListItem = (props) => {
   );
 
   const small = windowWidth < 580;
-  const startTime = fecha.format(new Date(drive.start_time_utc_millis), 'HH:mm');
-  const startDate = fecha.format(new Date(drive.start_time_utc_millis), small ? 'ddd, MMM D' : 'dddd, MMM D');
-  const endTime = fecha.format(new Date(drive.end_time_utc_millis), 'HH:mm');
+  const startTime = dayjs(drive.start_time_utc_millis).format('HH:mm');
+  const startDate = dayjs(drive.start_time_utc_millis).format(small ? 'ddd, MMM D' : 'dddd, MMM D');
+  const endTime = dayjs(drive.end_time_utc_millis).format('HH:mm');
   const duration = formatDriveDuration(drive.duration);
 
   const distance = isMetric()

src/components/DeviceInfo/index.jsx

@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
 import * as Sentry from '@sentry/react';
 import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import { withStyles, Typography, Button, CircularProgress, Popper, Tooltip } from '@material-ui/core';
 import { VideoLibrary } from '@material-ui/icons';
@@ -463,8 +463,8 @@ class DeviceInfo extends Component {
 
     let pingTooltip = 'no ping received from device';
     if (device.last_athena_ping) {
-      const lastAthenaPing = new Date(device.last_athena_ping * 1000);
-      pingTooltip = `Last ping on ${fecha.format(lastAthenaPing, 'mediumDate')} at ${fecha.format(lastAthenaPing, 'shortTime')}`;
+      const lastAthenaPing = dayjs(device.last_athena_ping * 1000);
+      pingTooltip = `Last ping on ${lastAthenaPing.format('MMM D, YYYY')} at ${lastAthenaPing.format('h:mm A')}`;
     }
 
     return (

src/components/DriveView/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import { withStyles, IconButton, Typography } from '@material-ui/core';
 
@@ -61,11 +61,11 @@ class DriveView extends Component {
     const { windowWidth } = this.state;
     const viewerPadding = windowWidth < 768 ? 12 : 32;
 
-    const viewEndTime = fecha.format(new Date(zoom.end), 'HH:mm');
-    const startTime = fecha.format(new Date(zoom.start), 'MMM D @ HH:mm');
+    const viewEndTime = dayjs(zoom.end).format('HH:mm');
+    const startTime = dayjs(zoom.start).format('MMM D @ HH:mm');
     let headerText = `${startTime} - ${viewEndTime}`;
     if (windowWidth >= 640) {
-      const startDay = fecha.format(new Date(zoom.start), 'dddd');
+      const startDay = dayjs(zoom.start).format('dddd');
       headerText = `${startDay} ${headerText}`;
     }
 

src/components/Navigation/index.jsx

@@ -7,7 +7,8 @@ import ReactMapGL, { GeolocateControl, HTMLOverlay, Marker, Source, WebMercatorV
 import { withStyles, TextField, InputAdornment, Typography, Button, Menu, MenuItem, CircularProgress, Popper }
   from '@material-ui/core';
 import { Search, Clear, Refresh } from '@material-ui/icons';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { athena as Athena, devices as Devices, navigation as NavigationApi } from '@commaai/api';
 import { primeNav, analyticsEvent } from '../../actions';
@@ -1093,7 +1094,7 @@ class Navigation extends Component {
                 ref={ this.carPinTooltipRef }
                 style={{ ...carPinTooltipStyle, display: 'none' }}
               >
-                { fecha.format(carLocation.time, 'h:mm a') }
+                { dayjs(carLocation.time).format('h:mm A') }
                 ,
                 <br />
                 { timeFromNow(carLocation.time) }

src/components/Prime/PrimeCheckout.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 import * as Sentry from '@sentry/react';
 import { withStyles, Typography, IconButton, Button, CircularProgress } from '@material-ui/core';
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
@@ -285,10 +285,10 @@ class PrimeCheckout extends Component {
       let trialEndDate = null;
       let claimEndDate = null;
       if (selectedPlan === 'data') {
-        trialEndDate = fecha.format(subscribeInfo.trial_end_data * 1000, 'MMMM Do');
-        claimEndDate = fecha.format(subscribeInfo.claim_end_data * 1000, 'MMMM Do');
+        trialEndDate = dayjs(subscribeInfo.trial_end_data * 1000).format('MMMM D');
+        claimEndDate = dayjs(subscribeInfo.claim_end_data * 1000).format('MMMM D');
       } else if (selectedPlan === 'nodata') {
-        trialEndDate = fecha.format(subscribeInfo.trial_end_nodata * 1000, 'MMMM Do');
+        trialEndDate = dayjs(subscribeInfo.trial_end_nodata * 1000).format('MMMM D');
       }
       chargeText = `Your first charge will be on ${trialEndDate}, then monthly thereafter.${
         claimEndDate ? ` Trial offer only valid until ${claimEndDate}.` : ''}`;

src/components/Prime/PrimeManage.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 import * as Sentry from '@sentry/react';
 
 import { withStyles, Typography, Button, Modal, Paper, IconButton, CircularProgress } from '@material-ui/core';
@@ -312,9 +312,9 @@ class PrimeManage extends Component {
     let planName;
     let planSubtext;
     if (hasPrimeSub) {
-      joinDate = fecha.format(subscription.subscribed_at ? subscription.subscribed_at * 1000 : 0, 'MMMM Do, YYYY');
-      nextPaymentDate = fecha.format(subscription.next_charge_at ? subscription.next_charge_at * 1000 : 0, 'MMMM Do, YYYY');
-      cancelAtDate = fecha.format(subscription.cancel_at ? subscription.cancel_at * 1000 : 0, 'MMMM Do, YYYY');
+      joinDate = dayjs(subscription.subscribed_at ? subscription.subscribed_at * 1000 : 0).format('MMMM D, YYYY');
+      nextPaymentDate = dayjs(subscription.next_charge_at ? subscription.next_charge_at * 1000 : 0).format('MMMM D, YYYY');
+      cancelAtDate = dayjs(subscription.cancel_at ? subscription.cancel_at * 1000 : 0).format('MMMM D, YYYY');
       planName = subscription.plan === 'nodata' ? 'Lite' : 'Standard';
       planSubtext = subscription.plan === 'nodata' ? '(without data plan)' : '(with data plan)';
     }

src/components/TimeDisplay/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
 import raf from 'raf';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -142,7 +142,7 @@ class TimeDisplay extends Component {
     if (Number.isNaN(now.getTime())) {
       return '...';
     }
-    let dateString = fecha.format(now, 'HH:mm:ss');
+    let dateString = dayjs(now).format('HH:mm:ss');
     const seg = getSegmentNumber(currentRoute);
     if (seg !== null) {
       dateString = `${dateString} \u2013 ${seg}`;

src/components/Timeline/index.jsx

@@ -7,7 +7,7 @@ import Obstruction from 'obstruction';
 import { withStyles } from '@material-ui/core/styles';
 import raf from 'raf';
 import document from 'global/document';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 import Measure from 'react-measure';
 
@@ -566,7 +566,7 @@ class Timeline extends Component {
       const hoverOffset = this.percentToOffset((hoverX - rulerBounds.x) / rulerBounds.width);
       hoverStyle = { left: Math.max(-10, Math.min(rulerBounds.width - 70, hoverX - rulerBounds.x - 40)) };
       if (!Number.isNaN(hoverOffset)) {
-        hoverString = fecha.format(filter.start + hoverOffset, 'HH:mm:ss');
+        hoverString = dayjs(filter.start + hoverOffset).format('HH:mm:ss');
         const segNum = this.segmentNum(hoverOffset);
         if (segNum !== null) {
           hoverString = `${segNum}, ${hoverString}`;

src/utils/clips.js

@@ -1,4 +1,4 @@
-import fecha from 'fecha';
+import dayjs from 'dayjs';
 
 export function clipErrorToText(errorStatus) {
   switch (errorStatus) {
@@ -24,6 +24,5 @@ export function formatClipDuration(duration) {
 }
 
 export function formatClipTimestamp(timestamp) {
-  const formatMask = 'MMM Do, HH:mm';
-  return fecha.format(timestamp * (timestamp < 10000000000 ? 1000 : 1), formatMask);
+  return dayjs(timestamp, 'MMM Do, HH:mm');
 }

src/utils/index.js

@@ -1,9 +1,12 @@
 import * as Sentry from '@sentry/react';
-import fecha from 'fecha';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import decodeJwt, { InvalidTokenError } from 'jwt-decode';
 
 import { currentOffset } from '../timeline';
 
+dayjs.extend(relativeTime);
+
 export const emptyDevice = {
   alias: 'Shared device',
   create_time: 1513041169,
@@ -51,24 +54,12 @@ export function formatDriveDuration(duration) {
 export function timeFromNow(ts) {
   const dt = (Date.now() - ts) / 1000;
   if (dt > 3600 * 24 * 30) {
-    return fecha.format(ts, 'MMM Do YYYY');
-  }
-  if (dt > 3600 * 24) {
-    const days = Math.floor(dt / (3600 * 24));
-    const plural = days === 1 ? 'day' : 'days';
-    return `${days} ${plural} ago`;
-  }
-  if (dt > 3600) {
-    const hours = Math.floor(dt / 3600);
-    const plural = hours === 1 ? 'hour' : 'hours';
-    return `${hours} ${plural} ago`;
-  }
-  if (dt > 60) {
-    const mins = Math.floor(dt / 60);
-    const plural = mins === 1 ? 'minute' : 'minutes';
-    return `${mins} ${plural} ago`;
+    return dayjs(ts).format('MMM Do YYYY');
+  } else if (dt > 60) {
+    return dayjs(ts).fromNow();
+  } else {
+    return 'just now';
   }
-  return 'just now';
 }
 
 export function deviceTypePretty(deviceType) {