From 8943be9bf9fc411a10be94612e29da05a85edce0 Mon Sep 17 00:00:00 2001
From: Gabe Kangas
Date: Mon, 24 Jan 2022 14:24:43 -0800
Subject: [PATCH] Add pagination + update layout of followers
---
webroot/js/components/federation/followers.js | 59 ++++++++++++++++---
webroot/js/utils/helpers.js | 14 +++++
webroot/styles/app.css | 3 +-
3 files changed, 67 insertions(+), 9 deletions(-)
diff --git a/webroot/js/components/federation/followers.js b/webroot/js/components/federation/followers.js
index 522899f82..fb1fac7b7 100644
--- a/webroot/js/components/federation/followers.js
+++ b/webroot/js/components/federation/followers.js
@@ -2,13 +2,14 @@ import { h, Component } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
import { URL_FOLLOWERS } from '/js/utils/constants.js';
const html = htm.bind(h);
-
+import { paginateArray } from '../../utils/helpers.js';
export default class FollowerList extends Component {
constructor(props) {
super(props);
this.state = {
followers: [],
+ followersPage: 0,
};
}
@@ -24,10 +25,19 @@ export default class FollowerList extends Component {
const response = await fetch(URL_FOLLOWERS);
const followers = await response.json();
- this.setState({ followers: followers });
+ this.setState({
+ followers: followers,
+ });
+ }
+
+ changeFollowersPage(page) {
+ this.setState({ followersPage: page });
}
render() {
+ const FOLLOWER_PAGE_SIZE = 15;
+ const { followersPage } = this.state;
+
const { followers } = this.state;
if (!followers) {
return null;
@@ -47,12 +57,45 @@ export default class FollowerList extends Component {
`;
+ const paginatedFollowers = paginateArray(
+ followers,
+ followersPage + 1,
+ FOLLOWER_PAGE_SIZE
+ );
+
+ const paginationControls =
+ paginatedFollowers.totalPages > 1 &&
+ Array(paginatedFollowers.totalPages)
+ .fill()
+ .map((x, n) => {
+ const activePageClass =
+ n === followersPage &&
+ 'bg-indigo-600 rounded-full shadow-md focus:shadow-md text-white';
+ return html`
+ this.changeFollowersPage(n)}
+ >
+ ${n + 1}
+
+ `;
+ });
+
return html`
-
- ${followers.length === 0 && noFollowersInfo}
- ${followers.map((follower) => {
- return html` <${SingleFollower} user=${follower} /> `;
- })}
+
+
+ ${followers.length === 0 && noFollowersInfo}
+ ${paginatedFollowers.items.map((follower) => {
+ return html` <${SingleFollower} user=${follower} /> `;
+ })}
+
+
+
+
`;
}
@@ -71,7 +114,7 @@ function SingleFollower(props) {
return html`
page ? page + 1 : null,
+ total: items.length,
+ totalPages: totalPages,
+ items: paginatedItems,
+ };
+}
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 4ab87e826..1723c36a0 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -491,7 +491,7 @@ header {
}
.following-list-follower {
- max-width: 280px;
+ width: 280px;
}
#follow-loading-spinner-container {
@@ -511,3 +511,4 @@ header {
width: 100px;
height: 100px;
}
+