Add Code to make sure Descending

gladly-team · Jul 19, 2023 · 2b470be · 2b470be
1 parent e594579
commit 2b470be
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 11 deletions.
diff --git a/src/components/groupImpactComponents/GroupImpactLeaderboard.js b/src/components/groupImpactComponents/GroupImpactLeaderboard.js
@@ -69,17 +69,34 @@ const useStyles = makeStyles((theme) => ({
 
 const Leaderboard = ({ leaderboardEntries, userId, onClose }) => {
   const classes = useStyles()
-  const displayLeaderboardEntries = leaderboardEntries.map((entry) => (
-    <div key={`${entry.user.username}_${entry.position}`}>
-      <GroupImpactLeaderboardRow
-        selected={userId === entry.user.id}
-        position={entry.position}
-        username={entry.user.username}
-        userGroupImpactMetric={entry.userGroupImpactMetric}
-      />
-      <Divider />
-    </div>
-  ))
+  const displayLeaderboardEntries = []
+  let maxDollarContributionSeen = 0
+  for (let i = leaderboardEntries.length - 1; i >= 0; i -= 1) {
+    const entry = leaderboardEntries[i]
+    let userGroupImpactMetric = null
+    if (
+      entry.userGroupImpactMetric.dollarContribution < maxDollarContributionSeen
+    ) {
+      userGroupImpactMetric = {
+        ...entry.userGroupImpactMetric,
+        dollarContribution: maxDollarContributionSeen,
+      }
+    } else {
+      userGroupImpactMetric = entry.userGroupImpactMetric
+      maxDollarContributionSeen = entry.userGroupImpactMetric.dollarContribution
+    }
+    displayLeaderboardEntries.unshift(
+      <div key={`${entry.user.username}_${entry.position}`}>
+        <GroupImpactLeaderboardRow
+          selected={userId === entry.user.id}
+          position={entry.position}
+          username={entry.user.username}
+          userGroupImpactMetric={userGroupImpactMetric}
+        />
+        <Divider />
+      </div>
+    )
+  }
 
   const entriesWithEllipses = []
   for (let i = 0; i < displayLeaderboardEntries.length; i += 1) {

diff --git a/src/components/groupImpactComponents/__tests__/GroupImpactLeaderboard.test.js b/src/components/groupImpactComponents/__tests__/GroupImpactLeaderboard.test.js
@@ -97,6 +97,99 @@ describe('GroupImpactLeaderboard component', () => {
     }
   })
 
+  it('displays a GroupImpactLeaderboardRow for each leaderboard entry with descending dollarContributionAmounts', () => {
+    const GroupImpactLeaderboard =
+      require('src/components/groupImpactComponents/GroupImpactLeaderboard').default
+    const mockProps = {
+      userId: 'cdef',
+      leaderboardEntries: [
+        {
+          position: 1,
+          user: {
+            id: 'abcd',
+            username: 'cat_lover',
+          },
+          userGroupImpactMetric: {
+            dollarContribution: 10000,
+            tabDollarContribution: 1000,
+            searchDollarContribution: 4000,
+            shopDollarContribution: 5000,
+          },
+        },
+        {
+          position: 2,
+          user: {
+            id: 'bcde',
+            username: 'tree_lover',
+          },
+          userGroupImpactMetric: {
+            dollarContribution: 12000,
+            tabDollarContribution: 1000,
+            searchDollarContribution: 4000,
+            shopDollarContribution: 4000,
+          },
+        },
+        {
+          position: 150,
+          user: {
+            id: 'cdef',
+            username: 'its_me',
+          },
+          userGroupImpactMetric: {
+            dollarContribution: 6120,
+            tabDollarContribution: 120,
+            searchDollarContribution: 3000,
+            shopDollarContribution: 3000,
+          },
+        },
+        {
+          position: 151,
+          user: {
+            id: 'defg',
+            username: 'its_not_me',
+          },
+          userGroupImpactMetric: {
+            dollarContribution: 6500,
+            tabDollarContribution: 0,
+            searchDollarContribution: 3000,
+            shopDollarContribution: 3000,
+          },
+        },
+        {
+          position: 152,
+          user: {
+            id: 'defg',
+            username: 'its_not_me2',
+          },
+          userGroupImpactMetric: {
+            dollarContribution: 7000,
+            tabDollarContribution: 0,
+            searchDollarContribution: 3000,
+            shopDollarContribution: 3000,
+          },
+        },
+      ],
+      onClose: jest.fn(),
+    }
+    const expectedDollarContributions = [12000, 12000, 7000, 7000, 7000]
+    const wrapper = mount(<GroupImpactLeaderboard {...mockProps} />)
+    const rows = wrapper.find(GroupImpactLeaderboardRow)
+
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows.at(i)
+      const leaderboardEntry = mockProps.leaderboardEntries[i]
+      expect(row.prop('position')).toEqual(leaderboardEntry.position)
+      expect(row.prop('username')).toEqual(leaderboardEntry.user.username)
+      expect(row.prop('userGroupImpactMetric')).toEqual({
+        ...leaderboardEntry.userGroupImpactMetric,
+        dollarContribution: expectedDollarContributions[i],
+      })
+      expect(row.prop('selected')).toEqual(
+        mockProps.userId === leaderboardEntry.user.id
+      )
+    }
+  })
+
   it('displays an ellipses if there is a gap in positions', () => {
     const GroupImpactLeaderboard =
       require('src/components/groupImpactComponents/GroupImpactLeaderboard').default