Merge pull request #89 from gladly-team/kevin/use-day-js

Replace moment.js with day.js
gladly-team · Jan 8, 2021 · e37c582 · e37c582 · vercel · Jan 8, 2021
2 parents b5ab4cd + e8e179d
commit e37c582
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -24,10 +24,10 @@
     "@zeit/next-source-maps": "^0.0.4-canary.1",
     "clsx": "^1.1.1",
     "cookies": "^0.8.0",
+    "dayjs": "^1.10.2",
     "firebase": "^7.16.1",
     "firebase-admin": "^9.0.0",
     "lodash": "^4.17.19",
-    "moment": "^2.27.0",
     "next": "^10.0.5",
     "next-images": "^1.6.2",
     "next-offline": "^5.0.2",

diff --git a/src/components/Achievement.js b/src/components/Achievement.js
@@ -2,7 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
 import { isNil } from 'lodash/lang'
-import moment from 'moment'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import green from '@material-ui/core/colors/green'
 import grey from '@material-ui/core/colors/grey'
 import red from '@material-ui/core/colors/red'
@@ -23,6 +24,8 @@ import RadioButtonUnchecked from '@material-ui/icons/RadioButtonUnchecked'
 import Schedule from '@material-ui/icons/Schedule'
 import LinearProgress from '@material-ui/core/LinearProgress'
 
