From 2f31d364e6c3b57e2ccb9ecd2dee3cd4c3c332e7 Mon Sep 17 00:00:00 2001
From: Joseph Lee <joeylee0925@gmail.com>
Date: Mon, 12 Apr 2021 09:49:12 -0400
Subject: [PATCH] Merge pull request #81 from
 AudiusProject/jowlee-fix-user-sort

Add user sortby
---
 .../TopAddressesTable/TopAddressesTable.tsx   |  4 +--
 .../TopOperatorsTable/TopOperatorsTable.tsx   |  8 +++--
 .../src/store/cache/user/hooks.ts             | 29 ++++++++++++++-----
 packages/protocol-dashboard/src/types.ts      |  3 +-
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx b/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx
index 54396d78898..4c4bb072f4f 100644
--- a/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx
+++ b/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx
@@ -9,7 +9,7 @@ import Table from 'components/Table'
 import { formatWeight } from 'utils/format'
 
 import { useUsers } from 'store/cache/user/hooks'
-import { Address, Status } from 'types'
+import { Address, SortUser, Status } from 'types'
 import { usePushRoute } from 'utils/effects'
 import { useIsMobile } from 'utils/hooks'
 import getActiveStake from 'utils/activeStake'
@@ -58,7 +58,7 @@ const TopAddressesTable: React.FC<TopAddressesTableProps> = ({
     [pushRoute]
   )
 
-  const { status, users } = useUsers()
+  const { status, users } = useUsers({ sortBy: SortUser.activeStake })
   let columns = [{ title: 'Rank', className: styles.rankColumn }]
   if (!isMobile) {
     columns = columns.concat([
diff --git a/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx b/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx
index e266a095349..03ae28beae1 100644
--- a/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx
+++ b/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx
@@ -6,7 +6,7 @@ import styles from './TopOperatorsTable.module.css'
 import Table from 'components/Table'
 
 import { useUsers } from 'store/cache/user/hooks'
-import { Address, Operator, Status } from 'types'
+import { Address, Operator, SortUser, Status } from 'types'
 import { usePushRoute } from 'utils/effects'
 import { useIsMobile } from 'utils/hooks'
 import getActiveStake, { getTotalActiveDelegatedStake } from 'utils/activeStake'
@@ -56,7 +56,11 @@ const TopOperatorsTable: React.FC<TopOperatorsTableProps> = ({
     [pushRoute]
   )
 
-  const { status, users } = useUsers({ limit, filter: 'isOperator' })
+  const { status, users } = useUsers({
+    limit,
+    filter: 'isOperator',
+    sortBy: SortUser.stakePlusDelegates
+  })
 
   let columns = [{ title: 'Rank', className: styles.rankColumn }]
   if (!isMobile) {
diff --git a/packages/protocol-dashboard/src/store/cache/user/hooks.ts b/packages/protocol-dashboard/src/store/cache/user/hooks.ts
index 063d6067ef0..e0f10d92312 100644
--- a/packages/protocol-dashboard/src/store/cache/user/hooks.ts
+++ b/packages/protocol-dashboard/src/store/cache/user/hooks.ts
@@ -28,7 +28,7 @@ import {
 } from '../contentNode/hooks'
 import { useAccountUser } from 'store/account/hooks'
 import { GetPendingDecreaseStakeRequestResponse } from 'services/Audius/service-provider/types'
-import getActiveStake from 'utils/activeStake'
+import getActiveStake, { getTotalActiveDelegatedStake } from 'utils/activeStake'
 import {
   useUser as useGraphUser,
   useUsers as useGraphUsers
@@ -46,6 +46,21 @@ export const getStatus = (state: AppState) => state.cache.user.status
 export const getUser = (wallet: Address) => (state: AppState) =>
   state.cache.user.accounts[wallet]
 
+const sortActiveStakeFunc = (u1: User | Operator, u2: User | Operator) => {
+  let u1Total = getActiveStake(u1)
+  let u2Total = getActiveStake(u2)
+  return u2Total.cmp(u1Total)
+}
+
+const sortStakePlusDelegatedFunc = (
+  u1: User | Operator,
+  u2: User | Operator
+) => {
+  const u1Total = getActiveStake(u1).add(getTotalActiveDelegatedStake(u1))
+  const u2Total = getActiveStake(u2).add(getTotalActiveDelegatedStake(u2))
+  return u2Total.cmp(u1Total)
+}
+
 export const getUsers = ({ sortBy, limit, filter }: UseUsersProp) => (
   state: AppState
 ) => {
@@ -57,14 +72,12 @@ export const getUsers = ({ sortBy, limit, filter }: UseUsersProp) => (
     return true
   }
 
-  const sortFunc = (u1: User | Operator, u2: User | Operator) => {
-    let u1Total = getActiveStake(u1)
-    let u2Total = getActiveStake(u2)
-    return u2Total.cmp(u1Total)
-  }
-
   let serviceProviders: (User | Operator)[] = accounts.filter(filterFunc) as any
-  serviceProviders = serviceProviders.sort(sortFunc)
+  if (sortBy === SortUser.activeStake) {
+    serviceProviders = serviceProviders.sort(sortActiveStakeFunc)
+  } else if (sortBy === SortUser.stakePlusDelegates) {
+    serviceProviders = serviceProviders.sort(sortStakePlusDelegatedFunc)
+  }
   if (limit) serviceProviders = serviceProviders.slice(0, limit)
 
   return serviceProviders
diff --git a/packages/protocol-dashboard/src/types.ts b/packages/protocol-dashboard/src/types.ts
index 0899ead4fec..3cdc02f36ba 100644
--- a/packages/protocol-dashboard/src/types.ts
+++ b/packages/protocol-dashboard/src/types.ts
@@ -174,7 +174,8 @@ export enum SortNode {
 }
 
 export enum SortUser {
-  Token = 'Token'
+  activeStake = 'active-stake',
+  stakePlusDelegates = 'stake-plus-delegated'
 }
 
 export enum PendingTransactionName {