2022-07-12 07:06:57 +03:00
|
|
|
import { useEffect, useState } from 'react';
|
2022-07-12 04:29:58 +03:00
|
|
|
import { Col, Pagination, Row } from 'antd';
|
|
|
|
import { Follower } from '../../../interfaces/follower';
|
|
|
|
import SingleFollower from './Follower';
|
|
|
|
import s from './Followers.module.scss';
|
|
|
|
|
2022-07-12 07:06:57 +03:00
|
|
|
export default function FollowerCollection() {
|
|
|
|
const ENDPOINT = '/api/followers';
|
2022-07-12 04:29:58 +03:00
|
|
|
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);
|
2022-07-12 04:29:58 +03:00
|
|
|
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]);
|
|
|
|
|
2022-07-12 04:29:58 +03:00
|
|
|
const noFollowers = (
|
|
|
|
<div>A message explaining how to follow goes here since there are no followers.</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
if (followers.length === 0) {
|
|
|
|
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
|
|
|
|
/>
|
2022-07-12 04:29:58 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|