Update intl relativetimeformat and date fns dependencies to lts (#2364)

* update @formatjs/intl-relativetimeformat and date-fns dependencies to LTS

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.5.4",
-    "@formatjs/intl-relativetimeformat": "^6.0.2",
+    "@formatjs/intl-relativetimeformat": "^11.2.14",
     "@mapbox/geo-viewport": "^0.4.0",
     "@nivo/bar": "^0.79.1",
     "@nivo/core": "^0.79.0",
@@ -28,7 +28,7 @@
     "@turf/nearest-point-on-line": "^6.0.2",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.2.5",
-    "date-fns": "^1.29.0",
+    "date-fns": "^3.6.0",
     "downshift": "^5.4.3",
     "file-saver": "^2.0.2",
     "fontsource-bungee": "^3.1.5",

src/components/ActivityListing/ActivityTime.js

@@ -3,12 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import {
   injectIntl,
-  FormattedRelativeTime,
   FormattedDate,
   FormattedTime
 } from 'react-intl'
-import { selectUnit } from '@formatjs/intl-utils'
-import parse from 'date-fns/parse'
+import { parseISO, formatDistanceToNow } from 'date-fns'
 
 /**
  * Displays the timestamp for an activity entry, either relative or exact
@@ -17,20 +15,10 @@ import parse from 'date-fns/parse'
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
 export const ActivityTime = props => {
-  const timestamp = parse(props.entry.created)
+  const timestamp = parseISO(props.entry.created)
   const created = `${props.intl.formatDate(timestamp)} ${props.intl.formatTime(timestamp)}`
-  const selectedUnit = selectUnit(timestamp, Date.now(),
-    {
-      second: 30,
-      minute: 60,
-      hour: 24,
-      day: 30
-    })
-  if (selectedUnit.unit === "second" ||
-      selectedUnit.unit === "minute" ||
-      selectedUnit.unit === "hour") {
-    selectedUnit.updateIntervalInSeconds = 30
-  }
+
+  const distanceToNow = formatDistanceToNow(timestamp, { addSuffix: true });
 
   return (
     <div
@@ -40,11 +28,11 @@ export const ActivityTime = props => {
       )}
       title={created}
     >
-      {(props.showExactDates || selectedUnit.unit === "year")?
+      {props.showExactDates ?
        <span>
          <FormattedDate value={props.entry.created} /> <FormattedTime value={props.entry.created} />
        </span> :
-       <FormattedRelativeTime {...selectedUnit} numeric="auto" />
+       <span>{distanceToNow}</span>
       }
     </div>
   )

src/components/ActivityMap/ActivityMap.js

@@ -4,8 +4,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import { ZoomControl, CircleMarker, Popup } from 'react-leaflet'
 import { getCoord } from '@turf/invariant'
 import centroid from '@turf/centroid'
-import parse from 'date-fns/parse'
-import differenceInHours from 'date-fns/difference_in_hours'
+import { differenceInHours, parseISO } from 'date-fns' 
 import _isString from 'lodash/isString'
 import _get from 'lodash/get'
 import _map from 'lodash/map'
@@ -42,7 +41,7 @@ export const ActivityMap = props => {
         JSON.parse(entry.task.location) :
         entry.task.location
       const center = getCoord(centroid(geojson))
-      const hoursOld = differenceInHours(Date.now(), parse(entry.created))
+      const hoursOld = differenceInHours(Date.now(), parseISO(entry.created))
 
       return (
         <CircleMarker

src/components/ActivityTimeline/ChallengeActivityTimeline/ChallengeActivityTimeline.js

@@ -9,7 +9,7 @@ import _reverse from 'lodash/reverse'
 import _sortBy from 'lodash/sortBy'
 import _take from 'lodash/take'
 import _isFinite from 'lodash/isFinite'
-import parse from 'date-fns/parse'
+import { parseISO } from 'date-fns'
 import { statusLabels,
          keysByStatus }
        from '../../../services/Task/TaskStatus/TaskStatus'
@@ -34,7 +34,7 @@ export class ChallengeActivityTimeline extends Component {
     // recent activity will show up first.
     const groupedByDate = _toPairs(_groupBy(this.props.activity, 'date'))
     const latestEntries = _reverse(
-      _sortBy(groupedByDate, (value) => parse(value[0]).getTime())
+      _sortBy(groupedByDate, (value) => parseISO(value[0]).getTime())
     )
 
     // Build timeline entries for each day, showing each (non-zero) type of
@@ -43,7 +43,7 @@ export class ChallengeActivityTimeline extends Component {
       const isoDate = entriesByDate[0]
       const statusEntries = entriesByDate[1]
 
-      const formattedDate = this.props.intl.formatDate(parse(isoDate),
+      const formattedDate = this.props.intl.formatDate(parseISO(isoDate),
                                                        {month: 'long', day: 'numeric'})
       const statuses = _compact(_map(statusEntries, entry => {
         if (entry.count === 0) {

src/components/ActivityTimeline/UserActivityTimeline/UserActivityTimelineWidget.js

@@ -9,8 +9,7 @@ import _isNumber from 'lodash/isNumber'
 import _reverse from 'lodash/reverse'
 import _sortBy from 'lodash/sortBy'
 import _compact from 'lodash/compact'
-import parse from 'date-fns/parse'
-import startOfDay from 'date-fns/start_of_day'
+import { startOfDay, parseISO, format } from 'date-fns'
 import { ActivityItemType,
          typeLabels,
          keysByType }
@@ -68,7 +67,7 @@ export default class UserActivityTimelineWidget extends Component {
       challengeNames.set(entry.parentId, entry.parentName)
 
       return Object.assign({}, entry, {
-        normalizedISODate: this.props.startOfDay(parse(entry.created)),
+        normalizedISODate: this.props.startOfDay(parseISO(entry.created)),
         challengeId: entry.parentId,
         description: `${localizedActionLabels[keysByAction[entry.action]]} ` +
                      localizedTypeLabels[keysByType[entry.typeId]] +
@@ -104,7 +103,7 @@ export default class UserActivityTimelineWidget extends Component {
     // Sort date groups in descending date order.
     const latestEntries = _reverse(_sortBy(
       groupedByDate,
-      pairs => parse(pairs[0]).getTime()
+      pairs => parseISO(pairs[0]).getTime()
     ))
 
     // Build timeline entries for each day, showing each unique type of activity
@@ -140,7 +139,7 @@ export default class UserActivityTimelineWidget extends Component {
       return (
         <li key={entriesByDate[0]} className="mr-timeline__period">
           <h3 className="mr-timeline__header">
-            {this.props.intl.formatDate(parse(entriesByDate[0]),
+            {this.props.intl.formatDate(parseISO(format(entriesByDate[0], "yyyy-MM-dd'T'HH:mm:ssxxx")),
                                         {month: 'long', day: 'numeric'})}
           </h3>
           <ol className="mr-timeline__activity">

src/components/AdminPane/HOCs/WithChallengeMetrics/WithChallengeMetrics.js

@@ -17,7 +17,7 @@ import _pickBy from 'lodash/pickBy'
 import _values from 'lodash/values'
 import _indexOf from 'lodash/indexOf'
 import _isEqual from 'lodash/isEqual'
-import parse from 'date-fns/parse'
+import { parseISO } from 'date-fns'
 import WithComputedMetrics from '../../HOCs/WithComputedMetrics/WithComputedMetrics'
 import WithDashboardEntityFilter
        from '../../HOCs/WithDashboardEntityFilter/WithDashboardEntityFilter'
@@ -134,7 +134,7 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
           // Calculate metrics for each day
           let totalRemaining = tasksAvailable
           dailyMetrics = _map(groupedByDate, dailyEntries => {
-            const day = parse(dailyEntries[0])
+            const day = parseISO(dailyEntries[0])
             const dayActivity = dailyEntries[1]
 
             const completedToday = _sumBy(dayActivity, entry =>

src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.js

@@ -6,8 +6,7 @@ import Calendar from 'react-calendar-heatmap'
 import _map from 'lodash/map'
 import _compact from 'lodash/compact'
 import _reverse from 'lodash/reverse'
-import format from 'date-fns/format'
-import subMonths from 'date-fns/sub_months'
+import { subMonths, format } from 'date-fns'
 import messages from './Messages'
 import './CalendarHeatmap.scss'
 
@@ -36,7 +35,7 @@ export default class CalendarHeatmap extends Component {
       _compact(_map(_reverse(this.props.dailyMetrics), metrics =>
         metrics.value === 0 ? null :
         ({
-          date: format(metrics.day, 'YYYY-MM-DD'),
+          date: format(metrics.day, 'yyyy-MM-dd'),
           count: metrics.value,
         })
     ))

src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, FormattedDate, injectIntl } from "react-intl";
-import parse from "date-fns/parse";
+import { parseISO } from "date-fns";
 import { Link } from "react-router-dom";
 import _get from "lodash/get";
 import {
@@ -136,7 +136,7 @@ export class ChallengeDashboard extends Component {
             <div className="mr-mt-6 mr-text-red-light">
               <FormattedMessage {...manageMessages.staleChallengeMessage1} />{" "}
               <FormattedDate
-                value={parse(this.props.challenge.systemArchivedAt)}
+                value={parseISO(this.props.challenge.systemArchivedAt)}
                 year="numeric"
                 month="long"
                 day="2-digit"

src/components/AdminPane/Manage/ViewChallengeTasks/GeographicIndexingNotice.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
-import differenceInHours from 'date-fns/difference_in_hours'
+import { differenceInHours } from 'date-fns'
 import _get from 'lodash/get'
 import SvgSymbol from '../../../SvgSymbol/SvgSymbol'
 import messages from './Messages'

src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/ChallengeOverviewWidget.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { FormattedMessage, FormattedDate } from 'react-intl'
 import _get from 'lodash/get'
 import _isEmpty from 'lodash/isEmpty'
-import parse from 'date-fns/parse'
+import { parseISO } from 'date-fns'
 import { ChallengeStatus, messagesByStatus }
        from  '../../../../../services/Challenge/ChallengeStatus/ChallengeStatus'
 import { WidgetDataTarget, registerWidgetType }
@@ -37,8 +37,8 @@ export default class ChallengeOverviewWidget extends Component {
     const dataOriginDateText =
       (!this.props.challenge.dataOriginDate || !this.props.challenge.lastTaskRefresh) ? null :
       this.props.intl.formatMessage(messages.dataOriginDate,
-        {refreshDate: this.props.intl.formatDate(parse(this.props.challenge.lastTaskRefresh)),
-         sourceDate: this.props.intl.formatDate(parse(this.props.challenge.dataOriginDate))})
+        {refreshDate: this.props.intl.formatDate(parseISO(this.props.challenge.lastTaskRefresh)),
+         sourceDate: this.props.intl.formatDate(parseISO(this.props.challenge.dataOriginDate))})
 
     return (
       <QuickWidget {...this.props}
@@ -103,7 +103,7 @@ export default class ChallengeOverviewWidget extends Component {
 
             <div>
               {this.props.challenge.created &&
-              <FormattedDate value={parse(this.props.challenge.created)}
+              <FormattedDate value={parseISO(this.props.challenge.created)}
                               year='numeric' month='long' day='2-digit' />
               }
             </div>
@@ -116,7 +116,7 @@ export default class ChallengeOverviewWidget extends Component {
 
             <div>
               {this.props.challenge.lastTaskRefresh &&
-              <FormattedDate value={parse(this.props.challenge.lastTaskRefresh)}
+              <FormattedDate value={parseISO(this.props.challenge.lastTaskRefresh)}
                               year='numeric' month='long' day='2-digit' />
               }
             </div>
@@ -129,7 +129,7 @@ export default class ChallengeOverviewWidget extends Component {
 
             <div title={dataOriginDateText}>
               {this.props.challenge.dataOriginDate &&
-              <FormattedDate value={parse(this.props.challenge.dataOriginDate)}
+              <FormattedDate value={parseISO(this.props.challenge.dataOriginDate)}
                               year='numeric' month='long' day='2-digit' />
               }
             </div>

src/components/CardChallenge/CardChallenge.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { FormattedMessage, FormattedDate } from 'react-intl'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
-import parse from 'date-fns/parse'
+import { parseISO } from 'date-fns'
 import _isUndefined from 'lodash/isUndefined'
 import _noop from 'lodash/noop'
 import _get from 'lodash/get'
@@ -137,7 +137,7 @@ export class CardChallenge extends Component {
                 <strong className="mr-text-yellow">
                   <FormattedMessage {...messages.lastTaskRefreshLabel} />:
                 </strong> <FormattedDate
-                  value={parse(this.props.challenge.dataOriginDate)}
+                  value={parseISO(this.props.challenge.dataOriginDate)}
                   year='numeric' month='long' day='2-digit'
                 />
               </li>

src/components/ChallengeDetail/ChallengeDetail.js

@@ -9,7 +9,7 @@ import _merge from "lodash/merge";
 import _uniqBy from "lodash/uniqBy";
 import _differenceBy from "lodash/differenceBy";
 import { Popup } from 'react-leaflet'
-import parse from "date-fns/parse";
+import { parseISO } from "date-fns";
 import MapPane from "../EnhancedMap/MapPane/MapPane";
 import TaskClusterMap from "../TaskClusterMap/TaskClusterMap";
 import { messagesByDifficulty } from "../../services/Challenge/ChallengeDifficulty/ChallengeDifficulty";
@@ -420,10 +420,10 @@ export class ChallengeDetail extends Component {
       ? null
       : this.props.intl.formatMessage(messages.dataOriginDateLabel, {
           refreshDate: this.props.intl.formatDate(
-            parse(challenge.lastTaskRefresh)
+            parseISO(challenge.lastTaskRefresh)
           ),
           sourceDate: this.props.intl.formatDate(
-            parse(challenge.dataOriginDate)
+            parseISO(challenge.dataOriginDate)
           ),
         });
 
@@ -563,7 +563,7 @@ export class ChallengeDetail extends Component {
                           :
                         </strong>{" "}
                         <FormattedDate
-                          value={parse(challenge.dataOriginDate)}
+                          value={parseISO(challenge.dataOriginDate)}
                           year="numeric"
                           month="long"
                           day="2-digit"

src/components/ChallengeDetail/ChallengeDetail.test.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { IntlProvider } from "react-intl";
 import { render, fireEvent, screen, waitFor } from "@testing-library/react";
 import { ChallengeDetail } from "./ChallengeDetail.js";
+import { format } from "date-fns";
 
 describe("ChallengeDetail", () => {
   it("doesn't break if only required props are provided", () => {
@@ -25,8 +26,8 @@ describe("ChallengeDetail", () => {
         browsedChallenge={{
           id: 1,
           parent: { id: 2 },
-          lastTaskRefresh: new Date(),
-          dataOriginDate: new Date(),
+          lastTaskRefresh: format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),
+          dataOriginDate: format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx").slice(0, 10),
         }}
         intl={{
           formatMessage: () => '',
@@ -54,8 +55,8 @@ describe("ChallengeDetail", () => {
         browsedChallenge={{
           id: 1,
           parent: { id: 2 },
-          lastTaskRefresh: new Date(),
-          dataOriginDate: new Date(),
+          lastTaskRefresh: format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),
+          dataOriginDate: format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx").slice(0, 10),
           enabled: true,
         }}
         intl={{

src/components/CommentList/CommentList.js

@@ -5,7 +5,7 @@ import { FormattedMessage,
          FormattedDate,
          FormattedTime } from 'react-intl'
 import { Link } from 'react-router-dom'
-import parse from 'date-fns/parse'
+import { parseISO } from 'date-fns'
 import _map from 'lodash/map'
 import _isObject from 'lodash/isObject'
 import _sortBy from 'lodash/sortBy'
@@ -41,7 +41,7 @@ export default class CommentList extends Component {
     if (this.props.comments?.length !== 0) {
       commentDates = new Map()
       _each(this.props.comments, (comment) =>
-        commentDates.set(comment.id, parse(comment.created))
+        commentDates.set(comment.id, parseISO(comment.created))
       )
 
       // Show in descending order, with the most recent comment first.
@@ -54,7 +54,7 @@ export default class CommentList extends Component {
     } else {
       commentDates = new Map()
       _each(this.props.taskComments, (comment) =>
-        commentDates.set(comment.id, parse(comment.created))
+        commentDates.set(comment.id, parseISO(comment.created))
       )
 
       // Show in descending order, with the most recent comment first.

src/components/HOCs/WithFilterCriteria/WithFilterCriteria.js

@@ -11,7 +11,7 @@ import _toInteger from 'lodash/toInteger'
 import _each from 'lodash/each'
 import _isUndefined from 'lodash/isUndefined'
 import _debounce from 'lodash/debounce'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import { fromLatLngBounds, GLOBAL_MAPBOUNDS } from '../../../services/MapBounds/MapBounds'
 import { buildSearchCriteriafromURL,
          buildSearchURL } from '../../../services/SearchCriteria/SearchCriteria'
@@ -135,7 +135,7 @@ export const WithFilterCriteria = function(WrappedComponent, ignoreURL = true,
        if (searchCriteria.filters.reviewedAt &&
            typeof searchCriteria.filters.reviewedAt === "object") {
          searchCriteria.filters.reviewedAt =
-           format(searchCriteria.filters.reviewedAt, 'YYYY-MM-DD')
+           format(searchCriteria.filters.reviewedAt, 'yyyy-MM-dd')
        }
 
        return buildSearchURL(searchCriteria)