Fix followers pagination. Closes #2695

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -21,3 +21,7 @@
   width: 100%;
   background-color: var(--theme-color-components-content-background);
 }
+
+.pagination {
+  margin: 1rem;
+}

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

@@ -20,7 +20,7 @@ const mocks = {
       response: {
         status: 200,
         body: {
-          total: 10,
+          total: 100,
           results: [
             {
               link: 'https://sun.minuscule.space/users/mardijker',
@@ -175,14 +175,6 @@ const mocks = {
               timestamp: '2022-03-30T14:41:32Z',
               disabledAt: null,
             },
-            {
-              link: 'https://gamethattune.club/users/mork',
-              name: 'mork',
-              username: 'mork@gamethattune.club',
-              image: '',
-              timestamp: '2022-03-30T14:37:10Z',
-              disabledAt: null,
-            },
             {
               link: 'https://fosstodon.org/users/owncast',
               name: 'Owncast',

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

@@ -19,17 +19,16 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
 
-  const pages = Math.ceil(total / ITEMS_PER_PAGE);
-
   const getFollowers = async () => {
     try {
-      const response = await fetch(`${ENDPOINT}?page=${page}`);
+      const response = await fetch(`${ENDPOINT}?page=${page}&limit=${ITEMS_PER_PAGE}`);
 
       const data = await response.json();
       const { results, total: totalResults } = data;
 
       setFollowers(results);
       setTotal(totalResults);
+
       setLoading(false);
     } catch (error) {
       console.error(error);
@@ -78,9 +77,12 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
       </Row>
 
       <Pagination
+        className={styles.pagination}
         current={page}
         pageSize={ITEMS_PER_PAGE}
-        total={pages || 1}
+        defaultPageSize={ITEMS_PER_PAGE}
+        total={total}
+        showSizeChanger={false}
         onChange={p => {
           setPage(p);
         }}