diff --git a/app/soapbox/api/hooks/accounts/useFollowing.ts b/app/soapbox/api/hooks/accounts/useFollowing.ts index 41f9afeed..8b5e11851 100644 --- a/app/soapbox/api/hooks/accounts/useFollowing.ts +++ b/app/soapbox/api/hooks/accounts/useFollowing.ts @@ -5,17 +5,17 @@ import { Account, accountSchema } from 'soapbox/schemas'; import { useRelationships } from './useRelationships'; -function useFollowing(accountId: string | undefined) { +function useFollowing(accountId: string | undefined, type: 'followers' | 'following') { const api = useApi(); const { entities, ...rest } = useEntities( - [Entities.ACCOUNTS, accountId!, 'following'], - () => api.get(`/api/v1/accounts/${accountId}/following`), + [Entities.ACCOUNTS, accountId!, type], + () => api.get(`/api/v1/accounts/${accountId}/${type}`), { schema: accountSchema, enabled: !!accountId }, ); const { relationships } = useRelationships( - [accountId!, 'following'], + [accountId!, type], entities.map(({ id }) => id), ); diff --git a/app/soapbox/features/followers/index.tsx b/app/soapbox/features/followers/index.tsx index 87049b473..149477a0f 100644 --- a/app/soapbox/features/followers/index.tsx +++ b/app/soapbox/features/followers/index.tsx @@ -1,20 +1,12 @@ -import { OrderedSet as ImmutableOrderedSet } from 'immutable'; -import debounce from 'lodash/debounce'; -import React, { useCallback, useEffect, useState } from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import { - fetchAccount, - fetchFollowers, - expandFollowers, - fetchAccountByUsername, -} from 'soapbox/actions/accounts'; import { useAccountLookup } from 'soapbox/api/hooks'; +import { useFollowing } from 'soapbox/api/hooks/accounts/useFollowing'; +import Account from 'soapbox/components/account'; import MissingIndicator from 'soapbox/components/missing-indicator'; import ScrollableList from 'soapbox/components/scrollable-list'; import { Column, Spinner } from 'soapbox/components/ui'; -import AccountContainer from 'soapbox/containers/account-container'; -import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks'; const messages = defineMessages({ heading: { id: 'column.followers', defaultMessage: 'Followers' }, @@ -27,53 +19,19 @@ interface IFollowers { } /** Displays a list of accounts who follow the given account. */ -const Followers: React.FC = (props) => { +const Followers: React.FC = ({ params }) => { const intl = useIntl(); - const dispatch = useAppDispatch(); - const features = useFeatures(); - const { account: ownAccount } = useOwnAccount(); - const [loading, setLoading] = useState(true); + const { account, isUnavailable } = useAccountLookup(params?.username); - const username = props.params?.username || ''; - const { account } = useAccountLookup(username); - const isOwnAccount = username.toLowerCase() === ownAccount?.username?.toLowerCase(); + const { + accounts, + hasNextPage, + fetchNextPage, + isLoading, + } = useFollowing(account?.id, 'followers'); - const accountIds = useAppSelector(state => state.user_lists.followers.get(account!?.id)?.items || ImmutableOrderedSet()); - const hasMore = useAppSelector(state => !!state.user_lists.followers.get(account!?.id)?.next); - - const isUnavailable = useAppSelector(state => { - const blockedBy = state.relationships.getIn([account?.id, 'blocked_by']) === true; - return isOwnAccount ? false : (blockedBy && !features.blockersVisible); - }); - - const handleLoadMore = useCallback(debounce(() => { - if (account) { - dispatch(expandFollowers(account.id)); - } - }, 300, { leading: true }), [account?.id]); - - useEffect(() => { - let promises = []; - - if (account) { - promises = [ - dispatch(fetchAccount(account.id)), - dispatch(fetchFollowers(account.id)), - ]; - } else { - promises = [ - dispatch(fetchAccountByUsername(username)), - ]; - } - - Promise.all(promises) - .then(() => setLoading(false)) - .catch(() => setLoading(false)); - - }, [account?.id, username]); - - if (loading && accountIds.isEmpty()) { + if (isLoading) { return ( ); @@ -97,13 +55,13 @@ const Followers: React.FC = (props) => { } itemClassName='pb-4' > - {accountIds.map(id => - , + {accounts.map((account) => + , )} diff --git a/app/soapbox/features/following/index.tsx b/app/soapbox/features/following/index.tsx index ea6a36c9b..629d8c491 100644 --- a/app/soapbox/features/following/index.tsx +++ b/app/soapbox/features/following/index.tsx @@ -29,7 +29,7 @@ const Following: React.FC = ({ params }) => { hasNextPage, fetchNextPage, isLoading, - } = useFollowing(account?.id); + } = useFollowing(account?.id, 'following'); if (isLoading) { return (