Pull followers from API. For #1861

web/components/ui/Content/Content.tsx

@@ -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} />}

web/components/ui/Followers/FollowersCollection.tsx

@@ -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 {
+export default function FollowerCollection() {
-  total: number;
+  const ENDPOINT = '/api/followers';
-  followers: Follower[];
-}
-
-export default function FollowerCollection(props: Props) {
   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>
   );
 }