Fix self mention, resolve handle

src/state/queries/handle.ts

@@ -0,0 +1,34 @@
+import React from 'react'
+import {useMutation} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+
+export function useGetHandle() {
+  const {agent} = useSession()
+
+  return React.useCallback(
+    async (handleOrDid: string) => {
+      if (handleOrDid.startsWith('did:')) {
+        const res = await agent.getProfile({actor: handleOrDid})
+        return res.data.handle
+      }
+      return handleOrDid
+    },
+    [agent],
+  )
+}
+
+export function useGetHandleMutation() {
+  const {agent} = useSession()
+
+  return useMutation({
+    mutationFn: async (handleOrDid: string) => {
+      if (handleOrDid.startsWith('did:')) {
+        // TODO would be nice to do this without all the other fetched data
+        const res = await agent.getProfile({actor: handleOrDid})
+        return res.data.handle
+      }
+      return handleOrDid
+    },
+  })
+}

src/view/shell/desktop/LeftNav.tsx

@@ -45,6 +45,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useComposerControls} from '#/state/shell/composer'
+import {useGetHandleMutation} from '#/state/queries/handle'
 
 const ProfileCard = observer(function ProfileCardImpl() {
   const {currentAccount} = useSession()
@@ -124,6 +125,7 @@ const NavItem = observer(function NavItemImpl({
   label,
 }: NavItemProps) {
   const pal = usePalette('default')
+  const {currentAccount} = useSession()
   const store = useStores()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const [pathName] = React.useMemo(() => router.matchPath(href), [href])
@@ -137,7 +139,7 @@ const NavItem = observer(function NavItemImpl({
     currentRouteInfo.name === 'Profile'
       ? isTab(currentRouteInfo.name, pathName) &&
         (currentRouteInfo.params as CommonNavigatorParams['Profile']).name ===
-          store.me.handle
+          currentAccount?.handle
       : isTab(currentRouteInfo.name, pathName)
   const {onPress} = useLinkProps({to: href})
   const onPressWrapped = React.useCallback(
@@ -194,11 +196,13 @@ const NavItem = observer(function NavItemImpl({
 })
 
 function ComposeBtn() {
-  const store = useStores()
+  const {currentAccount} = useSession()
   const {getState} = useNavigation()
   const {openComposer} = useComposerControls()
   const {_} = useLingui()
   const {isTablet} = useWebMediaQueries()
+  const {mutateAsync: getHandle, isPending: isGetHandlePending} =
+    useGetHandleMutation()
 
   const getProfileHandle = async () => {
     const {routes} = getState()
@@ -210,13 +214,18 @@ function ComposeBtn() {
       ).name
 
       if (handle.startsWith('did:')) {
-        const cached = await store.profiles.cache.get(handle)
-        const profile = cached ? cached.data : undefined
-        // if we can't resolve handle, set to undefined
-        handle = profile?.handle || undefined
+        try {
+          handle = await getHandle(handle)
+        } catch (e) {
+          handle = undefined
+        }
       }
 
-      if (!handle || handle === store.me.handle || handle === 'handle.invalid')
+      if (
+        !handle ||
+        handle === currentAccount?.handle ||
+        handle === 'handle.invalid'
+      )
         return undefined
 
       return handle
@@ -233,6 +242,7 @@ function ComposeBtn() {
   }
   return (
     <TouchableOpacity
+      disabled={isGetHandlePending}
       style={[styles.newPostBtn]}
       onPress={onPressCompose}
       accessibilityRole="button"