From b1fb2561897a09f5c7c6390e9bb4e172d9f3c95b Mon Sep 17 00:00:00 2001
From: rishighan <rishi.ghan@gmail.com>
Date: Thu, 3 Nov 2022 12:47:31 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Streamlined=20search=20and=20pag?=
 =?UTF-8?q?ination=20controls=20on=20Library=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss             | 33 +++++++-------
 src/client/components/Library/Library.tsx   | 50 ++++++++++-----------
 src/client/components/Library/SearchBar.tsx |  2 +-
 3 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 5719a76..6ca5886 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -410,32 +410,33 @@ pre {
   }
 }
 // Library
-.sticky {
-  background: #fffffc;
-  position: sticky;
-  top: 40px;
-  z-index: 5;
-
-  .title {
-    background: #fffffc;
-    position: relative;
-    top: 0px;
-    z-index: 99999;
-    padding-top: 20px;
-  }
-}
 .header-area {
   width: 100%;
-  padding: 10px 0 15px 0;
+  padding: 25px 0 15px 0;
+  position: sticky;
+  background: #fffffc;
+  top: 50px;
 }
 
 .library {
+  .table-controls {
+    background: #fffffc;
+    justify-content: space-between;
+    position: sticky;
+    top: 126px;
+    padding-bottom: 10px;
+  }
+  .pagination {
+    margin: 0;
+    background: #fffffc;
+  }
+
   table {
     border-collapse: separate;
     width: 100%;
     thead {
       position: sticky;
-      top: 216px;
+      top: 250px;
       z-index: 1;
       background: #fffffc;
       min-height: 130px;
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index dda06f0..7c78402 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -8,7 +8,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 
-
 import {
   ColumnDef,
   flexRender,
@@ -63,8 +62,6 @@ export const Library = (): ReactElement => {
     const { columns, totalPages, rowClickHandler } =
       tableOptions;
 
-
-
     // pagination methods
     const goToNextPage = useCallback(() => {
       setPagination({
@@ -93,7 +90,7 @@ export const Library = (): ReactElement => {
       setPagination({
         pageIndex: pageIndex - 1,
         pageSize,
-      }); 
+      });
       let from = 0;
       if (pageIndex === 2) {
         from = (pageIndex - 1) * pageSize + 2 - 17;
@@ -117,9 +114,6 @@ export const Library = (): ReactElement => {
       );
     }, []);
 
-
-
-
     const table = useReactTable({
       data: searchResults.hits.hits,
       columns,
@@ -130,25 +124,32 @@ export const Library = (): ReactElement => {
         pagination,
       },
       onPaginationChange: setPagination,
-      // getPaginationRowModel: getPaginationRowModel(),
-
-      debugTable: true,
     });
 
     return (
       <>
-        {/* pagination control */}
-        <nav className="pagination">
-          {JSON.stringify(pagination)}
-          <div className="field has-addons">
-            <p className="control">
-              <div className="button" onClick={() => goToNextPage()}> Next Page </div>
-            </p>
-            <p className="control">
-              <div className="button" onClick={() => goToPreviousPage()}> Previous Page</div>
-            </p>
+        <div className="columns table-controls">
+          {/* Search bar */}
+          <div className="column is-half">
+            <SearchBar />
           </div>
-        </nav>
+          {/* pagination control */}
+          <nav className="pagination columns">
+            <div className="box is-size-6 mr-3 mt-2 has-text-weight-semibold has-text-left">
+              <p>Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
+              <p>{totalPages} comics in all</p>
+            </div>
+            <div className="field has-addons">
+
+              <p className="control">
+                <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
+              </p>
+              <p className="control">
+                <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
+              </p>
+            </div>
+          </nav>
+        </div>
         <table className="table is-hoverable">
           <thead>
             {table.getHeaderGroups().map((headerGroup, idx) => (
@@ -261,7 +262,7 @@ export const Library = (): ReactElement => {
             !isEmpty(info.getValue()) ? (
               <ComicInfoXML data={info.getValue()} />
             ) : (
-              <span className="tag">No ComicInfo.xml</span>
+              <span className="tag mt-5">No ComicInfo.xml</span>
             ),
         },
       ],
@@ -303,11 +304,8 @@ export const Library = (): ReactElement => {
   return (
     <section className="container">
       <div className="section">
-        <div className="header-area sticky">
+        <div className="header-area">
           <h1 className="title">Library</h1>
-          {/* Search bar */}
-          <SearchBar />
-
         </div>
         {!isUndefined(searchResults.hits) && (
           <div>
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index 39d2190..6b133f0 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -27,7 +27,7 @@ export const SearchBar = (): ReactElement => {
     );
   }, []);
   return (
-    <div className="sticky box column is-half">
+    <div className="box">
       <Form
         onSubmit={handleSubmit}
         initialValues={{}}