Update profile preview to use react-query (#1890)

src/view/com/modals/ProfilePreview.tsx

@@ -1,27 +1,84 @@
 import React, {useState, useEffect} from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
+import {AppBskyActorDefs, ModerationOpts, moderateProfile} from '@atproto/api'
 import {ThemedText} from '../util/text/ThemedText'
-import {useStores} from 'state/index'
-import {ProfileModel} from 'state/models/content/profile'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {ProfileHeader} from '../profile/ProfileHeader'
 import {InfoCircleIcon} from 'lib/icons'
 import {useNavigationState} from '@react-navigation/native'
 import {s} from 'lib/styles'
+import {useModerationOpts} from '#/state/queries/preferences'
+import {useProfileQuery} from '#/state/queries/profile'
+import {ErrorScreen} from '../util/error/ErrorScreen'
+import {cleanError} from '#/lib/strings/errors'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
 
 export const snapPoints = [520, '100%']
 
-export const Component = observer(function ProfilePreviewImpl({
-  did,
+export function Component({did}: {did: string}) {
+  const moderationOpts = useModerationOpts()
+  const {
+    data: profile,
+    dataUpdatedAt,
+    error: profileError,
+    refetch: refetchProfile,
+    isFetching: isFetchingProfile,
+  } = useProfileQuery({
+    did: did,
+  })
+
+  if (isFetchingProfile || !moderationOpts) {
+    return (
+      <View style={s.p20}>
+        <ActivityIndicator size="large" />
+      </View>
+    )
+  }
+  if (profileError) {
+    return (
+      <ErrorScreen
+        title="Oops!"
+        message={cleanError(profileError)}
+        onPressTryAgain={refetchProfile}
+      />
+    )
+  }
+  if (profile && moderationOpts) {
+    return (
+      <ComponentLoaded
+        profile={profile}
+        dataUpdatedAt={dataUpdatedAt}
+        moderationOpts={moderationOpts}
+      />
+    )
+  }
+  // should never happen
+  return (
+    <ErrorScreen
+      title="Oops!"
+      message="Something went wrong and we're not sure what."
+      onPressTryAgain={refetchProfile}
+    />
+  )
+}
+
+function ComponentLoaded({
+  profile: profileUnshadowed,
+  dataUpdatedAt,
+  moderationOpts,
 }: {
-  did: string
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  dataUpdatedAt: number
+  moderationOpts: ModerationOpts
 }) {
-  const store = useStores()
   const pal = usePalette('default')
-  const [model] = useState(new ProfileModel(store, {actor: did}))
+  const profile = useProfileShadow(profileUnshadowed, dataUpdatedAt)
   const {screen} = useAnalytics()
+  const moderation = React.useMemo(
+    () => moderateProfile(profile, moderationOpts),
+    [profile, moderationOpts],
+  )
 
   // track the navigator state to detect if a page-load occurred
   const navState = useNavigationState(state => state)
@@ -30,16 +87,15 @@ export const Component = observer(function ProfilePreviewImpl({
 
   useEffect(() => {
     screen('Profile:Preview')
-    model.setup()
-  }, [model, screen])
+  }, [screen])
 
   return (
     <View testID="profilePreview" style={[pal.view, s.flex1]}>
       <View style={[styles.headerWrapper]}>
         <ProfileHeader
-          view={model}
+          profile={profile}
+          moderation={moderation}
           hideBackButton
-          onRefreshAll={() => {}}
           isProfilePreview
         />
       </View>
@@ -59,7 +115,7 @@ export const Component = observer(function ProfilePreviewImpl({
       </View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   headerWrapper: {

src/view/screens/Profile.tsx

@@ -66,7 +66,7 @@ export const ProfileScreen = withAuthRequired(function ProfileScreenImpl({
     }
   }, [resolveError, refetchDid, refetchProfile])
 
-  if (isFetchingDid || isFetchingProfile) {
+  if (isFetchingDid || isFetchingProfile || !moderationOpts) {
     return (
       <CenteredView>
         <View style={s.p20}>