Switch to Luxon for date handling

Author: Mr0grog

package-lock.json

@@ -8,6 +8,7 @@
     "body-parser": "^2.2.0",
     "ejs": "^3.1.10",
     "express": "^5.1.0",
+    "luxon": "^3.6.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
@@ -32,8 +33,6 @@
     "husky": "^9.1.7",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
-    "moment": "^2.30.1",
-    "moment-locales-webpack-plugin": "^1.2.0",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "react": "^16.14.0",

package.json

@@ -2,7 +2,7 @@
 
 import { render, screen, fireEvent } from '@testing-library/react';
 import SearchBar from '../search-bar/search-bar';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 describe('search-bar', () => {
   // Need to use a fake timer because the _urlSearch function is debounced.
@@ -53,7 +53,7 @@ describe('search-bar', () => {
 
     expect(onSearch).toHaveBeenCalledWith({
       url: null,
-      startDate: expect.any(moment),
+      startDate: expect.any(DateTime),
       endDate: null
     });
   });
@@ -68,7 +68,7 @@ describe('search-bar', () => {
     expect(onSearch).toHaveBeenCalledWith({
       url: null,
       startDate: null,
-      endDate: expect.any(moment)
+      endDate: expect.any(DateTime)
     });
   });
 });

src/components/__tests__/search-bar.test.jsx

@@ -2,6 +2,8 @@ import { Component } from 'react';
 import styles from './search-bar.css';
 import SearchDatePicker from '../search-date-picker/search-date-picker';
 
+/** @typedef {import("luxon").DateTime} DateTime */
+
 /**
  * @typedef SearchBarProps
  * @property {(SearchBarQuery) => void} onSearch
@@ -87,8 +89,8 @@ export default class SearchBar extends Component {
   /**
    * Updates query state with date range information.
    *
-   * @param {Date} startDate moment object from date picker
-   * @param {Date} endDate moment object from date picker
+   * @param {DateTime} startDate Luxon DateTime object from date picker
+   * @param {DateTime} endDate Luxon DateTime object from date picker
    */
   _dateSearch ({ startDate, endDate }) {
     this.setState({ startDate, endDate });

src/components/search-bar/search-bar.jsx

@@ -1,12 +1,12 @@
 import { Component } from 'react';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import styles from './search-date-picker.css';
 
 /**
  * @typedef SearchDatePickerProps
- * @property {({startDate: moment.Moment, endDate: Moment.moment}) => void} onDateSearch
- * @property {Date|moment.Moment} startDate
- * @property {Date|moment.Moment} endDate
+ * @property {({startDate: DateTime, endDate: DateTime}) => void} onDateSearch
+ * @property {DateTime} startDate
+ * @property {DateTime} endDate
  */
 
 /**
@@ -26,7 +26,7 @@ export default class SearchDatePicker extends Component {
   }
 
   handleChange (event) {
-    const value = event.target.value ? moment(event.target.value) : null;
+    const value = event.target.value ? DateTime.fromISO(event.target.value) : null;
     this.props.onDateSearch({
       startDate: this.props.startDate,
       endDate: this.props.endDate,
@@ -42,19 +42,19 @@ export default class SearchDatePicker extends Component {
           <input
             type="date"
             name="startDate"
-            value={this.props.startDate?.toISOString()?.slice(0, 10) ?? ''}
+            value={this.props.startDate?.toISODate() ?? ''}
             onChange={this.handleChange}
-            max={(new Date()).toISOString().slice(0, 10)}
+            max={DateTime.now().toISODate()}
           />
         </label>
         <label className={styles.searchDateField}>
           To date:
           <input
             type="date"
             name="endDate"
-            value={this.props.endDate?.toISOString()?.slice(0, 10) ?? ''}
+            value={this.props.endDate?.toISODate() ?? ''}
             onChange={this.handleChange}
-            max={moment().add(1, 'days').toISOString().slice(0, 10)}
+            max={DateTime.now().plus({ days: 1 }).toISODate()}
           />
         </label>
       </>

src/components/search-date-picker/search-date-picker.jsx

@@ -1,11 +1,11 @@
 /* eslint-env jest */
 import { formatDateRange } from '../db-helpers';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 
 describe('db-helpers', () => {
-  test('formatDateRange returns correct query parameter value when moment object is passed in', () => {
-    const startDate = moment('26 Oct 2019 21:00:00 PST');
-    const endDate = moment('27 Oct 2019 21:00:00 PST');
+  test('formatDateRange returns correct query parameter value when DateTime object is passed in', () => {
+    const startDate = DateTime.fromISO('2019-10-26T21:00:00-08:00');
+    const endDate = DateTime.fromISO('2019-10-27T21:00:00-08:00');
     const dateRangeString = formatDateRange({ startDate, endDate });
 
     expect(dateRangeString).toBe('2019-10-27T05:00:00.000Z..2019-10-28T05:00:00.000Z');

src/scripts/__tests__/db-helpers.test.js

@@ -1,16 +1,19 @@
+/** @typedef {import("luxon").DateTime} DateTime */
+
 /**
- * Takes a date (either a moment or Date object) and returns an ISO date string in UTC time.
- * If there is no date, return an empty string.
+ * Takes a date (either a Luxon DateTime or Date object) and returns an ISO date
+ * string in UTC time. If there is no date, return an empty string.
  * Throws a TypeError if an invalid value is passed in.
  * @private
- * @param {String|Date|Moment} date
+ * @param {String|Date|DateTime} date
  *
  * @returns {String}
  */
 function _formatDate (date) {
   if (!date) return '';
+  else if (date.toISO) return date.toUTC().toISO();
   else if (date.toISOString) return date.toISOString();
-  else throw new TypeError(`formatDate only takes Moment or Date instances, not ${date.constructor.name}s`);
+  else throw new TypeError(`formatDate only takes Date or luxon.DateTime instances, not ${date.constructor.name}s`);
 }
 
 /**

src/scripts/db-helpers.js

@@ -1,6 +1,5 @@
 const autoprefixer = require('autoprefixer');
 const CompressionPlugin = require('compression-webpack-plugin');
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const path = require('path');
 const zopfli = require('@gfx/zopfli');
 
@@ -141,10 +140,7 @@ module.exports = {
       }
     ],
   },
-  plugins: [
-    // Strip locales from Moment.js (we only use English)
-    new MomentLocalesPlugin()
-  ],
+  plugins: [],
 };
 
 // Production-specific additions