Update Muted and Blocked accounts screens (react-query refactor) (#1892)

* Add my-blocked-accounts and my-muted-accounts queries

* Update ProfileCard to use the profile shadow cache and useModerationOpts

* Update blocked accounts and muted accounts screens

1 files changed, 66 insertions, 36 deletions

diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx
index 0dc3b706b..702a8d44e 100644
--- a/src/view/screens/ModerationBlockedAccounts.tsx
+++ b/src/view/screens/ModerationBlockedAccounts.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import React from 'react'
 import {
   ActivityIndicator,
   FlatList,
@@ -8,56 +8,78 @@ import {
 } from 'react-native'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {Text} from '../com/util/text/Text'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
-import {observer} from 'mobx-react-lite'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from 'lib/routes/types'
-import {BlockedAccountsModel} from 'state/models/lists/blocked-accounts'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
+import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {logger} from '#/logger'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts'
+import {cleanError} from '#/lib/strings/errors'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'ModerationBlockedAccounts'
 >
 export const ModerationBlockedAccounts = withAuthRequired(
-  observer(function ModerationBlockedAccountsImpl({}: Props) {
+  function ModerationBlockedAccountsImpl({}: Props) {
     const pal = usePalette('default')
-    const store = useStores()
     const setMinimalShellMode = useSetMinimalShellMode()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
-    const blockedAccounts = useMemo(
-      () => new BlockedAccountsModel(store),
-      [store],
-    )
+    const [isPTRing, setIsPTRing] = React.useState(false)
+    const {
+      data,
+      dataUpdatedAt,
+      isFetching,
+      isError,
+      error,
+      refetch,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+    } = useMyBlockedAccountsQuery()
+    const isEmpty = !isFetching && !data?.pages[0]?.blocks.length
+    const profiles = React.useMemo(() => {
+      if (data?.pages) {
+        return data.pages.flatMap(page => page.blocks)
+      }
+      return []
+    }, [data])
 
     useFocusEffect(
       React.useCallback(() => {
         screen('BlockedAccounts')
         setMinimalShellMode(false)
-        blockedAccounts.refresh()
-      }, [screen, setMinimalShellMode, blockedAccounts]),
+      }, [screen, setMinimalShellMode]),
     )
 
-    const onRefresh = React.useCallback(() => {
-      blockedAccounts.refresh()
-    }, [blockedAccounts])
-    const onEndReached = React.useCallback(() => {
-      blockedAccounts
-        .loadMore()
-        .catch(err =>
-          logger.error('Failed to load more blocked accounts', {error: err}),
-        )
-    }, [blockedAccounts])
+    const onRefresh = React.useCallback(async () => {
+      setIsPTRing(true)
+      try {
+        await refetch()
+      } catch (err) {
+        logger.error('Failed to refresh my muted accounts', {error: err})
+      }
+      setIsPTRing(false)
+    }, [refetch, setIsPTRing])
+
+    const onEndReached = React.useCallback(async () => {
+      if (isFetching || !hasNextPage || isError) return
+
+      try {
+        await fetchNextPage()
+      } catch (err) {
+        logger.error('Failed to load more of my muted accounts', {error: err})
+      }
+    }, [isFetching, hasNextPage, isError, fetchNextPage])
 
     const renderItem = ({
       item,
@@ -70,6 +92,7 @@ export const ModerationBlockedAccounts = withAuthRequired(
         testID={`blockedAccount-${index}`}
         key={item.did}
         profile={item}
+        dataUpdatedAt={dataUpdatedAt}
       />
     )
     return (
@@ -93,24 +116,32 @@ export const ModerationBlockedAccounts = withAuthRequired(
           otherwise interact with you. You will not see their content and they
           will be prevented from seeing yours.
         </Text>
-        {!blockedAccounts.hasContent ? (
+        {isEmpty ? (
           <View style={[pal.border, !isTabletOrDesktop && styles.flex1]}>
-            <View style={[styles.empty, pal.viewLight]}>
-              <Text type="lg" style={[pal.text, styles.emptyText]}>
-                You have not blocked any accounts yet. To block an account, go
-                to their profile and selected "Block account" from the menu on
-                their account.
-              </Text>
-            </View>
+            {isError ? (
+              <ErrorScreen
+                title="Oops!"
+                message={cleanError(error)}
+                onPressTryAgain={refetch}
+              />
+            ) : (
+              <View style={[styles.empty, pal.viewLight]}>
+                <Text type="lg" style={[pal.text, styles.emptyText]}>
+                  You have not blocked any accounts yet. To block an account, go
+                  to their profile and selected "Block account" from the menu on
+                  their account.
+                </Text>
+              </View>
+            )}
           </View>
         ) : (
           <FlatList
             style={[!isTabletOrDesktop && styles.flex1]}
-            data={blockedAccounts.blocks}
+            data={profiles}
             keyExtractor={(item: ActorDefs.ProfileView) => item.did}
             refreshControl={
               <RefreshControl
-                refreshing={blockedAccounts.isRefreshing}
+                refreshing={isPTRing}
                 onRefresh={onRefresh}
                 tintColor={pal.colors.text}
                 titleColor={pal.colors.text}
@@ -120,20 +151,19 @@ export const ModerationBlockedAccounts = withAuthRequired(
             renderItem={renderItem}
             initialNumToRender={15}
             // FIXME(dan)
-            // eslint-disable-next-line react/no-unstable-nested-components
+
             ListFooterComponent={() => (
               <View style={styles.footer}>
-                {blockedAccounts.isLoading && <ActivityIndicator />}
+                {(isFetching || isFetchingNextPage) && <ActivityIndicator />}
               </View>
             )}
-            extraData={blockedAccounts.isLoading}
             // @ts-ignore our .web version only -prf
             desktopFixedHeight
           />
         )}
       </CenteredView>
     )
-  }),
+  },
 )
 
 const styles = StyleSheet.create({