From 3ddda04e78d065314c68ec7851dd508c7020b455 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 10 Mar 2022 18:07:56 +0100
Subject: [PATCH] feat(ui) - pagination debounce the request

---
 .../BugFinder/SessionList/SessionList.js      |  1 +
 .../components/ui/Pagination/Pagination.tsx   | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js
index a58d483ae..5a76dcffa 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@@ -135,6 +135,7 @@ export default class SessionList extends React.PureComponent {
             page={currentPage}
             totalPages={Math.ceil(total / PER_PAGE)}
             onPageChange={(page) => this.props.updateCurrentPage(page)}
+            limit={PER_PAGE}
           />
         </div>
         {/* <LoadMoreButton
diff --git a/frontend/app/components/ui/Pagination/Pagination.tsx b/frontend/app/components/ui/Pagination/Pagination.tsx
index 5e1b422d3..4a8e3f1d5 100644
--- a/frontend/app/components/ui/Pagination/Pagination.tsx
+++ b/frontend/app/components/ui/Pagination/Pagination.tsx
@@ -1,37 +1,40 @@
 import React from 'react'
 import { Icon } from 'UI'
 import cn from 'classnames'
-
+import { debounce } from 'App/utils';
 interface Props {
     page: number
     totalPages: number
     onPageChange: (page: number) => void
-    limit?: number 
+    limit?: number
 }
 export default function Pagination(props: Props) {
     const { page, totalPages, onPageChange, limit = 5 } = props;
-    
     const [currentPage, setCurrentPage] = React.useState(page);
     React.useMemo(
         () => setCurrentPage(page), 
         [page],
     );
 
+    const debounceChange = React.useCallback(debounce(onPageChange, 1000), []);
+
     const changePage = (page: number) => {
         if (page > 0 && page <= totalPages) {
-            onPageChange(page);
             setCurrentPage(page);
+            debounceChange(page);
         }
     }
-
+    
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === totalPages;
     return (
         <div className="flex items-center">
             <button
-                className={cn("py-2 px-3", { "opacity-50 cursor-default": page === 1 })}
-                disabled={page === 1}
-                onClick={() => changePage(page - 1)}
+                className={cn("py-2 px-3", { "opacity-50 cursor-default": isFirstPage })}
+                disabled={isFirstPage}
+                onClick={() => changePage(currentPage - 1)}
             >
-                <Icon name="chevron-left" size="18" color={page === 1 ? 'gray-medium' : 'teal'} />
+                <Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
             </button>
             <span className="mr-2 color-gray-medium">Page</span>
             <input
@@ -45,11 +48,11 @@ export default function Pagination(props: Props) {
             <span className="mx-3 color-gray-medium">of</span>
             <span >{totalPages}</span>
             <button
-                className={cn("py-2 px-3", { "opacity-50 cursor-default": page === totalPages })}
-                disabled={page === totalPages}
-                onClick={() => changePage(page + 1)}
+                className={cn("py-2 px-3", { "opacity-50 cursor-default": isLastPage })}
+                disabled={isLastPage}
+                onClick={() => changePage(currentPage + 1)}
             >
-                <Icon name="chevron-right" size="18" color={page === totalPages ? 'gray-medium' : 'teal'} />
+                <Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
             </button>
         </div>
     )