diff --git a/packages/pl-fe/src/api/hooks/accounts/useAccount.ts b/packages/pl-fe/src/api/hooks/accounts/useAccount.ts index 70a97262d..785f30982 100644 --- a/packages/pl-fe/src/api/hooks/accounts/useAccount.ts +++ b/packages/pl-fe/src/api/hooks/accounts/useAccount.ts @@ -32,7 +32,7 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => { { enabled: !!accountId, transform: normalizeAccount }, ); - const meta = useAppSelector((state) => accountId && state.accounts_meta[accountId] || {}); + const meta = useAppSelector((state) => accountId && state.accounts_meta[accountId]); const { relationship, diff --git a/packages/pl-fe/src/features/compose/containers/upload-button-container.tsx b/packages/pl-fe/src/features/compose/containers/upload-button-container.tsx index e3088358e..36b7c7eae 100644 --- a/packages/pl-fe/src/features/compose/containers/upload-button-container.tsx +++ b/packages/pl-fe/src/features/compose/containers/upload-button-container.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { uploadCompose } from 'pl-fe/actions/compose'; import { useAppDispatch } from 'pl-fe/hooks/useAppDispatch'; -import { useAppSelector } from 'pl-fe/hooks/useAppSelector'; +import { useCompose } from 'pl-fe/hooks/useCompose'; import UploadButton from '../components/upload-button'; @@ -14,10 +14,7 @@ interface IUploadButtonContainer { const UploadButtonContainer: React.FC = ({ composeId }) => { const dispatch = useAppDispatch(); - const { disabled, resetFileKey } = useAppSelector((state) => ({ - disabled: state.compose.get(composeId)?.is_uploading, - resetFileKey: state.compose.get(composeId)?.resetFileKey!, - })); + const { is_uploading: disabled, resetFileKey } = useCompose(composeId); const onSelectFile = (files: FileList, intl: IntlShape) => { dispatch(uploadCompose(composeId, files, intl)); diff --git a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx index bbb6efc3d..babad5af8 100644 --- a/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx +++ b/packages/pl-fe/src/features/ui/components/profile-dropdown.tsx @@ -3,14 +3,16 @@ import throttle from 'lodash/throttle'; import React, { useEffect, useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; +import { createSelector } from 'reselect'; import { fetchOwnAccounts, logOut, switchAccount } from 'pl-fe/actions/auth'; import Account from 'pl-fe/components/account'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; +import { Entities } from 'pl-fe/entity-store/entities'; import { useAppDispatch } from 'pl-fe/hooks/useAppDispatch'; import { useAppSelector } from 'pl-fe/hooks/useAppSelector'; import { useFeatures } from 'pl-fe/hooks/useFeatures'; -import { makeGetAccount } from 'pl-fe/selectors'; +import { RootState } from 'pl-fe/store'; import ThemeToggle from './theme-toggle'; @@ -35,15 +37,18 @@ type IMenuItem = { action?: (event: React.MouseEvent) => void; } -const getAccount = makeGetAccount(); + +const getOtherAccounts = createSelector([ + (state: RootState) => state.auth.users, + (state: RootState) => state.entities[Entities.ACCOUNTS]?.store, +], (signedAccounts, accountEntities) => signedAccounts.toArray().map(([_, { id }]) => accountEntities?.[id] as AccountEntity).filter(account => account)); const ProfileDropdown: React.FC = ({ account, children }) => { const dispatch = useAppDispatch(); const features = useFeatures(); const intl = useIntl(); - const authUsers = useAppSelector((state) => state.auth.users); - const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.id)!)); + const otherAccounts = useAppSelector(getOtherAccounts); const handleLogOut = () => { dispatch(logOut()); @@ -66,7 +71,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { menu.push({ text: renderAccount(account), to: `/@${account.acct}` }); - otherAccounts.forEach((otherAccount: AccountEntity) => { + otherAccounts.forEach((otherAccount?: AccountEntity) => { if (otherAccount && otherAccount.id !== account.id) { menu.push({ text: renderAccount(otherAccount), @@ -99,11 +104,11 @@ const ProfileDropdown: React.FC = ({ account, children }) => { ))} ); - }, [account, authUsers, features]); + }, [account, otherAccounts.length, features]); useEffect(() => { fetchOwnAccountThrottled(); - }, [account.id, authUsers]); + }, [account.id, otherAccounts.length]); return ( ( - - - - - - - - - - - - + <> + + + + + + + + + + + + +
+ +
+ ); export { PlFe as default }; diff --git a/packages/pl-fe/src/selectors/index.ts b/packages/pl-fe/src/selectors/index.ts index d96894822..da393512e 100644 --- a/packages/pl-fe/src/selectors/index.ts +++ b/packages/pl-fe/src/selectors/index.ts @@ -349,6 +349,7 @@ const makeGetStatusIds = () => createSelector([ export { type RemoteInstance, selectAccount, + selectAccounts, selectOwnAccount, makeGetAccount, getFilters,