0

Pull followers from API. For #1861

This commit is contained in:
Gabe Kangas 2022-07-11 21:06:57 -07:00
parent e0634abc98
commit 8c2ffd5a0b
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
2 changed files with 36 additions and 14 deletions

View File

@ -27,7 +27,6 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
import ActionButtonRow from '../../action-buttons/ActionButtonRow';
import ActionButton from '../../action-buttons/ActionButton';
import { Follower } from '../../../interfaces/follower';
import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
import OfflineBanner from '../OfflineBanner/OfflineBanner';
import { AppStateOptions } from '../../stores/application-state';
@ -54,10 +53,6 @@ export default function ContentComponent() {
const [showNotifyReminder, setShowNotifyReminder] = useState(false);
const [showNotifyPopup, setShowNotifyPopup] = useState(false);
const followers: Follower[] = [];
const total = 0;
// This is example content. It should be removed.
const externalActions = [
{
@ -172,7 +167,7 @@ export default function ContentComponent() {
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="3" className={s.pageContentSection}>
<FollowerCollection total={total} followers={followers} />
<FollowerCollection />
</TabPane>
</Tabs>
{!isMobile && <Footer version={version} />}

View File

@ -1,19 +1,38 @@
import { useEffect, useState } from 'react';
import { Col, Pagination, Row } from 'antd';
import { Follower } from '../../../interfaces/follower';
import SingleFollower from './Follower';
import s from './Followers.module.scss';
interface Props {
total: number;
followers: Follower[];
}
export default function FollowerCollection(props: Props) {
export default function FollowerCollection() {
const ENDPOINT = '/api/followers';
const ITEMS_PER_PAGE = 24;
const { followers, total } = props;
const [followers, setFollowers] = useState<Follower[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const pages = Math.ceil(total / ITEMS_PER_PAGE);
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>
);
@ -32,7 +51,15 @@ export default function FollowerCollection(props: Props) {
))}
</Row>
<Pagination current={1} pageSize={ITEMS_PER_PAGE} total={pages || 1} hideOnSinglePage />
<Pagination
current={page}
pageSize={ITEMS_PER_PAGE}
total={pages || 1}
onChange={p => {
setPage(p);
}}
hideOnSinglePage
/>
</div>
);
}