diff --git a/packages/nicolium/src/features/ui/components/profile-dropdown.tsx b/packages/nicolium/src/features/ui/components/profile-dropdown.tsx index 32ffc6f08..78148db3e 100644 --- a/packages/nicolium/src/features/ui/components/profile-dropdown.tsx +++ b/packages/nicolium/src/features/ui/components/profile-dropdown.tsx @@ -6,9 +6,13 @@ import { defineMessages, useIntl } from 'react-intl'; import { logOut, switchAccount } from '@/actions/auth'; import Account from '@/components/accounts/account'; import DropdownMenu from '@/components/dropdown-menu'; +import PlaceholderAccount from '@/features/placeholder/components/placeholder-account'; import { useAppDispatch } from '@/hooks/use-app-dispatch'; import { useFeatures } from '@/hooks/use-features'; -import { useLoggedInAccounts } from '@/queries/accounts/use-logged-in-accounts'; +import { + useLoggedInAccount, + useLoggedInAccountIds, +} from '@/queries/accounts/use-logged-in-accounts'; import ThemeToggle from './theme-toggle'; @@ -20,6 +24,20 @@ const messages = defineMessages({ logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' }, }); +interface ILoggedInAccount { + accountId: string; +} + +const LoggedInAccount: React.FC = ({ accountId }) => { + const { data: account } = useLoggedInAccount(accountId); + + if (!account) return ; + + return ( + + ); +}; + interface IProfileDropdown { account: AccountEntity; children: React.ReactNode; @@ -38,14 +56,14 @@ const ProfileDropdown: React.FC = ({ account, children }) => { const features = useFeatures(); const intl = useIntl(); - const { accounts: otherAccounts } = useLoggedInAccounts(); + const otherAccountIds = useLoggedInAccountIds(); const handleLogOut = () => { dispatch(logOut()); }; - const handleSwitchAccount = (otherAccount: AccountEntity) => () => { - dispatch(switchAccount(otherAccount.id)); + const handleSwitchAccount = (otherAccountId: string) => () => { + dispatch(switchAccount(otherAccountId)); }; const renderAccount = (account: AccountEntity) => ( @@ -60,13 +78,11 @@ const ProfileDropdown: React.FC = ({ account, children }) => { linkOptions: { to: '/@{$username}', params: { username: account.acct } }, }); - otherAccounts.forEach((otherAccount?: AccountEntity) => { - if (otherAccount && otherAccount.id !== account.id) { - menu.push({ - text: renderAccount(otherAccount), - action: handleSwitchAccount(otherAccount), - }); - } + otherAccountIds.forEach((otherAccountId) => { + menu.push({ + text: , + action: handleSwitchAccount(otherAccountId), + }); }); menu.push({ text: null }); @@ -93,7 +109,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { ))} ); - }, [account, otherAccounts.length, features]); + }, [account, otherAccountIds.length, features]); return ( diff --git a/packages/nicolium/src/queries/accounts/use-logged-in-accounts.ts b/packages/nicolium/src/queries/accounts/use-logged-in-accounts.ts index 5c621ea98..563027cb3 100644 --- a/packages/nicolium/src/queries/accounts/use-logged-in-accounts.ts +++ b/packages/nicolium/src/queries/accounts/use-logged-in-accounts.ts @@ -1,5 +1,4 @@ import { skipToken, useQueries, useQuery } from '@tanstack/react-query'; -import { useMemo } from 'react'; import { createSelector } from 'reselect'; import { useAppSelector } from '@/hooks/use-app-selector'; @@ -19,7 +18,7 @@ const selectOtherAccountIds = createSelector( ); const useLoggedInAccount = (accountId: string) => { - const query = useQuery({ + const query = useQuery({ queryKey: queryKeys.accounts.show(accountId), queryFn: skipToken, }); @@ -27,24 +26,22 @@ const useLoggedInAccount = (accountId: string) => { return query; }; -const useLoggedInAccountIds = () => useAppSelector((state) => selectOtherAccountIds(state)); +const useLoggedInAccountIds = () => useAppSelector(selectOtherAccountIds); /** doesn't fetch because it's a hack that should not exist like this */ const useLoggedInAccounts = () => { const otherAccountIds = useLoggedInAccountIds(); - const queries = useQueries({ + const { accounts } = useQueries({ queries: otherAccountIds.map((accountId) => ({ queryKey: queryKeys.accounts.show(accountId), queryFn: skipToken, })), + combine: (results) => ({ + accounts: results.map((q) => q.data).filter((account): account is Account => !!account), + }), }); - const accounts = useMemo( - () => queries.map((q) => q.data).filter((account): account is Account => !!account), - [queries], - ); - return { accounts }; };