47 lines
1.6 KiB
TypeScript
Executable File
47 lines
1.6 KiB
TypeScript
Executable File
import {Trans} from '@common/i18n/trans';
|
|
import React, {Fragment} from 'react';
|
|
import {IllustratedMessage} from '@common/ui/images/illustrated-message';
|
|
import {BookmarkBorderIcon} from '@common/icons/material/BookmarkBorder';
|
|
import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel';
|
|
import {useUserProfile} from '@app/profile/requests/use-user-profile';
|
|
import {FollowerListItem} from '@app/profile/follower-list-item';
|
|
import {useProfileFollowedUsers} from '@app/profile/requests/use-profile-followed-users';
|
|
import {PageStatus} from '@common/http/page-status';
|
|
|
|
export function ProfileFollowedUsersPanel() {
|
|
const userQuery = useUserProfile();
|
|
const user = userQuery.data!.user;
|
|
const followedUsersQuery = useProfileFollowedUsers();
|
|
|
|
if (followedUsersQuery.noResults) {
|
|
return (
|
|
<IllustratedMessage
|
|
imageHeight="h-auto"
|
|
imageMargin="mb-14"
|
|
image={<BookmarkBorderIcon className="text-muted" />}
|
|
size="sm"
|
|
title={<Trans message="Not following anyone yet" />}
|
|
description={
|
|
<Trans
|
|
message="Check back later to see users :user is following."
|
|
values={{user: user.display_name}}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (followedUsersQuery.data) {
|
|
return (
|
|
<Fragment>
|
|
{followedUsersQuery.items.map(followedUser => (
|
|
<FollowerListItem key={followedUser.id} follower={followedUser} />
|
|
))}
|
|
<InfiniteScrollSentinel query={followedUsersQuery} />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
return <PageStatus query={followedUsersQuery} />;
|
|
}
|