fix looping issue with leaderboard fetching (#2284)

* add strictor condition and fallbacks to fetch all metrics conditions * add points restriction to other user leaderboard call call * add explanation for hack
maproulette · Feb 29, 2024 · 8019297 · 8019297
1 parent 458f4bc
commit 8019297
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 34 deletions.
diff --git a/src/components/HOCs/WithLeaderboard/WithLeaderboard.js b/src/components/HOCs/WithLeaderboard/WithLeaderboard.js
@@ -100,7 +100,14 @@ const WithLeaderboard = function(WrappedComponent, initialMonthsPast=1, initialO
             this.setState({leaderboard})
 
             const userId = _get(this.props, 'user.id')
-            if (userId && !options.ignoreUser && userType !== USER_TYPE_REVIEWER) {
+            // The reason for using _get is that the structure of the props may vary
+            // depending on where this component is used, and accessing the user's score
+            // directly through `this.props.user.score` may result in runtime errors if
+            // the `user` object or the `score` property is not available in certain contexts.
+            // By using `_get`, we safely handle cases where the expected property may be missing
+            // or nested within a deeper structure. 
+            const userScore = _get(this.props, 'user.score')
+            if (userScore && userId && !options.ignoreUser && userType !== USER_TYPE_REVIEWER) {
               this.props.fetchLeaderboardForUser(userId, 1,
                 ...this.leaderboardParams(numberMonths, countryCode),
                 startDate, endDate).then(userLeaderboard => {

diff --git a/src/components/HOCs/WithUserMetrics/WithUserMetrics.js b/src/components/HOCs/WithUserMetrics/WithUserMetrics.js
@@ -126,44 +126,34 @@ export const WithUserMetrics = function(WrappedComponent, userProp) {
     }
 
     componentDidMount() {
-      if (this.props[userProp]) {
+      if (this.props[userProp]?.score) {
         this.updateAllMetrics(this.props)
       }
     }
 
     componentDidUpdate(prevProps, prevState) {
-      if (prevProps[userProp] !== this.props[userProp]) {
-        this.updateAllMetrics(this.props)
-      }
-
-      else if (prevState.tasksReviewedMonthsPast !== this.state.tasksReviewedMonthsPast &&
-               this.state.tasksReviewedMonthsPast !== CUSTOM_RANGE) {
-        this.updateUserMetrics(this.props)
-      }
-
-      else if (prevState.tasksReviewerMonthsPast !== this.state.tasksReviewerMonthsPast &&
-               this.state.tasksReviewerMonthsPast !== CUSTOM_RANGE) {
-        this.updateUserMetrics(this.props)
-      }
-
-      else if (prevState.tasksCompletedMonthsPast !== this.state.tasksCompletedMonthsPast &&
-               this.state.tasksCompletedMonthsPast !== CUSTOM_RANGE) {
-        this.updateUserMetrics(this.props)
-      }
-
-      else if (this.state.tasksCompletedMonthsPast === CUSTOM_RANGE &&
-               prevState.tasksCompletedDateRange !== this.state.tasksCompletedDateRange) {
-        this.updateUserMetrics(this.props)
-      }
-
-      else if (this.state.tasksReviewedMonthsPast === CUSTOM_RANGE &&
-               prevState.tasksReviewedDateRange !== this.state.tasksReviewedDateRange) {
-        this.updateUserMetrics(this.props)
-      }
-
-      else if (this.state.tasksReviewerMonthsPast === CUSTOM_RANGE &&
-               prevState.tasksReviewerDateRange !== this.state.tasksReviewerDateRange) {
-        this.updateUserMetrics(this.props)
+      const { userProp } = this.props
+
+      if (prevProps[userProp]?.score) {
+        const scoreChanged = prevProps[userProp]?.score !== this.props[userProp]?.score
+        const { tasksCompletedMonthsPast, tasksReviewedMonthsPast, tasksReviewerMonthsPast,
+          tasksCompletedDateRange, tasksReviewedDateRange, tasksReviewerDateRange } = this.state
+
+        if (scoreChanged) {
+          this.updateAllMetrics(this.props)
+        } else if (tasksReviewedMonthsPast !== CUSTOM_RANGE && (
+            prevState.tasksCompletedMonthsPast !== tasksCompletedMonthsPast ||
+            prevState.tasksReviewedMonthsPast !== tasksReviewedMonthsPast ||
+            prevState.tasksReviewerMonthsPast !== tasksReviewerMonthsPast
+          )) {
+          this.updateUserMetrics(this.props)
+        } else if (tasksCompletedMonthsPast === CUSTOM_RANGE && (
+            prevState.tasksCompletedDateRange !== tasksCompletedDateRange ||
+            prevState.tasksReviewedDateRange !== tasksReviewedDateRange ||
+            prevState.tasksReviewerDateRange !== tasksReviewerDateRange
+          )) {
+          this.updateUserMetrics(this.props)
+        }
       }
     }