diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss index 8b0bca411..f4aaa1dee 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss +++ b/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; +} diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx index 03e4cc333..eda0c5911 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx +++ b/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', diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx index 1d3ccadaa..5fe8772c3 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx +++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx @@ -19,17 +19,16 @@ export const FollowerCollection: FC = ({ 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 = ({ name, onFollow { setPage(p); }}