From f036fe0684c7cc2f12724814a6a6803504a571a5 Mon Sep 17 00:00:00 2001
From: Midhun G S <gsmithun4@gmail.com>
Date: Sat, 11 Dec 2021 04:40:19 +0530
Subject: [PATCH] [Bug Fix #1521] Home Page Pagination (#1558)

* Bug Fix #1521 - Pagination

* bugFix-1521 changed pagination design
---
 frontend/src/HomePage/HomePage.jsx      | 14 ++--
 frontend/src/_components/Pagination.jsx | 95 ++++++++++++++++++++-----
 2 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 2ed7f658bc..2abcd88271 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -36,10 +36,11 @@ class HomePage extends React.Component {
     this.fetchFolders();
   }
 
-  fetchApps = (page, folder) => {
+  fetchApps = (page = 1, folder) => {
     this.setState({
       apps: [],
       isLoading: true,
+      currentPage: page,
     });
 
     appService.getAll(page, folder).then((data) =>
@@ -65,7 +66,6 @@ class HomePage extends React.Component {
   };
 
   pageChanged = (page) => {
-    this.setState({ currentPage: page });
     this.fetchApps(page, this.state.currentFolder.id);
   };
 
@@ -274,7 +274,14 @@ class HomePage extends React.Component {
           hideProgressBar: true,
           position: 'top-center',
         });
-        this.fetchApps(this.state.currentPage || 1, this.state.currentFolder.id);
+        this.fetchApps(
+          this.state.currentPage
+            ? this.state.apps?.length === 1
+              ? this.state.currentPage - 1
+              : this.state.currentPage
+            : 1,
+          this.state.currentFolder.id
+        );
         this.fetchFolders();
       })
       .catch(({ error }) => {
@@ -396,7 +403,6 @@ class HomePage extends React.Component {
                       <Pagination
                         currentPage={meta.current_page}
                         count={this.pageCount()}
-                        totalPages={meta.total_pages}
                         pageChanged={this.pageChanged}
                       />
                     )}
diff --git a/frontend/src/_components/Pagination.jsx b/frontend/src/_components/Pagination.jsx
index f24f09e435..1f8344fd6b 100644
--- a/frontend/src/_components/Pagination.jsx
+++ b/frontend/src/_components/Pagination.jsx
@@ -1,18 +1,38 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-export const Pagination = function Pagination({ currentPage, count, totalPages, pageChanged }) {
-  function renderPageItem(i) {
-    return (
-      <li onClick={() => gotoPage(i + 1)} className={`page-item ${currentPage === i + 1 ? 'active' : ''}`}>
-        <a className="page-link">{i + 1}</a>
-      </li>
-    );
-  }
+export const Pagination = function Pagination({ currentPage, count, pageChanged, itemsPerPage = 10 }) {
+  const totalPages = useMemo(() => {
+    return Math.floor((count - 1) / itemsPerPage) + 1;
+  }, [count, itemsPerPage]);
+
+  const getPageLinks = (index) => {
+    if (index < 1 || index > totalPages) {
+      return;
+    } else {
+      return (
+        <li
+          key={index}
+          onClick={() => gotoPage(index)}
+          className={`page-item ${currentPage === index ? 'active' : ''}`}
+        >
+          <a className="page-link">{index}</a>
+        </li>
+      );
+    }
+  };
 
   function gotoPage(page) {
     pageChanged(page);
   }
 
+  function gotoFirstPage() {
+    pageChanged(1);
+  }
+
+  function gotoLastPage() {
+    pageChanged(totalPages);
+  }
+
   function gotoNextPage() {
     gotoPage(currentPage + 1);
   }
@@ -21,23 +41,42 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
     gotoPage(currentPage - 1);
   }
 
-  function startingAppCount(currentPage) {
-    return (currentPage - 1) * 10 + 1;
+  function startingAppCount() {
+    return (currentPage - 1) * itemsPerPage + 1;
   }
 
-  function endingAppCount(currentPage, totalCount) {
-    const num = currentPage * 10;
+  function endingAppCount() {
+    const num = currentPage * itemsPerPage;
 
-    return num > totalCount ? totalCount : num;
+    return num > count ? count : num;
   }
 
   return (
     <div className="card-footer d-flex align-items-center px-1">
       <p className="m-0 text-muted">
-        Showing <span>{startingAppCount(currentPage)}</span> to <span>{endingAppCount(currentPage, count)}</span> of{' '}
-        <span>{count}</span>
+        Showing <span>{startingAppCount()}</span> to <span>{endingAppCount()}</span> of <span>{count}</span>
       </p>
       <ul className="pagination m-0 ms-auto">
+        <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
+          <a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoFirstPage}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              stroke="currentColor"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <polyline points="11 7 6 12 11 17" />
+              <polyline points="17 7 12 12 17 17" />
+            </svg>
+          </a>
+        </li>
         <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
           <a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoPreviousPage}>
             <svg
@@ -57,7 +96,9 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
             </svg>
           </a>
         </li>
-        {Array.from(Array(totalPages).keys()).map((i) => renderPageItem(i))}
+        {getPageLinks(currentPage - 1)}
+        {getPageLinks(currentPage)}
+        {getPageLinks(currentPage + 1)}
         <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
           <a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoNextPage}>
             <svg
@@ -77,6 +118,26 @@ export const Pagination = function Pagination({ currentPage, count, totalPages,
             </svg>
           </a>
         </li>
+        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
+          <a style={{ cursor: 'pointer' }} className="page-link" onClick={gotoLastPage}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              stroke="currentColor"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <polyline points="7 7 12 12 7 17" />
+              <polyline points="13 7 18 12 13 17" />
+            </svg>
+          </a>
+        </li>
       </ul>
     </div>
   );