Replace moment.js with day.js

Author: anselmbradford

README.md

@@ -28,7 +28,7 @@ This application depends on the following third-party components:
 
 1. [Capital Framework](https://cfpb.github.io/capital-framework/) - CFPB standard styling and controls
 1. [History](https://github.com/reacttraining/history) - Integrating the address bar with the application
-1. [moment](https://momentjs.com/) - Better date handling than native JavaScript
+1. [dayjs](https://day.js.org/) - Better date handling than native JavaScript
 
 It also contains portions adapted from:
 

TERMS.md

@@ -48,4 +48,4 @@ author or the affirmer.
 ## Exceptions
 
 1. [History](https://github.com/reacttraining/history)
-1. [moment](https://momentjs.com/)
+1. [dayjs](https://day.js.org/)

config/webpack.config.dev.js

@@ -250,12 +250,6 @@ module.exports = {
     // This plugin makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

config/webpack.config.prod.js

@@ -500,12 +500,6 @@ module.exports = {
         // both options are optional
         filename: 'main.css',
       }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

cypress/integration/common/filters-spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 describe( 'Filter Panel', () => {
   beforeEach( () => {
@@ -83,14 +83,14 @@ describe( 'Filter Panel', () => {
         .click();
       cy.wait( '@getGeo' );
 
-      const maxDate = moment( new Date() ).format( 'YYYY-MM-DD' );
-      let minDate = moment( new Date() ).subtract( 3, 'years' ).format( 'YYYY-MM-DD' );
+      const maxDate = dayjs( new Date() ).format( 'YYYY-MM-DD' );
+      let minDate = dayjs( new Date() ).subtract( 3, 'years' ).format( 'YYYY-MM-DD' );
       cy.get( '.date-ranges .a-btn.range-3y' )
         .contains( '3y' )
         .click();
       cy.url()
         .should( 'include', `date_received_max=${ maxDate }&date_received_min=${ minDate }` );
-      minDate = moment( new Date() ).subtract( 6, 'months' ).format( 'YYYY-MM-DD' );
+      minDate = dayjs( new Date() ).subtract( 6, 'months' ).format( 'YYYY-MM-DD' );
       cy.get( '.date-ranges .a-btn.range-6m' )
         .contains( '6m' )
         .click();

dist/ccdb5.min.js

@@ -68,15 +68,3 @@ object-assign
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-//! Copyright (c) JS Foundation and other contributors
-
-//! github.com/moment/moment-timezone
-
-//! license : MIT
-
-//! moment-timezone.js
-
-//! moment.js
-
-//! version : 0.5.34

dist/ccdb5.min.js.LICENSE.txt

@@ -75,6 +75,7 @@
     "cypress": "9.1.1",
     "d3": "^5.12.0",
     "d3-selection": "^1.4.0",
+    "dayjs": "^1.10.7",
     "detect-port": "1.2.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
@@ -106,8 +107,6 @@
     "less-loader": "^4.0.5",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "0.5.0",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
     "object-assign": "4.1.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.5.0",

dist/ccdb5.min.js.map

@@ -6,7 +6,7 @@ import {
 } from '../utils'
 import Analytics from '../actions/analytics'
 import { DATE_RANGE_MIN } from '../constants'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 describe('module::utils', () => {
   describe( 'ariaReadoutNumbers', () => {
@@ -127,13 +127,13 @@ describe('module::utils', () => {
     } );
 
     it( 'returns 3y', () => {
-      start =  new Date( moment( end ).subtract( 3, 'years' ).calendar() )
+      start =  new Date( dayjs( end ).subtract( 3, 'years' ).calendar() )
       let actual = calculateDateRange( start, end )
       expect( actual ).toEqual( '3y' )
     } );
 
     it( 'returns 6m', () => {
-      start =  new Date( moment( end ).subtract( 6, 'months' ).calendar() )
+      start =  new Date( dayjs( end ).subtract( 6, 'months' ).calendar() )
       let actual = calculateDateRange( start, end )
       expect( actual ).toEqual( '6m' )
     } )

package.json

@@ -2,8 +2,8 @@
 
 import './DateInput.less'
 import { bindAll, debounce, shortFormat } from '../../utils'
+import dayjs from 'dayjs'
 import iconMap from '../iconMap';
-import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -161,11 +161,11 @@ export default class DateInput extends React.Component {
       return ERROR
     }
 
-    if ( props.min && moment( d ).isBefore( props.min, 'day' ) ) {
+    if ( props.min && dayjs( d ).isBefore( props.min, 'day' ) ) {
       return TOO_LOW
     }
 
-    if ( props.max && moment( d ).isAfter( props.max, 'day' ) ) {
+    if ( props.max && dayjs( d ).isAfter( props.max, 'day' ) ) {
       return TOO_HIGH
     }
 
@@ -180,7 +180,7 @@ export default class DateInput extends React.Component {
     }
 
     if ( state.phase === READY ) {
-      state.asDate = moment( v, FORMAT )
+      state.asDate = dayjs( v, FORMAT )
       state.phase = this._validateAsDate( props, state.asDate )
     }
 

src/__tests__/utils.spec.jsx

@@ -5,11 +5,14 @@ import CollapsibleFilter from './CollapsibleFilter'
 import { connect } from 'react-redux'
 import { DATE_RANGE_MIN } from '../../constants'
 import DateInput from '../DateInput'
+import dayjs from 'dayjs'
+import dayjsIsBetween from 'dayjs/plugin/isBetween'
 import iconMap from '../iconMap'
-import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+dayjs.extend( dayjsIsBetween )
+
 const WARN_SERIES_BREAK = 'CFPB updated product and issue options' +
   ' available to consumers in April 2017 ';
 
@@ -39,10 +42,10 @@ export class DateFilter extends React.Component {
   }
 
   render() {
-    const from = moment( this.state.from, 'MM-DD-YYYY' )
-    const through = moment( this.state.through, 'MM-DD-YYYY' )
+    const from = dayjs( this.state.from, 'MM-DD-YYYY' )
+    const through = dayjs( this.state.through, 'MM-DD-YYYY' )
 
-    const showWarning = moment( '2017-04-23' ).isBetween( from, through, 'day' )
+    const showWarning = dayjs( '2017-04-23' ).isBetween( from, through, 'day' )
 
     return (
       <CollapsibleFilter title={ this.props.title }
@@ -131,8 +134,8 @@ export class DateFilter extends React.Component {
   _validate( state ) {
 
     // Check for range errors
-    const from = moment( state.from, 'MM-DD-YYYY' )
-    const through = moment( state.through, 'MM-DD-YYYY' )
+    const from = dayjs( state.from, 'MM-DD-YYYY' )
+    const through = dayjs( state.through, 'MM-DD-YYYY' )
     if ( from && through && from > through ) {
       state.messages.ordered = "'From' must be less than 'Through'"
     } else {
@@ -168,8 +171,8 @@ export class DateFilter extends React.Component {
     if ( this._hasMessages( state.messages ) === false &&
       this._isChanged( this.props, state ) ) {
 
-      const from = moment( state.from, 'MM-DD-YYYY' )
-      const through = moment( state.through, 'MM-DD-YYYY' )
+      const from = dayjs( state.from, 'MM-DD-YYYY' )
+      const through = dayjs( state.through, 'MM-DD-YYYY' )
       const dateFrom = from.isValid() ? from.toDate() : null
       const dateThrough = through.isValid() ? through.toDate() : null
 

src/components/DateInput/index.jsx

@@ -4,7 +4,7 @@ import target, {
 import actions from '../../actions'
 import * as types from '../../constants'
 
-import moment from 'moment'
+import dayjs from 'dayjs'
 import { startOfToday } from '../../utils'
 
 const maxDate = startOfToday()
@@ -565,7 +565,7 @@ describe( 'reducer:query', () => {
 
       it( 'clears the default range if the dates are not 3 years apart', () => {
         state.date_received_min = new Date(
-          moment( maxDate ).subtract( 2, 'years' )
+          dayjs( maxDate ).subtract( 2, 'years' )
         )
         expected.dateRange = ''
         expected.date_received_min = state.date_received_min
@@ -585,7 +585,7 @@ describe( 'reducer:query', () => {
 
       it( 'sets the 3m range if the dates are right', () => {
         state.date_received_min = new Date(
-          moment( maxDate ).subtract( 3, 'months' )
+          dayjs( maxDate ).subtract( 3, 'months' )
         )
         expected.dateRange = '3m'
         expected.date_received_min = state.date_received_min
@@ -596,7 +596,7 @@ describe( 'reducer:query', () => {
 
       it( 'sets the 6m range if the dates are right', () => {
         state.date_received_min = new Date(
-          moment( maxDate ).subtract( 6, 'months' )
+          dayjs( maxDate ).subtract( 6, 'months' )
         )
         expected.dateRange = '6m'
         expected.date_received_min = state.date_received_min
@@ -607,7 +607,7 @@ describe( 'reducer:query', () => {
 
       it( 'sets the 1y range if the dates are right', () => {
         state.date_received_min = new Date(
-          moment( maxDate ).subtract( 1, 'year' )
+          dayjs( maxDate ).subtract( 1, 'year' )
         )
         expected.dateRange = '1y'
         expected.date_received_min = state.date_received_min
@@ -1116,7 +1116,7 @@ describe( 'reducer:query', () => {
       } )
 
       it( 'adds dateRange', () => {
-        const min = new Date( moment( maxDate ).subtract( 3, 'months' ) )
+        const min = new Date( dayjs( maxDate ).subtract( 3, 'months' ) )
         action.maxDate = maxDate
         action.minDate = min
         result = target( {}, action )

src/components/Filters/DateFilter.jsx

@@ -11,8 +11,8 @@ import {
 } from '../utils'
 import { enforceValues, validateTrendsReducer } from '../utils/reducers'
 import actions from '../actions'
+import dayjs from 'dayjs'
 import { isGreaterThanYear } from '../utils/trends'
-import moment from 'moment'
 
 const queryString = require( 'query-string' )
 
@@ -25,7 +25,7 @@ export const defaultQuery = {
   dateRange: '3y',
   date_received_max: startOfToday(),
   date_received_min: new Date(
-    moment( startOfToday() ).subtract( 3, 'years' )
+    dayjs( startOfToday() ).subtract( 3, 'years' )
   ),
   enablePer1000: true,
   focus: '',
@@ -83,26 +83,26 @@ export function alignDateRange( state ) {
   const dateMin = state.date_received_min
 
   // All
-  if ( moment( dateMax ).isSame( defaultQuery.date_received_max ) &&
-    moment( dateMin ).isSame( types.DATE_RANGE_MIN )
+  if ( dayjs( dateMax ).isSame( defaultQuery.date_received_max ) &&
+    dayjs( dateMin ).isSame( types.DATE_RANGE_MIN )
   ) {
     state.dateRange = 'All'
     return state
   }
 
   const rangeMap = {
-    '3y': new Date( moment( dateMax ).subtract( 3, 'years' ) ),
-    '3m': new Date( moment( dateMax ).subtract( 3, 'months' ) ),
-    '6m': new Date( moment( dateMax ).subtract( 6, 'months' ) ),
-    '1y': new Date( moment( dateMax ).subtract( 1, 'year' ) )
+    '3y': new Date( dayjs( dateMax ).subtract( 3, 'years' ) ),
+    '3m': new Date( dayjs( dateMax ).subtract( 3, 'months' ) ),
+    '6m': new Date( dayjs( dateMax ).subtract( 6, 'months' ) ),
+    '1y': new Date( dayjs( dateMax ).subtract( 1, 'year' ) )
   }
   const ranges = Object.keys( rangeMap )
   let matched = false
 
   for ( let i = 0; i < ranges.length && !matched; i++ ) {
     const range = ranges[i]
 
-    if ( moment( dateMin ).isSame( rangeMap[range], 'day' ) ) {
+    if ( dayjs( dateMin ).isSame( rangeMap[range], 'day' ) ) {
       state.dateRange = range
       matched = true
     }
@@ -255,10 +255,10 @@ export function changeDateRange( state, action ) {
 
   const res = {
     'All': new Date( types.DATE_RANGE_MIN ),
-    '3m': new Date( moment( maxDate ).subtract( 3, 'months' ) ),
-    '6m': new Date( moment( maxDate ).subtract( 6, 'months' ) ),
-    '1y': new Date( moment( maxDate ).subtract( 1, 'year' ) ),
-    '3y': new Date( moment( maxDate ).subtract( 3, 'years' ) )
+    '3m': new Date( dayjs( maxDate ).subtract( 3, 'months' ) ),
+    '6m': new Date( dayjs( maxDate ).subtract( 6, 'months' ) ),
+    '1y': new Date( dayjs( maxDate ).subtract( 1, 'year' ) ),
+    '3y': new Date( dayjs( maxDate ).subtract( 3, 'years' ) )
   }
 
   /* istanbul ignore else */
@@ -286,10 +286,10 @@ export function changeDates( state, action ) {
 
   let { maxDate, minDate } = action
 
-  minDate = moment( minDate ).isValid() ?
-    new Date( moment( minDate ).startOf( 'day' ) ) : null
-  maxDate = moment( maxDate ).isValid() ?
-    new Date( moment( maxDate ).startOf( 'day' ) ) : null
+  minDate = dayjs( minDate ).isValid() ?
+    new Date( dayjs( minDate ).startOf( 'day' ) ) : null
+  maxDate = dayjs( maxDate ).isValid() ?
+    new Date( dayjs( maxDate ).startOf( 'day' ) ) : null
 
 
   const newState = {
@@ -554,7 +554,7 @@ export function removeAllFilters( state ) {
   newState.dateRange = '3y'
   /* eslint-disable camelcase */
   newState.date_received_min =
-    new Date( moment( startOfToday() ).subtract( 3, 'years' ) )
+    new Date( dayjs( startOfToday() ).subtract( 3, 'years' ) )
   newState.date_received_max = startOfToday()
 
   newState.focus = ''