From 2dd50776f6d0cb646aeecc1225b728c99e99a613 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 10 Sep 2021 10:29:15 +0800
Subject: [PATCH] Paginate blocklists

6834
---
 ui/component/blockList/view.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/ui/component/blockList/view.jsx b/ui/component/blockList/view.jsx
index a4182a300..8f692827a 100644
--- a/ui/component/blockList/view.jsx
+++ b/ui/component/blockList/view.jsx
@@ -3,8 +3,11 @@ import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
+import Paginate from 'component/common/paginate';
 import Yrbl from 'component/yrbl';
 
+const PAGE_SIZE = 10;
+
 type Props = {
   uris: Array<string>,
   help: string,
@@ -23,6 +26,15 @@ export default function BlockList(props: Props) {
   const hasLocalList = localList && localList.length > 0;
   const justBlocked = list && localList && localList.length < list.length;
 
+  const [page, setPage] = React.useState(1);
+
+  let totalPages = 0;
+  let paginatedLocalList;
+  if (localList) {
+    paginatedLocalList = localList.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+    totalPages = Math.ceil(localList.length / PAGE_SIZE);
+  }
+
   // **************************************************************************
   // **************************************************************************
 
@@ -52,7 +64,7 @@ export default function BlockList(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
-  if (localList === undefined) {
+  if (paginatedLocalList === undefined) {
     return null;
   }
 
@@ -76,8 +88,15 @@ export default function BlockList(props: Props) {
     <>
       <div className="help--notice">{help}</div>
       <div className={classnames('block-list', className)}>
-        <ClaimList uris={localList} showUnresolvedClaims showHiddenByUser hideMenu renderActions={getRenderActions()} />
+        <ClaimList
+          uris={paginatedLocalList}
+          showUnresolvedClaims
+          showHiddenByUser
+          hideMenu
+          renderActions={getRenderActions()}
+        />
       </div>
+      <Paginate totalPages={totalPages} disableHistory onPageChange={(p) => setPage(p)} />
     </>
   );
 }