+dayjs.extend(relativeTime)
+
 const useStyles = makeStyles((theme) => ({
   root: {
     minWidth: 340,
@@ -131,22 +134,22 @@ const PROGRESS_BAR = 'progressBar'
 /**
  * Return the formatted date to display, as a "time since X" format
  * or "time from now" format.
- * @param {String} time - An ISO timestamp
+ * @param {String} timestamp - An ISO timestamp
  * @return {String} Time text, such as "2 days ago" or "a few
  *   seconds remaining".
  */
-const getTimeDisplay = (time) => {
-  const now = moment()
-  const timeMoment = moment(time)
+const getTimeDisplay = (timestamp) => {
+  const now = dayjs()
+  const time = dayjs(timestamp)
   let displayedTime = ''
-  if (timeMoment.isBefore(now)) {
+  if (time.isBefore(now)) {
     // "time ago":
-    // https://momentjs.com/docs/#/displaying/fromnow/
-    displayedTime = timeMoment.fromNow(false)
+    // https://day.js.org/docs/en/display/from-now#docsNav
+    displayedTime = time.fromNow()
   } else {
-    // "in X time"
-    // https://momentjs.com/docs/#/displaying/from/
-    displayedTime = `${timeMoment.from(now, true)} remaining`
+    // "in X" time
+    // https://day.js.org/docs/en/display/from-now#docsNav
+    displayedTime = `${time.fromNow(true)} remaining`
   }
   return displayedTime
 }
@@ -248,15 +251,15 @@ const Achievement = (props) => {
   let timeToDisplay = null
   if (status === IN_PROGRESS && !isNil(deadlineTime)) {
     // Warn if it's not a valid time.
-    if (!moment(deadlineTime).isValid()) {
+    if (!dayjs(deadlineTime).isValid()) {
       // eslint-disable-next-line no-console
       console.warn('Invalid "deadlineTime" timestamp provided to Achievement.')
     } else {
       timeToDisplay = getTimeDisplay(deadlineTime)
     }
   } else if (status === SUCCESS || status === FAILURE) {
     // Warn if a valid completionTime is not provided.
-    if (isNil(completionTime) || !moment(completionTime).isValid()) {
+    if (isNil(completionTime) || !dayjs(completionTime).isValid()) {
       // eslint-disable-next-line no-console
       console.warn(
         'Invalid "completionTime" timestamp provided to Achievement.'

diff --git a/src/components/__tests__/Achievement.test.js b/src/components/__tests__/Achievement.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import MockDate from 'mockdate'
 import Typography from '@material-ui/core/Typography'
 import CardActions from '@material-ui/core/CardActions'
@@ -18,7 +18,7 @@ import Paper from '@material-ui/core/Paper'
 const mockNow = '2020-04-02T18:00:00.000Z'
 
 beforeEach(() => {
-  MockDate.set(moment(mockNow))
+  MockDate.set(dayjs(mockNow))
 })
 
 afterEach(() => {
@@ -36,8 +36,8 @@ const getMockProps = () => ({
   impactText: 'Plant 1 tree',
   status: 'inProgress',
   taskText: 'Open 10 tabs',
-  completionTime: moment(mockNow).subtract(2, 'minutes').toISOString(),
-  deadlineTime: moment(mockNow).add(8, 'hours').toISOString(),
+  completionTime: dayjs(mockNow).subtract(2, 'minutes').toISOString(),
+  deadlineTime: dayjs(mockNow).add(8, 'hours').toISOString(),
   isCommunityGoal: undefined, // defaults to false
   progress: {
     currentNumber: 11,
@@ -181,34 +181,34 @@ describe('Achievement component', () => {
       ...getMockProps(),
       status: 'inProgress',
       completionTime: undefined,
-      deadlineTime: moment(mockNow).add(1, 'second').toISOString(),
+      deadlineTime: dayjs(mockNow).add(1, 'second').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
 
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(24, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).add(24, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(46, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).add(46, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a minute remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(192, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).add(192, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('3 minutes remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(54, 'minutes').toISOString(),
+      deadlineTime: dayjs(mockNow).add(54, 'minutes').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('an hour remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(14, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).add(14, 'hours').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('14 hours remaining')
   })
@@ -219,35 +219,35 @@ describe('Achievement component', () => {
     const mockProps = {
       ...getMockProps(),
       status: 'success',
-      completionTime: moment(mockNow).subtract(1, 'second').toISOString(),
-      deadlineTime: moment(mockNow).add(14, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(1, 'second').toISOString(),
+      deadlineTime: dayjs(mockNow).add(14, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
 
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(24, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(24, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(46, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(46, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a minute ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(192, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(192, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('3 minutes ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(54, 'minutes').toISOString(),
+      completionTime: dayjs(mockNow).subtract(54, 'minutes').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('an hour ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(14, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(14, 'hours').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('14 hours ago')
   })
@@ -258,40 +258,40 @@ describe('Achievement component', () => {
     const mockProps = {
       ...getMockProps(),
       status: 'failure',
-      completionTime: moment(mockNow).subtract(1, 'second').toISOString(),
-      deadlineTime: moment(mockNow).subtract(1, 'second').toISOString(),
+      completionTime: dayjs(mockNow).subtract(1, 'second').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(1, 'second').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
 
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(24, 'seconds').toISOString(),
-      deadlineTime: moment(mockNow).subtract(24, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(24, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(24, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a few seconds ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(46, 'seconds').toISOString(),
-      deadlineTime: moment(mockNow).subtract(46, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(46, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(46, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a minute ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(192, 'seconds').toISOString(),
-      deadlineTime: moment(mockNow).subtract(192, 'seconds').toISOString(),
+      completionTime: dayjs(mockNow).subtract(192, 'seconds').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(192, 'seconds').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('3 minutes ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(54, 'minutes').toISOString(),
-      deadlineTime: moment(mockNow).subtract(54, 'minutes').toISOString(),
+      completionTime: dayjs(mockNow).subtract(54, 'minutes').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(54, 'minutes').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('an hour ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(14, 'hours').toISOString(),
-      deadlineTime: moment(mockNow).subtract(14, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(14, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(14, 'hours').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('14 hours ago')
   })
@@ -302,30 +302,30 @@ describe('Achievement component', () => {
     const mockProps = {
       ...getMockProps(),
       status: 'success',
-      completionTime: moment(mockNow).subtract(3, 'days').toISOString(),
-      deadlineTime: moment(mockNow).add(14, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(3, 'days').toISOString(),
+      deadlineTime: dayjs(mockNow).add(14, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
 
     expect(getTimeDisplayString(wrapper)).toEqual('3 days ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(16, 'days').toISOString(),
+      completionTime: dayjs(mockNow).subtract(16, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('16 days ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(70, 'days').toISOString(),
+      completionTime: dayjs(mockNow).subtract(70, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('2 months ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(400, 'days').toISOString(),
+      completionTime: dayjs(mockNow).subtract(400, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a year ago')
 
     wrapper.setProps({
-      completionTime: moment(mockNow).subtract(3, 'years').toISOString(),
+      completionTime: dayjs(mockNow).subtract(3, 'years').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('3 years ago')
   })
@@ -337,29 +337,29 @@ describe('Achievement component', () => {
       ...getMockProps(),
       status: 'inProgress',
       completionTime: undefined,
-      deadlineTime: moment(mockNow).add(3, 'days').toISOString(),
+      deadlineTime: dayjs(mockNow).add(3, 'days').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
 
     expect(getTimeDisplayString(wrapper)).toEqual('3 days remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(16, 'days').toISOString(),
+      deadlineTime: dayjs(mockNow).add(16, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('16 days remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(70, 'days').toISOString(),
+      deadlineTime: dayjs(mockNow).add(70, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('2 months remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(400, 'days').toISOString(),
+      deadlineTime: dayjs(mockNow).add(400, 'days').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('a year remaining')
 
     wrapper.setProps({
-      deadlineTime: moment(mockNow).add(3, 'years').toISOString(),
+      deadlineTime: dayjs(mockNow).add(3, 'years').toISOString(),
     })
     expect(getTimeDisplayString(wrapper)).toEqual('3 years remaining')
   })
@@ -371,7 +371,7 @@ describe('Achievement component', () => {
       ...getMockProps(),
       status: 'inProgress',
       completionTime: undefined,
-      deadlineTime: moment(mockNow).add(4, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).add(4, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
     expect(
@@ -385,8 +385,8 @@ describe('Achievement component', () => {
     const mockProps = {
       ...getMockProps(),
       status: 'success',
-      completionTime: moment(mockNow).subtract(4, 'hours').toISOString(),
-      deadlineTime: moment(mockNow).subtract(4, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
     expect(
@@ -400,8 +400,8 @@ describe('Achievement component', () => {
     const mockProps = {
       ...getMockProps(),
       status: 'failure',
-      completionTime: moment(mockNow).subtract(4, 'hours').toISOString(),
-      deadlineTime: moment(mockNow).subtract(4, 'hours').toISOString(),
+      completionTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
     expect(
@@ -444,7 +444,7 @@ describe('Achievement component', () => {
       ...getMockProps(),
       status: 'success',
       completionTime: undefined,
-      deadlineTime: moment(mockNow).subtract(4, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
     expect(
@@ -467,7 +467,7 @@ describe('Achievement component', () => {
       ...getMockProps(),
       status: 'failure',
       completionTime: undefined,
-      deadlineTime: moment(mockNow).subtract(4, 'hours').toISOString(),
+      deadlineTime: dayjs(mockNow).subtract(4, 'hours').toISOString(),
     }
     const wrapper = shallow(<Achievement {...mockProps} />)
     expect(