1 files changed, 66 insertions, 13 deletions
diff --git a/src/view/com/modals/ProfilePreview.tsx b/src/view/com/modals/ProfilePreview.tsx
index dad02aa5e..edfbf6a82 100644
--- a/src/view/com/modals/ProfilePreview.tsx
+++ b/src/view/com/modals/ProfilePreview.tsx
@@ -1,27 +1,81 @@
 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 {CenteredView} from '../util/Views'
+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 pal = usePalette('default')
+  const moderationOpts = useModerationOpts()
+  const {
+    data: profile,
+    error: profileError,
+    refetch: refetchProfile,
+    isFetching: isFetchingProfile,
+  } = useProfileQuery({
+    did: did,
+  })
+
+  if (isFetchingProfile || !moderationOpts) {
+    return (
+      <CenteredView style={[pal.view, s.flex1]}>
+        <ProfileHeader
+          profile={null}
+          moderation={null}
+          isProfilePreview={true}
+        />
+      </CenteredView>
+    )
+  }
+  if (profileError) {
+    return (
+      <ErrorScreen
+        title="Oops!"
+        message={cleanError(profileError)}
+        onPressTryAgain={refetchProfile}
+      />
+    )
+  }
+  if (profile && moderationOpts) {
+    return <ComponentLoaded profile={profile} 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,
+  moderationOpts,
 }: {
-  did: string
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
 }) {
-  const store = useStores()
   const pal = usePalette('default')
-  const [model] = useState(new ProfileModel(store, {actor: did}))
+  const profile = useProfileShadow(profileUnshadowed)
   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 +84,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 +112,7 @@ export const Component = observer(function ProfilePreviewImpl({
       </View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   headerWrapper: {