diff --git a/packages/pl-fe/src/actions/compose.ts b/packages/pl-fe/src/actions/compose.ts index 556e0f6f2..943f68ed9 100644 --- a/packages/pl-fe/src/actions/compose.ts +++ b/packages/pl-fe/src/actions/compose.ts @@ -7,7 +7,7 @@ import emojiSearch from 'pl-fe/features/emoji/search'; import { Language } from 'pl-fe/features/preferences'; import { queryClient } from 'pl-fe/queries/client'; import { cancelDraftStatus } from 'pl-fe/queries/statuses/use-draft-statuses'; -import { selectAccount, selectOwnAccount, makeGetAccount } from 'pl-fe/selectors'; +import { selectAccount, selectOwnAccount } from 'pl-fe/selectors'; import { tagHistory } from 'pl-fe/settings'; import { useModalsStore } from 'pl-fe/stores/modals'; import { useSettingsStore } from 'pl-fe/stores/settings'; @@ -107,8 +107,6 @@ const COMPOSE_HASHTAG_CASING_SUGGESTION_IGNORE = 'COMPOSE_HASHTAG_CASING_SUGGEST const COMPOSE_REDACTING_OVERWRITE_CHANGE = 'COMPOSE_REDACTING_OVERWRITE_CHANGE' as const; -const getAccount = makeGetAccount(); - const messages = defineMessages({ scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.' }, success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent!' }, @@ -303,7 +301,7 @@ const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, c const state = getState(); - const accountUrl = getAccount(state, state.me as string)!.url; + const accountUrl = selectOwnAccount(state)!.url; const draftId = getState().compose[composeId]!.draft_id; dispatch(submitComposeSuccess(composeId, data)); diff --git a/packages/pl-fe/src/actions/importer.ts b/packages/pl-fe/src/actions/importer.ts index c61ef66eb..cfbac3a80 100644 --- a/packages/pl-fe/src/actions/importer.ts +++ b/packages/pl-fe/src/actions/importer.ts @@ -2,6 +2,7 @@ import { importEntities as importEntityStoreEntities } from 'pl-fe/entity-store/ import { Entities } from 'pl-fe/entity-store/entities'; import { normalizeGroup } from 'pl-fe/normalizers/group'; import { queryClient } from 'pl-fe/queries/client'; +import { selectAccount } from 'pl-fe/selectors'; import type { Account as BaseAccount, Group as BaseGroup, Poll as BasePoll, Relationship as BaseRelationship, Status as BaseStatus } from 'pl-api'; import type { AppDispatch, RootState } from 'pl-fe/store'; @@ -70,7 +71,7 @@ const importEntities = (entities: { const statuses: Record = {}; const processAccount = (account: BaseAccount, withSelf = true) => { - if (!override && state.entities[Entities.ACCOUNTS]?.store[account.id]) return; + if (!override && selectAccount(state, account.id)) return; if (withSelf) accounts[account.id] = account; diff --git a/packages/pl-fe/src/actions/settings.ts b/packages/pl-fe/src/actions/settings.ts index d171ad4f1..3289b7a93 100644 --- a/packages/pl-fe/src/actions/settings.ts +++ b/packages/pl-fe/src/actions/settings.ts @@ -4,7 +4,7 @@ import { patchMe } from 'pl-fe/actions/me'; import { getClient } from 'pl-fe/api'; import { NODE_ENV } from 'pl-fe/build-config'; import messages from 'pl-fe/messages'; -import { makeGetAccount } from 'pl-fe/selectors'; +import { selectOwnAccount } from 'pl-fe/selectors'; import KVStore from 'pl-fe/storage/kv-store'; import { useSettingsStore } from 'pl-fe/stores/settings'; import toast from 'pl-fe/toast'; @@ -76,7 +76,7 @@ const updateSettingsStore = (settings: any) => }, })); } else { - const accountUrl = makeGetAccount()(state, state.me as string)!.url; + const accountUrl = selectOwnAccount(state)!.url; return updateAuthAccount(accountUrl, settings); } diff --git a/packages/pl-fe/src/api/hooks/accounts/use-account.ts b/packages/pl-fe/src/api/hooks/accounts/use-account.ts index 5c3d3847f..c54191043 100644 --- a/packages/pl-fe/src/api/hooks/accounts/use-account.ts +++ b/packages/pl-fe/src/api/hooks/accounts/use-account.ts @@ -51,7 +51,6 @@ const useAccount = (accountId?: string, opts: UseAccountOpts = {}) => { return { ...result, - isLoading: result.isLoading, isRelationshipLoading, isUnauthorized, isUnavailable, diff --git a/packages/pl-fe/src/components/avatar-stack.tsx b/packages/pl-fe/src/components/avatar-stack.tsx index 94421fb10..737915af0 100644 --- a/packages/pl-fe/src/components/avatar-stack.tsx +++ b/packages/pl-fe/src/components/avatar-stack.tsx @@ -23,7 +23,7 @@ const AvatarStack: React.FC = ({ accountIds, limit = 3 }) => { style={{ zIndex: limit - i }} > { style={style} className={clsx('relative rounded-lg bg-gray-200 leading-[0] dark:bg-gray-900', isCat && 'avatar__cat', className)} > -
+
{ return ( { }; const buildStatus = (state: RootState, draftStatus: DraftStatus) => { - const me = state.me as string; - const account = state.entities[Entities.ACCOUNTS]?.store[me]; + const account = selectOwnAccount(state); const status = v.parse(statusSchema, { id: 'draft', diff --git a/packages/pl-fe/src/features/scheduled-statuses/builder.tsx b/packages/pl-fe/src/features/scheduled-statuses/builder.tsx index 429eed9bb..6dd59acb9 100644 --- a/packages/pl-fe/src/features/scheduled-statuses/builder.tsx +++ b/packages/pl-fe/src/features/scheduled-statuses/builder.tsx @@ -1,14 +1,13 @@ import { statusSchema, type ScheduledStatus } from 'pl-api'; import * as v from 'valibot'; -import { Entities } from 'pl-fe/entity-store/entities'; import { normalizeStatus } from 'pl-fe/normalizers/status'; +import { selectOwnAccount } from 'pl-fe/selectors'; import type { RootState } from 'pl-fe/store'; const buildStatus = (state: RootState, scheduledStatus: ScheduledStatus) => { - const me = state.me as string; - const account = state.entities[Entities.ACCOUNTS]?.store[me]; + const account = selectOwnAccount(state); const poll = scheduledStatus.params.poll ? { id: `${scheduledStatus.id}-poll`, diff --git a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx index f9ef9c333..77f133622 100644 --- a/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx +++ b/packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx @@ -2,20 +2,41 @@ import React from 'react'; import { FormattedList, FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import AvatarStack from 'pl-fe/components/avatar-stack'; import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper'; import HStack from 'pl-fe/components/ui/hstack'; import Text from 'pl-fe/components/ui/text'; import VerificationBadge from 'pl-fe/components/verification-badge'; import Emojify from 'pl-fe/features/emoji/emojify'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFamiliarFollowers } from 'pl-fe/queries/accounts/use-familiar-followers'; -import { makeGetAccount } from 'pl-fe/selectors'; import { useModalsActions } from 'pl-fe/stores/modals'; import type { Account } from 'pl-fe/normalizers/account'; -const getAccount = makeGetAccount(); +interface IFamiliarFollowerLink { + id: string; +} + +const FamiliarFollowerLink: React.FC = ({ id }) => { + const { account } = useAccount(id); + + if (!account) return null; + + return ( + + + + + + + + {account.verified && } + + + + ); +}; interface IProfileFamiliarFollowers { account: Account; @@ -24,7 +45,7 @@ interface IProfileFamiliarFollowers { const ProfileFamiliarFollowers: React.FC = ({ account }) => { const { openModal } = useModalsActions(); const { data: familiarFollowerIds = [] } = useFamiliarFollowers(account.id); - const familiarFollowers = useAppSelector(state => familiarFollowerIds.slice(0, 2).map(accountId => getAccount(state, accountId))); + const displayedFamiliarFollowerIds = familiarFollowerIds.slice(0, 2); const openFamiliarFollowersModal = () => { openModal('FAMILIAR_FOLLOWERS', { @@ -36,19 +57,9 @@ const ProfileFamiliarFollowers: React.FC = ({ account return null; } - const accounts: Array = familiarFollowers.map(account => !!account && ( - - - - - - - - {account.verified && } - - - - )).filter(Boolean); + const accounts: Array = displayedFamiliarFollowerIds.map(accountId => ( + + )); if (familiarFollowerIds.length > 2) { accounts.push( @@ -56,7 +67,7 @@ const ProfileFamiliarFollowers: React.FC = ({ account , ); diff --git a/packages/pl-fe/src/features/ui/util/pending-status-builder.ts b/packages/pl-fe/src/features/ui/util/pending-status-builder.ts index f33f57206..3cde3dffd 100644 --- a/packages/pl-fe/src/features/ui/util/pending-status-builder.ts +++ b/packages/pl-fe/src/features/ui/util/pending-status-builder.ts @@ -3,13 +3,11 @@ import { statusSchema } from 'pl-api'; import * as v from 'valibot'; import { normalizeStatus } from 'pl-fe/normalizers/status'; -import { makeGetAccount } from 'pl-fe/selectors'; +import { selectOwnAccount } from 'pl-fe/selectors'; import type { PendingStatus } from 'pl-fe/reducers/pending-statuses'; import type { RootState } from 'pl-fe/store'; -const getAccount = makeGetAccount(); - const buildMentions = (pendingStatus: PendingStatus) => { if (pendingStatus.in_reply_to_id) { return (pendingStatus.to || []).map(acct => ({ acct })); @@ -30,8 +28,7 @@ const buildPoll = (pendingStatus: PendingStatus) => { }; const buildStatus = (state: RootState, pendingStatus: PendingStatus, idempotencyKey: string) => { - const me = state.me as string; - const account = getAccount(state, me); + const account = selectOwnAccount(state)!; const inReplyToId = pendingStatus.in_reply_to_id; const status = { diff --git a/packages/pl-fe/src/hooks/use-own-account.ts b/packages/pl-fe/src/hooks/use-own-account.ts index fd517e849..623955757 100644 --- a/packages/pl-fe/src/hooks/use-own-account.ts +++ b/packages/pl-fe/src/hooks/use-own-account.ts @@ -1,22 +1,12 @@ -import { useCallback } from 'react'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; -import { makeGetAccount } from 'pl-fe/selectors'; - -import { useAppSelector } from './use-app-selector'; +import { useLoggedIn } from './use-logged-in'; /** Get the logged-in account from the store, if any. */ const useOwnAccount = () => { - const getAccount = useCallback(makeGetAccount(), []); + const { me } = useLoggedIn(); - const account = useAppSelector((state) => { - const { me } = state; - - if (typeof me === 'string') { - return getAccount(state, me); - } - }); - - return { account: account || undefined }; + return useAccount(typeof me === 'string' ? me : undefined); }; export { diff --git a/packages/pl-fe/src/modals/familiar-followers-modal.tsx b/packages/pl-fe/src/modals/familiar-followers-modal.tsx index 75cda0671..59335b2d1 100644 --- a/packages/pl-fe/src/modals/familiar-followers-modal.tsx +++ b/packages/pl-fe/src/modals/familiar-followers-modal.tsx @@ -1,25 +1,22 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Modal from 'pl-fe/components/ui/modal'; import Spinner from 'pl-fe/components/ui/spinner'; import AccountContainer from 'pl-fe/containers/account-container'; import Emojify from 'pl-fe/features/emoji/emojify'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFamiliarFollowers } from 'pl-fe/queries/accounts/use-familiar-followers'; -import { makeGetAccount } from 'pl-fe/selectors'; import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; -const getAccount = makeGetAccount(); - interface FamiliarFollowersModalProps { accountId: string; } const FamiliarFollowersModal: React.FC = ({ accountId, onClose }) => { - const account = useAppSelector(state => getAccount(state, accountId)); + const { account } = useAccount(accountId); const { data: familiarFollowerIds } = useFamiliarFollowers(accountId); const onClickClose = () => { diff --git a/packages/pl-fe/src/selectors/index.ts b/packages/pl-fe/src/selectors/index.ts index 14b4cf389..c88af4edd 100644 --- a/packages/pl-fe/src/selectors/index.ts +++ b/packages/pl-fe/src/selectors/index.ts @@ -7,7 +7,7 @@ import { validId } from 'pl-fe/utils/auth'; import ConfigDB from 'pl-fe/utils/config-db'; import { shouldFilter } from 'pl-fe/utils/timelines'; -import type { Filter, FilterResult, NotificationGroup, Relationship } from 'pl-api'; +import type { Filter, FilterResult, NotificationGroup } from 'pl-api'; import type { EntityStore } from 'pl-fe/entity-store/types'; import type { Account } from 'pl-fe/normalizers/account'; import type { Group } from 'pl-fe/normalizers/group'; @@ -30,25 +30,6 @@ const selectOwnAccount = (state: RootState) => { } }; -const getAccountBase = (state: RootState, accountId: string) => state.entities[Entities.ACCOUNTS]?.store[accountId] as Account | undefined; -const getAccountRelationship = (state: RootState, accountId: string) => state.entities[Entities.RELATIONSHIPS]?.store[accountId] as Relationship | undefined; -const getAccountMeta = (state: RootState, accountId: string) => state.accounts_meta[accountId]; - -const makeGetAccount = () => createSelector([ - getAccountBase, - getAccountRelationship, - getAccountMeta, -], (account, relationship, meta) => { - if (!account) return null; - return { - ...account, - relationship, - __meta: { meta, ...account.__meta }, - // @ts-ignore - is_admin: meta?.role ? (meta.role.permissions & 0x1) === 0x1 : account.is_admin, - }; -}); - const toServerSideType = (columnType: string): Filter['context'][0] => { switch (columnType) { case 'home': @@ -309,7 +290,6 @@ export { selectAccount, selectAccounts, selectOwnAccount, - makeGetAccount, getFilters, regexFromFilters, makeGetStatus,