From 332fe4af8041eb29a3f9faccb780e46638d1c90a Mon Sep 17 00:00:00 2001 From: JD Francis Date: Mon, 5 May 2025 17:29:08 -0500 Subject: [PATCH 1/3] Fix account switcher toggle --- packages/common/src/api/account.ts | 44 ++++++++----------- .../tan-query/users/account/useWalletUser.ts | 21 ++++----- .../common/src/hooks/useAccountSwitcher.ts | 8 ++-- .../AccountSwitcher/AccountSwitcher.tsx | 13 +----- 4 files changed, 35 insertions(+), 51 deletions(-) diff --git a/packages/common/src/api/account.ts b/packages/common/src/api/account.ts index 1b6b73bffee..1b08d5b4ed7 100644 --- a/packages/common/src/api/account.ts +++ b/packages/common/src/api/account.ts @@ -1,16 +1,13 @@ -import { useMemo } from 'react' - import { Id } from '@audius/sdk' import dayjs from 'dayjs' +import { useSelector } from 'react-redux' import { managedUserListFromSDK, userManagerListFromSDK } from '~/adapters/user' import { createApi } from '~/audius-query' import { ID, User, UserMetadata } from '~/models' +import { getWalletAddresses } from '~/store/account/selectors' -import { - CurrentUserWalletType, - useCurrentAccount -} from './tan-query/users/account/useCurrentAccount' +import { useWalletAccount } from './tan-query/users/account/useWalletUser' type ResetPasswordArgs = { email: string @@ -228,30 +225,25 @@ const accountApi = createApi({ } }) -// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file -export const useGetCurrentUser = (_args?: any, options?: any) => { - return { - data: useCurrentAccount(CurrentUserWalletType.currentUser, options)?.data - ?.user - } +export const useGetCurrentUser = (_args?: any) => { + const { currentUser } = useSelector(getWalletAddresses) + + const { data: currentAccount } = useWalletAccount(currentUser) + + return { data: currentAccount?.user } } -// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file -export const useGetCurrentWeb3User = (_args?: any, options?: any) => { - return { - data: useCurrentAccount(CurrentUserWalletType.web3User, options)?.data?.user - } +export const useGetCurrentWeb3User = (_args?: any) => { + const { web3User } = useSelector(getWalletAddresses) + + const { data: currentAccount } = useWalletAccount(web3User) + + return { data: currentAccount?.user } } -// TODO: this is temporary jank to scope down changes - this will go soon when removing this whole file -export const useGetCurrentUserId = (_args?: any, options?: any) => { - const result = useGetCurrentUser(_args, options) - return useMemo(() => { - return { - ...result, - data: result.data ? result.data.user_id : null - } - }, [result]) +export const useGetCurrentUserId = (_args?: any) => { + const { data: currentUser } = useGetCurrentUser(_args) ?? {} + return { data: currentUser?.user_id as number } } export const { diff --git a/packages/common/src/api/tan-query/users/account/useWalletUser.ts b/packages/common/src/api/tan-query/users/account/useWalletUser.ts index e3e6aff889b..dc96b52dc59 100644 --- a/packages/common/src/api/tan-query/users/account/useWalletUser.ts +++ b/packages/common/src/api/tan-query/users/account/useWalletUser.ts @@ -16,9 +16,6 @@ export const getWalletAccountQueryKey = (wallet: string | null | undefined) => wallet ] as unknown as QueryKey -export const getWalletUserQueryKey = (wallet: string | null | undefined) => - [QUERY_KEYS.walletUser, wallet] as unknown as QueryKey - // This queryFn is separate in order to be used in sagas export const getWalletAccountQueryFn = async ( wallet: string, @@ -40,20 +37,24 @@ export const getWalletAccountQueryFn = async ( /** * Hook to get the currently logged in user's data */ -export const useWalletUser = ( - options?: SelectableQueryOptions +export const useWalletAccount = < + TResult = AccountUserMetadata | null | undefined +>( + wallet: string | null | undefined, + options?: SelectableQueryOptions< + AccountUserMetadata | null | undefined, + TResult + > ) => { const { audiusSdk } = useAudiusQueryContext() - const { currentUser: currentUserWallet } = useSelector(getWalletAddresses) return useQuery({ - queryKey: getWalletUserQueryKey(currentUserWallet), + queryKey: getWalletAccountQueryKey(wallet), queryFn: async () => { const sdk = await audiusSdk() - return (await getWalletAccountQueryFn(currentUserWallet!, sdk))?.user - ?.user_id + return await getWalletAccountQueryFn(wallet!, sdk) }, ...options, - enabled: options?.enabled !== false && !!currentUserWallet + enabled: options?.enabled !== false && !!wallet }) } diff --git a/packages/common/src/hooks/useAccountSwitcher.ts b/packages/common/src/hooks/useAccountSwitcher.ts index 66ad4a81fb4..dd945b47d89 100644 --- a/packages/common/src/hooks/useAccountSwitcher.ts +++ b/packages/common/src/hooks/useAccountSwitcher.ts @@ -1,6 +1,6 @@ import { useCallback } from 'react' -import { useGetCurrentUserId, useGetCurrentWeb3User } from '~/api/account' +import { useGetCurrentUser, useGetCurrentWeb3User } from '~/api/account' import { useAppContext } from '~/context' import { Name } from '~/models/Analytics' import { UserMetadata } from '~/models/User' @@ -55,10 +55,10 @@ export const useAccountSwitcher = () => { /** Determines if we are in Manager Mode, i.e. the current user is not the logged-in user */ export const useIsManagedAccount = () => { const { data: currentWeb3User } = useGetCurrentWeb3User({}) - const { data: currentUserId } = useGetCurrentUserId({}) + const { data: currentUser } = useGetCurrentUser({}) return ( !!currentWeb3User && - !!currentUserId && - currentWeb3User.user_id !== currentUserId + !!currentUser && + currentWeb3User.user_id !== currentUser.user_id ) } diff --git a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx index d39b361f6be..bb90bc227de 100644 --- a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx +++ b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx @@ -7,25 +7,16 @@ import { } from '@audius/common/api' import { useAccountSwitcher } from '@audius/common/hooks' import { Status, UserMetadata } from '@audius/common/models' -import { accountSelectors } from '@audius/common/store' import { Box, IconButton, IconCaretDown, Popup } from '@audius/harmony' -import { useSelector } from 'react-redux' import { AccountListContent } from './AccountListContent' export const AccountSwitcher = () => { const [isExpanded, setIsExpanded] = useState(false) - const isAccountComplete = useSelector(accountSelectors.getIsAccountComplete) const [checkedAccess, setCheckedAccess] = useState(false) - const { data: currentWeb3User } = useGetCurrentWeb3User( - {}, - { enabled: !isAccountComplete } - ) - const { data: currentUserId } = useGetCurrentUserId( - {}, - { enabled: !isAccountComplete } - ) + const { data: currentWeb3User } = useGetCurrentWeb3User() + const { data: currentUserId } = useGetCurrentUserId({}) const { switchAccount, switchToWeb3User } = useAccountSwitcher() From 24a6531b0e4bf8c2b97bcf8833be1fa649d4b5b6 Mon Sep 17 00:00:00 2001 From: JD Francis Date: Tue, 6 May 2025 10:27:36 -0500 Subject: [PATCH 2/3] Fix type issues --- packages/common/src/api/account.ts | 47 ++++++++++++++----- .../useGetTrackCommentNotificationSetting.ts | 2 +- .../common/src/hooks/useAccountSwitcher.ts | 12 +++-- .../AccountSwitcher/AccountSwitcher.tsx | 11 ++++- 4 files changed, 53 insertions(+), 19 deletions(-) diff --git a/packages/common/src/api/account.ts b/packages/common/src/api/account.ts index 1b08d5b4ed7..c55722e5842 100644 --- a/packages/common/src/api/account.ts +++ b/packages/common/src/api/account.ts @@ -4,9 +4,10 @@ import { useSelector } from 'react-redux' import { managedUserListFromSDK, userManagerListFromSDK } from '~/adapters/user' import { createApi } from '~/audius-query' -import { ID, User, UserMetadata } from '~/models' +import { AccountUserMetadata, ID, User, UserMetadata } from '~/models' import { getWalletAddresses } from '~/store/account/selectors' +import { SelectableQueryOptions } from './tan-query/types' import { useWalletAccount } from './tan-query/users/account/useWalletUser' type ResetPasswordArgs = { @@ -225,25 +226,47 @@ const accountApi = createApi({ } }) -export const useGetCurrentUser = (_args?: any) => { +export const useGetCurrentUser = ( + options?: SelectableQueryOptions< + AccountUserMetadata | null | undefined, + TResult + > +) => { const { currentUser } = useSelector(getWalletAddresses) - const { data: currentAccount } = useWalletAccount(currentUser) - - return { data: currentAccount?.user } + return useWalletAccount(currentUser, { + select: (data: AccountUserMetadata | null | undefined): TResult => + data?.user as TResult, + ...options + }) } -export const useGetCurrentWeb3User = (_args?: any) => { +export const useGetCurrentWeb3User = ( + options?: SelectableQueryOptions< + AccountUserMetadata | null | undefined, + TResult + > +) => { const { web3User } = useSelector(getWalletAddresses) - const { data: currentAccount } = useWalletAccount(web3User) - - return { data: currentAccount?.user } + return useWalletAccount(web3User, { + select: (data: AccountUserMetadata | null | undefined): TResult => + data?.user as TResult, + ...options + }) } -export const useGetCurrentUserId = (_args?: any) => { - const { data: currentUser } = useGetCurrentUser(_args) ?? {} - return { data: currentUser?.user_id as number } +export const useGetCurrentUserId = ( + options?: SelectableQueryOptions< + AccountUserMetadata | null | undefined, + TResult + > +) => { + return useGetCurrentUser({ + select: (accountData: AccountUserMetadata | null | undefined): TResult => + accountData?.user.user_id as TResult, + ...options + }) } export const { diff --git a/packages/common/src/api/tan-query/comments/useGetTrackCommentNotificationSetting.ts b/packages/common/src/api/tan-query/comments/useGetTrackCommentNotificationSetting.ts index e6780fd856f..214fb578c4e 100644 --- a/packages/common/src/api/tan-query/comments/useGetTrackCommentNotificationSetting.ts +++ b/packages/common/src/api/tan-query/comments/useGetTrackCommentNotificationSetting.ts @@ -17,7 +17,7 @@ export const getTrackCommentNotificationSettingQueryKey = (trackId: ID) => { export const useGetTrackCommentNotificationSetting = ( trackId: ID, - currentUserId: Nullable + currentUserId: Nullable | undefined ) => { const { audiusSdk } = useAudiusQueryContext() diff --git a/packages/common/src/hooks/useAccountSwitcher.ts b/packages/common/src/hooks/useAccountSwitcher.ts index dd945b47d89..0174a946989 100644 --- a/packages/common/src/hooks/useAccountSwitcher.ts +++ b/packages/common/src/hooks/useAccountSwitcher.ts @@ -1,6 +1,10 @@ import { useCallback } from 'react' -import { useGetCurrentUser, useGetCurrentWeb3User } from '~/api/account' +import { + useGetCurrentUser, + useGetCurrentUserId, + useGetCurrentWeb3User +} from '~/api/account' import { useAppContext } from '~/context' import { Name } from '~/models/Analytics' import { UserMetadata } from '~/models/User' @@ -55,10 +59,10 @@ export const useAccountSwitcher = () => { /** Determines if we are in Manager Mode, i.e. the current user is not the logged-in user */ export const useIsManagedAccount = () => { const { data: currentWeb3User } = useGetCurrentWeb3User({}) - const { data: currentUser } = useGetCurrentUser({}) + const { data: currentUserId } = useGetCurrentUserId({}) return ( !!currentWeb3User && - !!currentUser && - currentWeb3User.user_id !== currentUser.user_id + !!currentUserId && + currentWeb3User.user_id !== currentUserId ) } diff --git a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx index bb90bc227de..e1d814c3da4 100644 --- a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx +++ b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcher.tsx @@ -7,16 +7,23 @@ import { } from '@audius/common/api' import { useAccountSwitcher } from '@audius/common/hooks' import { Status, UserMetadata } from '@audius/common/models' +import { accountSelectors } from '@audius/common/store' import { Box, IconButton, IconCaretDown, Popup } from '@audius/harmony' +import { useSelector } from 'react-redux' import { AccountListContent } from './AccountListContent' export const AccountSwitcher = () => { const [isExpanded, setIsExpanded] = useState(false) + const isAccountComplete = useSelector(accountSelectors.getIsAccountComplete) const [checkedAccess, setCheckedAccess] = useState(false) - const { data: currentWeb3User } = useGetCurrentWeb3User() - const { data: currentUserId } = useGetCurrentUserId({}) + const { data: currentWeb3User } = useGetCurrentWeb3User({ + enabled: isAccountComplete + }) + const { data: currentUserId } = useGetCurrentUserId({ + enabled: isAccountComplete && !!currentWeb3User + }) const { switchAccount, switchToWeb3User } = useAccountSwitcher() From af5877dabc590260e059c19150de12b9c776b18a Mon Sep 17 00:00:00 2001 From: JD Francis Date: Tue, 6 May 2025 11:11:33 -0500 Subject: [PATCH 3/3] Fix types --- .../common/src/api/tan-query/users/account/useWalletUser.ts | 4 +--- packages/common/src/hooks/useAccountSwitcher.ts | 6 +----- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/common/src/api/tan-query/users/account/useWalletUser.ts b/packages/common/src/api/tan-query/users/account/useWalletUser.ts index dc96b52dc59..d2bb67e19e8 100644 --- a/packages/common/src/api/tan-query/users/account/useWalletUser.ts +++ b/packages/common/src/api/tan-query/users/account/useWalletUser.ts @@ -1,11 +1,9 @@ import { AudiusSdk } from '@audius/sdk' import { useQuery } from '@tanstack/react-query' -import { useSelector } from 'react-redux' import { accountFromSDK } from '~/adapters/user' import { useAudiusQueryContext } from '~/audius-query' -import { AccountUserMetadata, ID } from '~/models' -import { getWalletAddresses } from '~/store/account/selectors' +import { AccountUserMetadata } from '~/models' import { QUERY_KEYS } from '../../queryKeys' import { QueryKey, SelectableQueryOptions } from '../../types' diff --git a/packages/common/src/hooks/useAccountSwitcher.ts b/packages/common/src/hooks/useAccountSwitcher.ts index 0174a946989..66ad4a81fb4 100644 --- a/packages/common/src/hooks/useAccountSwitcher.ts +++ b/packages/common/src/hooks/useAccountSwitcher.ts @@ -1,10 +1,6 @@ import { useCallback } from 'react' -import { - useGetCurrentUser, - useGetCurrentUserId, - useGetCurrentWeb3User -} from '~/api/account' +import { useGetCurrentUserId, useGetCurrentWeb3User } from '~/api/account' import { useAppContext } from '~/context' import { Name } from '~/models/Analytics' import { UserMetadata } from '~/models/User'