From 8955a56c27788f4d63535ad49f5a351852c8378f Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 25 Jun 2023 12:24:21 -0500 Subject: [PATCH] Delete findAccountByUsername selector --- .../features/account-gallery/index.tsx | 71 +++++++------------ .../features/account-timeline/index.tsx | 5 +- .../features/favourited-statuses/index.tsx | 8 +-- app/soapbox/selectors/index.ts | 30 -------- 4 files changed, 33 insertions(+), 81 deletions(-) diff --git a/app/soapbox/features/account-gallery/index.tsx b/app/soapbox/features/account-gallery/index.tsx index 86a832a36..c98fdb3a3 100644 --- a/app/soapbox/features/account-gallery/index.tsx +++ b/app/soapbox/features/account-gallery/index.tsx @@ -2,17 +2,14 @@ import React, { useEffect, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; import { useParams } from 'react-router-dom'; -import { - fetchAccount, - fetchAccountByUsername, -} from 'soapbox/actions/accounts'; import { openModal } from 'soapbox/actions/modals'; import { expandAccountMediaTimeline } from 'soapbox/actions/timelines'; +import { useAccountLookup } from 'soapbox/api/hooks'; import LoadMore from 'soapbox/components/load-more'; import MissingIndicator from 'soapbox/components/missing-indicator'; import { Column, Spinner } from 'soapbox/components/ui'; -import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; -import { getAccountGallery, findAccountByUsername } from 'soapbox/selectors'; +import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn } from 'soapbox/hooks'; +import { getAccountGallery } from 'soapbox/selectors'; import MediaItem from './components/media-item'; @@ -38,33 +35,20 @@ const AccountGallery = () => { const dispatch = useAppDispatch(); const { username } = useParams<{ username: string }>(); const features = useFeatures(); + const { me } = useLoggedIn(); - const { accountId, unavailable, accountUsername } = useAppSelector((state) => { - const me = state.me; - const accountFetchError = (state.accounts.get(-1)?.username || '').toLowerCase() === username.toLowerCase(); + const { + account, + isLoading: accountLoading, + } = useAccountLookup(username, { withRelationship: true }); - let accountId: string | -1 | null = -1; - let accountUsername = username; - if (accountFetchError) { - accountId = null; - } else { - const account = findAccountByUsername(state, username); - accountId = account ? (account.id || null) : -1; - accountUsername = account?.acct || ''; - } + const isBlocked = account?.relationship?.blocked_by === true; + const unavailable = (me === account?.id) ? false : (isBlocked && !features.blockersVisible); - const isBlocked = state.relationships.get(String(accountId))?.blocked_by || false; - return { - accountId, - unavailable: (me === accountId) ? false : (isBlocked && !features.blockersVisible), - accountUsername, - }; - }); - const isAccount = useAppSelector((state) => !!state.accounts.get(accountId)); - const attachments: ImmutableList = useAppSelector((state) => getAccountGallery(state, accountId as string)); - const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading); - const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore); - const next = useAppSelector(state => state.timelines.get(`account:${accountId}:media`)?.next); + const attachments: ImmutableList = useAppSelector((state) => getAccountGallery(state, account!.id)); + const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.isLoading); + const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.hasMore); + const next = useAppSelector(state => state.timelines.get(`account:${account?.id}:media`)?.next); const node = useRef(null); @@ -75,8 +59,8 @@ const AccountGallery = () => { }; const handleLoadMore = (maxId: string | null) => { - if (accountId && accountId !== -1) { - dispatch(expandAccountMediaTimeline(accountId, { url: next, maxId })); + if (account) { + dispatch(expandAccountMediaTimeline(account.id, { url: next, maxId })); } }; @@ -97,25 +81,22 @@ const AccountGallery = () => { }; useEffect(() => { - if (accountId && accountId !== -1) { - dispatch(fetchAccount(accountId)); - dispatch(expandAccountMediaTimeline(accountId)); - } else { - dispatch(fetchAccountByUsername(username)); + if (account) { + dispatch(expandAccountMediaTimeline(account.id)); } - }, [accountId]); + }, [account?.id]); - if (!isAccount && accountId !== -1) { + if (accountLoading || (!attachments && isLoading)) { return ( - + + + ); } - if (accountId === -1 || (!attachments && isLoading)) { + if (!account) { return ( - - - + ); } @@ -136,7 +117,7 @@ const AccountGallery = () => { } return ( - +
{attachments.map((attachment, index) => attachment === null ? ( 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} /> diff --git a/app/soapbox/features/account-timeline/index.tsx b/app/soapbox/features/account-timeline/index.tsx index e3f5ca3e7..03a69ec5c 100644 --- a/app/soapbox/features/account-timeline/index.tsx +++ b/app/soapbox/features/account-timeline/index.tsx @@ -5,11 +5,12 @@ import { useHistory } from 'react-router-dom'; import { fetchAccountByUsername } from 'soapbox/actions/accounts'; import { fetchPatronAccount } from 'soapbox/actions/patron'; import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines'; +import { useAccountLookup } from 'soapbox/api/hooks'; import MissingIndicator from 'soapbox/components/missing-indicator'; import StatusList from 'soapbox/components/status-list'; import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks'; -import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors'; +import { makeGetStatusIds } from 'soapbox/selectors'; const getStatusIds = makeGetStatusIds(); @@ -27,7 +28,7 @@ const AccountTimeline: React.FC = ({ params, withReplies = fal const settings = useSettings(); const soapboxConfig = useSoapboxConfig(); - const account = useAppSelector(state => findAccountByUsername(state, params.username)); + const { account } = useAccountLookup(params.username, { withRelationship: true }); const [accountLoading, setAccountLoading] = useState(!account); const path = withReplies ? `${account?.id}:with_replies` : account?.id; diff --git a/app/soapbox/features/favourited-statuses/index.tsx b/app/soapbox/features/favourited-statuses/index.tsx index 4be3d21f8..71d76fb21 100644 --- a/app/soapbox/features/favourited-statuses/index.tsx +++ b/app/soapbox/features/favourited-statuses/index.tsx @@ -5,11 +5,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts'; import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites'; +import { useAccount } from 'soapbox/api/hooks'; import MissingIndicator from 'soapbox/components/missing-indicator'; import StatusList from 'soapbox/components/status-list'; import { Column } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks'; -import { findAccountByUsername } from 'soapbox/selectors'; const messages = defineMessages({ heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' }, @@ -22,14 +22,14 @@ interface IFavourites { } /** Timeline displaying a user's favourited statuses. */ -const Favourites: React.FC = (props) => { +const Favourites: React.FC = ({ params }) => { const intl = useIntl(); const dispatch = useAppDispatch(); const features = useFeatures(); const ownAccount = useOwnAccount(); + const { account } = useAccount(params?.username, { withRelationship: true }); - const username = props.params?.username || ''; - const account = useAppSelector(state => findAccountByUsername(state, username)); + const username = params?.username || ''; const isOwnAccount = username.toLowerCase() === ownAccount?.username?.toLowerCase(); const timelineKey = isOwnAccount ? 'favourites' : `favourites:${account?.id}`; diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts index e00cca464..58fca52ca 100644 --- a/app/soapbox/selectors/index.ts +++ b/app/soapbox/selectors/index.ts @@ -46,36 +46,6 @@ export const makeGetAccount = () => { }); }; -const findAccountsByUsername = (state: RootState, username: string) => { - const accounts = state.accounts; - - return accounts.filter(account => { - return username.toLowerCase() === account?.acct.toLowerCase(); - }); -}; - -export const findAccountByUsername = (state: RootState, username: string) => { - const accounts = findAccountsByUsername(state, username); - - if (accounts.length > 1) { - const me = state.me; - const meURL = state.accounts.get(me)?.url || ''; - - return accounts.find(account => { - try { - // If more than one account has the same username, try matching its host - const { host } = new URL(account.url); - const { host: meHost } = new URL(meURL); - return host === meHost; - } catch { - return false; - } - }); - } else { - return accounts[0]; - } -}; - const toServerSideType = (columnType: string): ContextType => { switch (columnType) { case 'home':