Replace many lodash _.get() calls with native ES expressions (#2515)

Author: jake-low

src/components/ActivityListing/ActivityDescription.jsx

@@ -4,7 +4,6 @@ import classNames from 'classnames'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
 import _isFinite from 'lodash/isFinite'
-import _get from 'lodash/get'
 import { ActivityItemType, messagesByType }
        from '../../services/Activity/ActivityItemTypes/ActivityItemTypes'
 import { ActivityActionType, messagesByAction }
@@ -49,7 +48,7 @@ export const ActivityDescription = props => {
           {challengeName}
         </Link>
       </div>
-      {_get(props.entry, 'challenge.general.parent.id') &&
+      {(props.entry?.challenge?.general?.parent?.id) &&
         <div className="mr-break-words mr-links-grey-light mr-mb-4">
           <Link
             to={`/browse/projects/${props.entry.challenge.general.parent.id}`}

src/components/ActivityMap/ActivityMap.jsx

@@ -5,7 +5,6 @@ import { getCoord } from '@turf/invariant'
 import centroid from '@turf/centroid'
 import { differenceInHours, parseISO } from 'date-fns'
 import _isString from 'lodash/isString'
-import _get from 'lodash/get'
 import _map from 'lodash/map'
 import { latLng } from 'leaflet'
 import { toLatLngBounds, GLOBAL_MAPBOUNDS } from '../../services/MapBounds/MapBounds'
@@ -26,7 +25,7 @@ const VisibleTileLayer = WithVisibleLayer(SourcedTileLayer)
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
 export const ActivityMap = props => {
-  const hasTaskMarkers = _get(props, 'activity.length', 0) > 0
+  const hasTaskMarkers = (props.activity?.length ?? 0) > 0
   let coloredMarkers = null
   if (hasTaskMarkers) {
     coloredMarkers = _map(props.activity, entry => {
@@ -63,7 +62,7 @@ export const ActivityMap = props => {
   }
 
   const overlayLayers = buildLayerSources(
-    props.visibleOverlays, _get(props, 'user.settings.customBasemaps'),
+    props.visibleOverlays, props.user?.settings?.customBasemaps,
     (layerId, index, layerSource) =>
       <SourcedTileLayer key={layerId} source={layerSource} zIndex={index + 2} />
   )

src/components/AdminPane/HOCs/WithChallengeManagement/WithChallengeManagement.js

@@ -1,6 +1,5 @@
 import { connect } from "react-redux";
 import _map from "lodash/map";
-import _get from "lodash/get";
 import _isObject from "lodash/isObject";
 import _compact from "lodash/compact";
 import bundleByTaskBundleId from "../../../../utils/bundleByTaskBundleId";
@@ -192,7 +191,7 @@ async function uploadLineByLine(
  * component
  */
 async function deleteIncompleteTasks(dispatch, ownProps, challenge) {
-  const estimatedToDelete = _get(challenge, "actions.available");
+  const estimatedToDelete = challenge?.actions?.available;
   let latestAvailable = estimatedToDelete;
 
   ownProps.updateDeletingTasksProgress(true, 0);
@@ -217,16 +216,9 @@ async function deleteIncompleteTasks(dispatch, ownProps, challenge) {
           challenge.id,
           true
         )(dispatch).then((challengeResult) => {
-          const available = _get(
-            actionsResult,
-            `entities.challenges.${challenge.id}.actions.available`,
-            latestAvailable
-          );
+          const available = actionsResult?.entities?.challenges?.[challenge.id]?.actions?.available ?? latestAvailable;
 
-          const status = _get(
-            challengeResult,
-            `entities.challenges.${challenge.id}.status`
-          );
+          const status = challengeResult?.entities?.challenges?.[challenge.id]?.status;
 
           if (
             available >= latestAvailable &&

src/components/AdminPane/HOCs/WithChallengeMetrics/WithChallengeMetrics.jsx

@@ -1,6 +1,5 @@
 import { Component } from 'react'
 import { injectIntl } from 'react-intl'
-import _get from 'lodash/get'
 import _map from 'lodash/map'
 import _toPairs from 'lodash/toPairs'
 import _groupBy from 'lodash/groupBy'
@@ -36,12 +35,12 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
     }
 
     updateMetrics(props) {
-      const challengeId =_get(props.challenge, 'id')
+      const challengeId =props.challenge?.id
 
       if (challengeId && props.fetchChallengeActions) {
         this.setState({loading: true})
-        const criteria = {filters: _get(props.searchFilters, 'filters')}
-        criteria.invertFields = _get(props.searchCriteria, 'filters.invertFields')
+        const criteria = {filters: props.searchFilters?.filters}
+        criteria.invertFields = props.searchCriteria?.filters?.invertFields
 
         if (props.includeTaskStatuses && this.isFiltering(props.includeTaskStatuses)) {
           criteria.status = _keys(_pickBy(props.includeTaskStatuses, v => v)).join(',')
@@ -59,9 +58,9 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
         props.fetchChallengeActions(challengeId, true, criteria).then((normalizedResults) => {
           let fetchedMetrics = null
           let fetchedPriorityMetrics = null
-          if (_get(normalizedResults, `entities.challenges.${challengeId}`)) {
-            fetchedMetrics = _get(normalizedResults, 'entities.challenges')[challengeId].actions
-            fetchedPriorityMetrics = _get(normalizedResults, 'entities.challenges')[challengeId].priorityActions
+          if (normalizedResults?.entities?.challenges?.[challengeId]) {
+            fetchedMetrics = (normalizedResults?.entities?.challenges)[challengeId].actions
+            fetchedPriorityMetrics = (normalizedResults?.entities?.challenges)[challengeId].priorityActions
           }
 
           this.setState({loading: false,
@@ -80,10 +79,10 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
         return false
       }
 
-      const challengeId =_get(this.props.challenge, 'id')
+      const challengeId =this.props.challenge?.id
 
       if (challengeId) {
-        if (challengeId !== _get(this.props.challenge, 'id')) {
+        if (challengeId !== (this.props.challenge?.id)) {
           return this.updateMetrics(this.props)
         }
 
@@ -99,13 +98,13 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
           return this.updateMetrics(this.props)
         }
 
-        if (!_isEqual(_get(this.props.searchFilters, 'filters'),
-                      _get(prevProps.searchFilters, 'filters'))) {
+        if (!_isEqual(this.props.searchFilters?.filters,
+                      prevProps.searchFilters?.filters)) {
           return this.updateMetrics(this.props)
         }
 
-        if (!_isEqual(_get(this.props.searchCriteria, 'filters.invertFields'),
-                      _get(prevProps.searchCriteria, 'filters.invertFields'))) {
+        if (!_isEqual(this.props.searchCriteria?.filters?.invertFields,
+                      prevProps.searchCriteria?.filters?.invertFields)) {
           return this.updateMetrics(this.props)
         }
       }
@@ -119,7 +118,7 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
       const taskMetricsByPriority = this.state.fetchedPriorityMetrics || this.props.taskMetricsByPriority
 
       if (!_isEmpty(taskMetrics) && !_isEmpty(this.props.challenges) &&
-          _get(taskMetrics, 'total', 0) > 0) {
+          (taskMetrics?.total ?? 0) > 0) {
         tasksAvailable = _sumBy(this.props.challenges, 'actions.available')
         if (_isFinite(tasksAvailable)) {
           let allActivity = _isArray(this.props.activity) ? this.props.activity :
@@ -165,11 +164,11 @@ const WithChallengeMetrics = function(WrappedComponent, applyFilters = false) {
                                dailyMetrics={dailyMetrics}
                                taskMetricsByPriority={taskMetricsByPriority} />
     }
-  }
+  };
 }
 
 export const includeChallengeInMetrics = function(challenge, manager, tallied, challengeFilters, props) {
-  const tallyMarks = tallied(_get(props.project, 'id'))
+  const tallyMarks = tallied(props.project?.id)
   if (tallyMarks && tallyMarks.length > 0 && tallyMarks.indexOf(challenge.id) === -1) {
     return false
   }

src/components/AdminPane/HOCs/WithChallengeResultParents/WithChallengeResultParents.jsx

@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import _get from 'lodash/get'
 import _filter from 'lodash/filter'
 import _each from 'lodash/each'
 import _uniqBy from 'lodash/uniqBy'
@@ -15,7 +14,7 @@ import _isArray from 'lodash/isArray'
 const WithChallengeResultParents = function(WrappedComponent) {
   return class extends Component {
     projectsAndChallengeParents = () => {
-      if (_get(this.props, 'filteredChallenges.length', 0) === 0) {
+      if ((this.props.filteredChallenges?.length ?? 0) === 0) {
         return this.props.resultProjects
       }
 
@@ -42,7 +41,7 @@ const WithChallengeResultParents = function(WrappedComponent) {
       return <WrappedComponent {...this.props}
                                resultProjects={this.projectsAndChallengeParents()} />
     }
-  }
+  };
 }
 
 export default WrappedComponent => WithChallengeResultParents(WrappedComponent)

src/components/AdminPane/HOCs/WithChallengeReviewMetrics/WithChallengeReviewMetrics.jsx

@@ -1,7 +1,6 @@
 import { Component } from 'react'
 import { connect } from 'react-redux'
 import _omit from 'lodash/omit'
-import _get from 'lodash/get'
 import _keys from 'lodash/keys'
 import _pickBy from 'lodash/pickBy'
 import _merge from 'lodash/merge'
@@ -24,11 +23,11 @@ export const WithChallengeReviewMetrics = function(WrappedComponent) {
     updateMetrics(props) {
       this.setState({updateAvailable: false, loading: true})
 
-      const filters = {challengeId: _get(props.challenge, 'id')}
-       _merge(filters, _get(props.searchFilters, 'filters'))
+      const filters = {challengeId: props.challenge?.id}
+       _merge(filters, props.searchFilters?.filters)
 
       const criteria = {filters}
-      criteria.invertFields = _get(props.searchCriteria, 'filters.invertFields')
+      criteria.invertFields = props.searchCriteria?.filters?.invertFields
 
       if (props.includeTaskStatuses) {
         criteria.filters.status = _keys(_pickBy(props.includeTaskStatuses, v => v)).join(',')
@@ -43,7 +42,7 @@ export const WithChallengeReviewMetrics = function(WrappedComponent) {
         criteria.filters.priorities =_keys(_pickBy(props.includeTaskPriorities, v => v)).join(',')
       }
 
-      props.updateReviewMetrics(_get(props.user, 'id'), criteria).then((entity) => {
+      props.updateReviewMetrics(props.user?.id, criteria).then((entity) => {
         const reviewMetrics = entity
         this.setState({loading: false, reviewMetrics: reviewMetrics})
       })
@@ -54,7 +53,7 @@ export const WithChallengeReviewMetrics = function(WrappedComponent) {
         return // nothing to do
       }
 
-      if (_get(prevProps.challenge, 'id') !== _get(this.props.challenge, 'id')) {
+      if ((prevProps.challenge?.id) !== (this.props.challenge?.id)) {
         this.setState({updateAvailable: true})
         return
       }
@@ -74,7 +73,7 @@ export const WithChallengeReviewMetrics = function(WrappedComponent) {
         return
       }
 
-      if (_get(this.props.searchFilters, 'filters') !== _get(prevProps.searchFilters, 'filters')) {
+      if ((this.props.searchFilters?.filters) !== (prevProps.searchFilters?.filters)) {
         this.setState({updateAvailable: true})
         return
       }
@@ -91,13 +90,13 @@ export const WithChallengeReviewMetrics = function(WrappedComponent) {
         />
       )
     }
-  }
+  };
 }
 
 const mapStateToProps = state => (
-  {reviewMetrics: _get(state, 'currentReviewTasks.metrics.reviewActions'),
-   reviewMetricsByPriority: _get(state, 'currentReviewTasks.metrics.priorityReviewActions'),
-   reviewMetricsByTaskStatus: _get(state, 'currentReviewTasks.metrics.statusReviewActions') }
+  {reviewMetrics: state.currentReviewTasks?.metrics?.reviewActions,
+   reviewMetricsByPriority: state.currentReviewTasks?.metrics?.priorityReviewActions,
+   reviewMetricsByTaskStatus: state.currentReviewTasks?.metrics?.statusReviewActions }
 )
 
 const mapDispatchToProps = (dispatch) => ({

src/components/AdminPane/HOCs/WithChallengeSnapshots/WithChallengeSnapshots.jsx

@@ -1,6 +1,5 @@
 import { Component } from 'react'
 import { injectIntl } from 'react-intl'
-import _get from 'lodash/get'
 import _find from 'lodash/find'
 import _values from 'lodash/values'
 import { fetchChallengeSnapshotList,
@@ -17,7 +16,7 @@ const WithChallengeSnapshots = function(WrappedComponent) {
     }
 
     updateSnapshots(props) {
-      const challengeId =_get(props.challenge, 'id')
+      const challengeId =props.challenge?.id
       if (challengeId) {
         this.setState({loading: true})
 
@@ -31,7 +30,7 @@ const WithChallengeSnapshots = function(WrappedComponent) {
     }
 
     recordSnapshot(props) {
-      const challengeId =_get(props.challenge, 'id')
+      const challengeId =props.challenge?.id
 
       if (challengeId) {
         this.setState({loading: true})
@@ -66,16 +65,16 @@ const WithChallengeSnapshots = function(WrappedComponent) {
     }
 
     componentDidUpdate(prevProps) {
-      const challengeId =_get(this.props.challenge, 'id')
-      if (challengeId && challengeId !== _get(prevProps.challenge, 'id')) {
+      const challengeId =this.props.challenge?.id
+      if (challengeId && challengeId !== (prevProps.challenge?.id)) {
         this.updateSnapshots(this.props)
       }
     }
 
     render() {
       // If we don't have a selectedSnapshot in our state then we want to show
       // the "current" metrics which are passed to us in our props.
-      const reviewActions = _get(this.state.selectedSnapshot, 'reviewActions')
+      const reviewActions = this.state.selectedSnapshot?.reviewActions
       const reviewMetrics = reviewActions ? {
         total: reviewActions.total,
         reviewRequested: reviewActions.requested,
@@ -86,22 +85,24 @@ const WithChallengeSnapshots = function(WrappedComponent) {
         avgReviewTime: reviewActions.avgReviewTime,
       } : this.props.reviewMetrics
 
-      return <WrappedComponent
-               {...this.props}
-               recordSnapshot={() => this.recordSnapshot(this.props)}
-               deleteSnapshot={(snapshotId) => this.deleteSnapshot(this.props, snapshotId)}
-               snapshotList={this.state.snapshotList}
-               setSelectedSnapshot={this.setSelectedSnapshot}
-               currentMetrics={this.props.taskMetrics}
-               taskMetrics =
-                 {_get(this.state.selectedSnapshot, 'actions') || this.props.taskMetrics}
-               taskMetricsByPriority =
-                 {_get(this.state.selectedSnapshot, 'priorityActions') || this.props.taskMetricsByPriority}
-               reviewMetrics={reviewMetrics}
-             />
+      return (
+        <WrappedComponent
+                 {...this.props}
+                 recordSnapshot={() => this.recordSnapshot(this.props)}
+                 deleteSnapshot={(snapshotId) => this.deleteSnapshot(this.props, snapshotId)}
+                 snapshotList={this.state.snapshotList}
+                 setSelectedSnapshot={this.setSelectedSnapshot}
+                 currentMetrics={this.props.taskMetrics}
+                 taskMetrics =
+                   {(this.state.selectedSnapshot?.actions) || this.props.taskMetrics}
+                 taskMetricsByPriority =
+                   {(this.state.selectedSnapshot?.priorityActions) || this.props.taskMetricsByPriority}
+                 reviewMetrics={reviewMetrics}
+               />
+      );
 
     }
-  }
+  };
 }