From ef73039d94841fe8268c3545ebfac8829c327684 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Sun, 21 Jan 2024 19:55:07 +0700
Subject: [PATCH 1/4] feat: fetch top users profiles from client side if server
 side fails

---
 src/components/creators/TopUsersCard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/creators/TopUsersCard.tsx b/src/components/creators/TopUsersCard.tsx
index d78b8f39b..a890e993a 100644
--- a/src/components/creators/TopUsersCard.tsx
+++ b/src/components/creators/TopUsersCard.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from 'antd'
 import clsx from 'clsx'
-import { ComponentProps, CSSProperties } from 'react'
-import { useSelectProfileSpace, useSelectSpace } from 'src/rtk/app/hooks'
+import { ComponentProps, CSSProperties, useMemo } from 'react'
+import { useFetchProfileSpaces, useSelectProfileSpace, useSelectSpace } from 'src/rtk/app/hooks'
 import { useFetchTopUsers } from 'src/rtk/features/activeStaking/hooks'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { SpaceAvatar } from '../spaces/helpers'
@@ -15,7 +15,15 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
   const { data, loading } = useFetchTopUsers()
   const isMobile = useIsMobileWidthOrDevice()
 
-  const isLoading = loading || !data
+  const args = useMemo(
+    () => ({
+      ids: [...(data?.stakers ?? []), ...(data?.creators ?? [])].map(({ address }) => address),
+    }),
+    [data],
+  )
+  const { loading: loadingSpaces } = useFetchProfileSpaces(args)
+
+  const isLoading = loading || !data || loadingSpaces
 
   // const seeMoreButton = (
   //   <Button

From 198f7f5794df9b52a0151ead1f859ceb64c8f90f Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Sun, 21 Jan 2024 19:55:25 +0700
Subject: [PATCH 2/4] fix: reload the top users fetch

---
 src/rtk/features/activeStaking/topUsersSlice.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rtk/features/activeStaking/topUsersSlice.ts b/src/rtk/features/activeStaking/topUsersSlice.ts
index 1f1cdaefd..58b78b11b 100644
--- a/src/rtk/features/activeStaking/topUsersSlice.ts
+++ b/src/rtk/features/activeStaking/topUsersSlice.ts
@@ -16,7 +16,7 @@ const sliceName = 'topUsers'
 
 export const selectTopUsers = (state: RootState) => state.topUsers
 
-export const fetchTopUsers = createSimpleFetchWrapper<null, TopUsers | null>({
+export const fetchTopUsers = createSimpleFetchWrapper<{}, TopUsers | null>({
   sliceName,
   fetchData: async function () {
     const data = await getTopUsers()
@@ -31,7 +31,7 @@ export async function fetchTopUsersWithSpaces(
   dispatch: AppDispatch,
   api: SubsocialApi,
 ) {
-  await dispatch(fetchTopUsers())
+  await dispatch(fetchTopUsers({ reload: true }))
   const state = selectTopUsers(store.getState())
   if (!state) return
 

From 9e44fc07cd4bb47f917df8779600669cdec48a28 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Sun, 21 Jan 2024 19:59:11 +0700
Subject: [PATCH 3/4] fix: add finally to delete fetching map that throws error

---
 src/rtk/app/wrappers.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/rtk/app/wrappers.ts b/src/rtk/app/wrappers.ts
index b62b17823..9fff7529d 100644
--- a/src/rtk/app/wrappers.ts
+++ b/src/rtk/app/wrappers.ts
@@ -217,14 +217,18 @@ export function createSimpleFetchWrapper<Args, ReturnValue>({
         if (fetchedData && !shouldFetchCondition?.(fetchedData)) return fetchedData
       }
 
-      const promise = fetchData(allArgs, getState(), dispatch)
-      currentlyFetchingMap.set(id, promise)
-      const res = await promise
-
-      await dispatch(saveToCacheAction(res))
-      currentlyFetchingMap.delete(id)
+      try {
+        const promise = fetchData(allArgs, getState(), dispatch)
+        currentlyFetchingMap.set(id, promise)
+        const res = await promise
 
-      return promise
+        await dispatch(saveToCacheAction(res))
+        return promise
+      } catch (err) {
+        throw err
+      } finally {
+        currentlyFetchingMap.delete(id)
+      }
     },
   )
 }

From 5ef8d791783c5bbdfd774ce0b1e01285db687fc6 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Sun, 21 Jan 2024 20:00:55 +0700
Subject: [PATCH 4/4] chore: add logs

---
 src/rtk/features/activeStaking/topUsersSlice.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/rtk/features/activeStaking/topUsersSlice.ts b/src/rtk/features/activeStaking/topUsersSlice.ts
index 58b78b11b..2d7c4bfbb 100644
--- a/src/rtk/features/activeStaking/topUsersSlice.ts
+++ b/src/rtk/features/activeStaking/topUsersSlice.ts
@@ -31,13 +31,16 @@ export async function fetchTopUsersWithSpaces(
   dispatch: AppDispatch,
   api: SubsocialApi,
 ) {
+  console.log('fetching top users...')
   await dispatch(fetchTopUsers({ reload: true }))
   const state = selectTopUsers(store.getState())
+  console.log('dont have state?', !state)
   if (!state) return
 
   const parsedState = state as TopUsers
   const creators = parsedState.creators.map(user => user.address)
   const stakers = parsedState.stakers.map(user => user.address)
+  console.log('fetching profiles', [...creators, ...stakers])
 
   await dispatch(fetchProfileSpaces({ ids: [...creators, ...stakers], api }))
 }