refactor: infinite query in CyberConnect (#11290)

* refactor: infinite query in CyberConnect

* refactor: remove comments

---------

Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>

packages/plugins/CyberConnect/src/SiteAdaptor/FollowersPage.tsx

@@ -1,18 +1,12 @@
-import { LoadingBase, MaskLightTheme, makeStyles } from '@masknet/theme'
-import { Box } from '@mui/material'
+import { ThemeProvider } from '@emotion/react'
 import { ElementAnchor, LoadingStatus, ReloadStatus } from '@masknet/shared'
-import { useCyberConnectTrans } from '../locales/index.js'
-import { useFollowers } from '../hooks/useFollowers.js'
-import type { ProfileTab } from '../constants.js'
+import { LoadingBase, MaskLightTheme } from '@masknet/theme'
+import { Box } from '@mui/material'
 import type { IFollowIdentity } from '../Worker/apis/index.js'
+import type { ProfileTab } from '../constants.js'
+import { useFollowers } from '../hooks/useFollowers.js'
+import { useCyberConnectTrans } from '../locales/index.js'
 import { FollowRow } from './FollowTab.js'
-import { useEffect } from 'react'
-import { useIterator } from '@masknet/web3-hooks-base'
-import { ThemeProvider } from '@emotion/react'
-
-const useStyles = makeStyles()((theme) => ({
-    root: {},
-}))
 
 interface FollowersPageProps {
     address?: string
@@ -22,31 +16,26 @@ interface FollowersPageProps {
 
 export function FollowersPage(props: FollowersPageProps) {
     const t = useCyberConnectTrans()
-    const { classes } = useStyles()
-    const iterator = useFollowers(props.tab, props.address)
-    const { value, next, done, error, retry, loading } = useIterator<IFollowIdentity>(iterator)
-
-    useEffect(() => {
-        if (value?.length || loading) return
-        if (next) next()
-    }, [value?.length, loading, next])
+    const { data, fetchNextPage, hasNextPage, isPending, refetch, error } = useFollowers(props.tab, props.address)
+    const followers = data?.pages.flatMap((x) => x?.data || []) || []
 
     if (error) {
         return (
             <ThemeProvider theme={MaskLightTheme}>
-                <ReloadStatus height={400} p={2} message={t.failed()} onRetry={retry} />
+                <ReloadStatus height={400} p={2} message={t.failed()} onRetry={refetch} />
             </ThemeProvider>
         )
     }
 
-    if (!value?.length && loading) return <LoadingStatus height={400} omitText />
+    if (!followers.length && isPending) return <LoadingStatus height={400} omitText />
+
     return (
-        <Box className={classes.root}>
-            {value?.length ?
-                value.map((x: IFollowIdentity) => <FollowRow key={x.ens || x.address} identity={x} />)
-            :   props.hint}
-            <ElementAnchor callback={() => next?.()}>
-                {!done && value?.length ?
+        <Box>
+            {followers.map((x: IFollowIdentity) => (
+                <FollowRow key={x.ens || x.address} identity={x} />
+            ))}
+            <ElementAnchor callback={() => fetchNextPage()}>
+                {hasNextPage && isPending ?
                     <LoadingBase />
                 :   null}
             </ElementAnchor>

packages/plugins/CyberConnect/src/hooks/useFollowers.ts

@@ -1,13 +1,15 @@
-import { useMemo } from 'react'
-import { pageableToIterator } from '@masknet/shared-base'
-import { PluginCyberConnectRPC } from '../messages.js'
+import { useInfiniteQuery } from '@tanstack/react-query'
 import type { ProfileTab } from '../constants.js'
+import { PluginCyberConnectRPC } from '../messages.js'
 
 export function useFollowers(tab: ProfileTab, address?: string, size = 50) {
-    return useMemo(() => {
-        if (!address) return
-        return pageableToIterator(async (indicator) => {
-            return PluginCyberConnectRPC.fetchFollowers(tab, address, size, indicator)
-        })
-    }, [address, tab, size])
+    return useInfiniteQuery({
+        queryKey: ['cyber-connect', 'followers', tab, address, size],
+        initialPageParam: undefined as any,
+        queryFn: async ({ pageParam }) => {
+            if (!address) return
+            return PluginCyberConnectRPC.fetchFollowers(tab, address, size, pageParam)
+        },
+        getNextPageParam: (lastPage) => lastPage?.nextIndicator,
+    })
 }

packages/web3-hooks/base/src/index.ts

@@ -72,7 +72,6 @@ export * from './useSocialAccountsFrom.js'
 export * from './useSocialAddresses.js'
 export * from './useSocialAddressesAll.js'
 export * from './useSocialAccountListByAddressOrDomain.js'
-export * from './useTransactions.js'
 export * from './useTransferFungibleToken.js'
 export * from './useTrustedFungibleTokens.js'
 export * from './useWallet.js'