owncast/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

66 lines
1.6 KiB
TypeScript
Raw Normal View History

2022-07-12 07:06:57 +03:00
import { useEffect, useState } from 'react';
import { Col, Pagination, Row } from 'antd';
refactor(stories): co-locate stories with components (#2078) * refactor: move ActionButton component * refactor: move BanUserButton component * refactor: move ChatActionMessage component * refactor: move ChatContainer component * refactor: move AuthModal component * refactor: move BrowserNotifyModal component * refactor: move ChatUserMessage component * refactor: move ChatJoinMessage component * refactor: move ChatTextField component * refactor: move ChatUserBadge component * refactor: move FollowerCollection and SingleFollower components * fix: bad import path * refactor: move FollowModal component * refactor: move Modal component * refactor: move ContentHeader component * refactor: move ChatSystemMessage component * refactor: move Header component * refactor: move Footer component * refactor: move StatusBar component * refactor: move OfflineBanner component * refactor: move OwncastPlayer component * refactor: move IndieAuthModal component * refactor: move SocialLinks component * refactor: move VideoPoster component * refactor: move FollowModal component * refactor: move FediAuthModal.tsx component * refactor: move UserDropdown component * refactor: move ChatSocialMessage component * refactor: move Logo component * refactor: move NotifyReminderPopup component * refactor: move NameChangeModal component * refactor: move FatalErrorStateModal component * refactor: move ChatModeratorNotification component * refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components * refactor: move CustomPageContent component * refactor: move storybook Introduction file * refactor: update storybook story import path * refactor: move storybook preview styles * refactor: move storybook doc pages * refactor: move Color and ImageAsset components * fix: bad import path * fix: bad import path in story file
2022-09-03 21:38:52 +03:00
import { Follower } from '../../../../interfaces/follower';
import SingleFollower from '../SingleFollower/SingleFollower';
import s from '../SingleFollower/SingleFollower.module.scss';
2022-07-12 07:06:57 +03:00
export default function FollowerCollection() {
const ENDPOINT = '/api/followers';
const ITEMS_PER_PAGE = 24;
2022-07-12 07:06:57 +03:00
const [followers, setFollowers] = useState<Follower[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const pages = Math.ceil(total / ITEMS_PER_PAGE);
2022-07-12 07:06:57 +03:00
const getFollowers = async () => {
try {
const response = await fetch(`${ENDPOINT}?page=${page}`);
const data = await response.json();
setFollowers(data.response);
setTotal(data.total);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
getFollowers();
}, []);
useEffect(() => {
getFollowers();
}, [page]);
const noFollowers = (
<div>A message explaining how to follow goes here since there are no followers.</div>
);
2022-07-12 23:14:39 +03:00
if (!followers?.length) {
return noFollowers;
}
return (
<div className={s.followers}>
<Row wrap gutter={[10, 10]} justify="space-around">
{followers.map(follower => (
<Col>
<SingleFollower key={follower.link} follower={follower} />
</Col>
))}
</Row>
2022-07-12 07:06:57 +03:00
<Pagination
current={page}
pageSize={ITEMS_PER_PAGE}
total={pages || 1}
onChange={p => {
setPage(p);
}}
hideOnSinglePage
/>
</div>
);
}