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 20:38:52 +02:00
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { Col, Pagination, Row } from 'antd';
+import { Follower } from '../../../../interfaces/follower';
+import SingleFollower from '../SingleFollower/SingleFollower';
+import s from '../SingleFollower/SingleFollower.module.scss';
+
+export default function FollowerCollection() {
+  const ENDPOINT = '/api/followers';
+  const ITEMS_PER_PAGE = 24;
+
+  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>
+  );
+
+  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>
+
+      <Pagination
+        current={page}
+        pageSize={ITEMS_PER_PAGE}
+        total={pages || 1}
+        onChange={p => {
+          setPage(p);
+        }}
+        hideOnSinglePage
+      />
+    </div>
+  );
+}