From 2cf3f4c9b7c7fad6663ee9de801f08e5a2526f66 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 14 Nov 2023 13:14:46 -0600 Subject: [PATCH 1/4] Fix self mention, resolve handle --- src/state/queries/handle.ts | 34 ++++++++++++++++++++++++++++++ src/view/shell/desktop/LeftNav.tsx | 24 +++++++++++++++------ 2 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 src/state/queries/handle.ts diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts new file mode 100644 index 0000000000..f4d7382df9 --- /dev/null +++ b/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 + }, + }) +} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 90cf144d26..36739ea87d 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/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 ( Date: Tue, 14 Nov 2023 13:51:33 -0600 Subject: [PATCH 2/4] Use queryClient --- src/state/queries/handle.ts | 31 ++++++++++++------------------ src/view/shell/desktop/LeftNav.tsx | 13 ++++++++----- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts index f4d7382df9..a68a946006 100644 --- a/src/state/queries/handle.ts +++ b/src/state/queries/handle.ts @@ -1,34 +1,27 @@ import React from 'react' -import {useMutation} from '@tanstack/react-query' +import {useQueryClient} from '@tanstack/react-query' import {useSession} from '#/state/session' -export function useGetHandle() { +const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid] + +export function useFetchHandle() { const {agent} = useSession() + const queryClient = useQueryClient() return React.useCallback( async (handleOrDid: string) => { if (handleOrDid.startsWith('did:')) { - const res = await agent.getProfile({actor: handleOrDid}) + const res = await queryClient.fetchQuery({ + // cache in memory forever, page reload clears + staleTime: Infinity, + queryKey: fetchHandleQueryKey(handleOrDid), + queryFn: () => agent.getProfile({actor: handleOrDid}), + }) return res.data.handle } return handleOrDid }, - [agent], + [agent, queryClient], ) } - -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 - }, - }) -} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 36739ea87d..cb9bc5ed46 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -45,7 +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' +import {useFetchHandle} from '#/state/queries/handle' const ProfileCard = observer(function ProfileCardImpl() { const {currentAccount} = useSession() @@ -201,8 +201,8 @@ function ComposeBtn() { const {openComposer} = useComposerControls() const {_} = useLingui() const {isTablet} = useWebMediaQueries() - const {mutateAsync: getHandle, isPending: isGetHandlePending} = - useGetHandleMutation() + const [isFetchingHandle, setIsFetchingHandle] = React.useState(false) + const fetchHandle = useFetchHandle() const getProfileHandle = async () => { const {routes} = getState() @@ -215,9 +215,12 @@ function ComposeBtn() { if (handle.startsWith('did:')) { try { - handle = await getHandle(handle) + setIsFetchingHandle(true) + handle = await fetchHandle(handle) } catch (e) { handle = undefined + } finally { + setIsFetchingHandle(false) } } @@ -242,7 +245,7 @@ function ComposeBtn() { } return ( Date: Tue, 14 Nov 2023 13:59:04 -0600 Subject: [PATCH 3/4] Fix type --- src/view/shell/desktop/LeftNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index cb9bc5ed46..8bc1d49a0e 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -385,7 +385,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() { label="Moderation" /> Date: Tue, 14 Nov 2023 14:16:24 -0600 Subject: [PATCH 4/4] Remove staleTime --- src/state/queries/handle.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts index a68a946006..97e9b21073 100644 --- a/src/state/queries/handle.ts +++ b/src/state/queries/handle.ts @@ -13,8 +13,6 @@ export function useFetchHandle() { async (handleOrDid: string) => { if (handleOrDid.startsWith('did:')) { const res = await queryClient.fetchQuery({ - // cache in memory forever, page reload clears - staleTime: Infinity, queryKey: fetchHandleQueryKey(handleOrDid), queryFn: () => agent.getProfile({actor: handleOrDid}), })