From b10ac581f515fbaf6e88fc6fb33a940172a8cbc3 Mon Sep 17 00:00:00 2001
From: Prakhar <prakharb56@gmail.com>
Date: Sat, 4 Nov 2023 05:08:26 +0530
Subject: [PATCH] indexing in UI

---
 .env.example                                |  2 +-
 src/components/displayTable/DataDisplay.tsx | 18 +++++++++++-------
 src/components/displayTable/Row.tsx         | 16 ++++++++++++++--
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/.env.example b/.env.example
index 774590a..a35b9e2 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1 @@
-NEXT_PUBLIC_DB_URL = ""
+NEXT_PUBLIC_DB_URL = "https://localhost:3000"
diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx
index 1ac2286..d1ec865 100644
--- a/src/components/displayTable/DataDisplay.tsx
+++ b/src/components/displayTable/DataDisplay.tsx
@@ -42,14 +42,19 @@ const DataDisplay: React.FC = () => {
               .slice()
               .reverse()
               .map((row, i) => (
-                <TableRow row={row} index={i} key={i} />
+                <TableRow
+                  row={row}
+                  index={i}
+                  key={i}
+                  currentPage={currentPage}
+                  itemsPerPage={itemsPerPage}
+                />
               ))}
           </tbody>
         </table>
         <ReactPaginate
-          previousLabel={"previous"}
-          nextLabel={"next"}
-          breakLabel={"..."}
+          previousLabel={"Previous"}
+          nextLabel={"Next"}
           breakClassName={"break-me px-2 py-1"}
           marginPagesDisplayed={0}
           pageRangeDisplayed={0}
@@ -58,16 +63,15 @@ const DataDisplay: React.FC = () => {
             setCurrentPage(selected);
           }}
           containerClassName={
-            "pagination flex flex-wrap justify-center items-center my-4"
+            "pagination flex flex-wrap justify-between items-center my-4"
           }
-          pageClassName={"mx-1"}
+          pageClassName={"mx-1 hidden"}
           previousClassName={
             "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover: bg-[#B52326]"
           }
           nextClassName={
             "mx-1  bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover:bg- bg-[#B52326]"
           }
-          activeClassName={" bg-[#B52326] text-white rounded px-3 py-2"}
           disabledClassName={"opacity-50 cursor-not-allowed"}
         />
       </div>
diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx
index 867f2ea..7e66ef0 100644
--- a/src/components/displayTable/Row.tsx
+++ b/src/components/displayTable/Row.tsx
@@ -4,7 +4,17 @@ import { Copy, Edit, Link, Trash2 } from "react-feather";
 import { RowType } from "@/types/types";
 import { DbTypes } from "@/types/ResponseTypes";
 
-const TableRow = ({ row, index }: { row: DbTypes; index: number }) => {
+const TableRow = ({
+  row,
+  index,
+  currentPage,
+  itemsPerPage,
+}: {
+  row: DbTypes;
+  index: number;
+  currentPage: number;
+  itemsPerPage: number;
+}) => {
   const [isExpand, setIsExpand] = useState<boolean>(false);
   const {
     meta_data,
@@ -34,10 +44,12 @@ const TableRow = ({ row, index }: { row: DbTypes; index: number }) => {
   const startTime = new Date(start_time!).toLocaleTimeString();
   const endTime = new Date(end_time!).toLocaleTimeString();
 
+  const actualIndex = currentPage * itemsPerPage + index + 1;
+
   return (
     <>
       <tr className="border text-center" onClick={() => setIsExpand(!isExpand)}>
-        <td className="border p-2">{index}</td>
+        <td className="border p-2">{actualIndex}</td>
         <td className="border p-2">{batch}</td>
         <td className="border p-2">{name}</td>
         <td className="border p-2">{startDate}</td>