pleroma/app/soapbox/features/following/index.tsx

70 lines
1.8 KiB
TypeScript
Raw Normal View History

import React from 'react';
2022-09-10 09:56:02 -07:00
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
2023-06-25 14:22:47 -07:00
import { useAccountLookup, useFollowing } from 'soapbox/api/hooks';
import Account from 'soapbox/components/account';
2022-11-15 08:00:49 -08:00
import MissingIndicator from 'soapbox/components/missing-indicator';
import ScrollableList from 'soapbox/components/scrollable-list';
2022-11-30 09:19:16 -08:00
import { Column, Spinner } from 'soapbox/components/ui';
2022-09-10 09:56:02 -07:00
const messages = defineMessages({
heading: { id: 'column.following', defaultMessage: 'Following' },
});
interface IFollowing {
params?: {
username?: string
2022-09-10 09:56:02 -07:00
}
}
/** Displays a list of accounts the given user is following. */
const Following: React.FC<IFollowing> = ({ params }) => {
2022-09-10 09:56:02 -07:00
const intl = useIntl();
const { account, isUnavailable } = useAccountLookup(params?.username);
2022-09-10 09:56:02 -07:00
const {
accounts,
hasNextPage,
fetchNextPage,
isLoading,
2023-06-25 14:21:27 -07:00
} = useFollowing(account?.id, 'following');
2022-09-10 09:56:02 -07:00
if (isLoading) {
2022-09-10 09:56:02 -07:00
return (
<Spinner />
);
}
if (!account) {
return (
<MissingIndicator />
);
}
if (isUnavailable) {
2022-09-10 09:56:02 -07:00
return (
<div className='empty-column-indicator'>
<FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
</div>
);
}
return (
<Column label={intl.formatMessage(messages.heading)} transparent>
<ScrollableList
scrollKey='following'
hasMore={hasNextPage}
onLoadMore={fetchNextPage}
2022-09-10 09:56:02 -07:00
emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
itemClassName='pb-4'
>
{accounts.map((account) => (
<Account key={account.id} account={account} />
))}
2022-09-10 09:56:02 -07:00
</ScrollableList>
</Column>
);
};
export default Following;