From 8019297975b8df715ad884811ae50b76067f3895 Mon Sep 17 00:00:00 2001
From: Collin Beczak <88843144+CollinBeczak@users.noreply.github.com>
Date: Wed, 28 Feb 2024 19:34:23 -0600
Subject: [PATCH] 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
---
 .../HOCs/WithLeaderboard/WithLeaderboard.js   |  9 ++-
 .../HOCs/WithUserMetrics/WithUserMetrics.js   | 56 ++++++++-----------
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/components/HOCs/WithLeaderboard/WithLeaderboard.js b/src/components/HOCs/WithLeaderboard/WithLeaderboard.js
index f9782c727..a16be21c9 100644
--- 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
index 85971f7d1..c0d889c48 100644
--- 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)
+        }
       }
     }