list pagination implemented

2023-05-07 18:42:39 +01:00
parent 26258b0700
commit c17f933537
15 changed files with 1078 additions and 93 deletions
@@ -0,0 +1,17 @@
+
+
+export const handlePagingFunc = ({target:{name, value}},setCurrentPage) => {
+    if(name == 'prev'){
+      setCurrentPage((prev)=>{
+        return prev-Number(process.env.REACT_APP_ITEM_PER_PAGE)
+      })
+    }
+    if(name == 'next'){
+      setCurrentPage((prev)=>{
+        return prev+Number(process.env.REACT_APP_ITEM_PER_PAGE)
+      }) 
+    }
+    if(name == 'page_num'){
+      setCurrentPage(Number(value))
+    }
+  }
@@ -0,0 +1,51 @@
+import React from 'react';
+import { createRoutesFromChildren } from 'react-router-dom';
+
+const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+
+  return (
+    <div className='p-3 flex justify-center items-center space-x-2'>
+      {/* Render pagination buttons */}
+        {!prev &&
+            <button
+              className={`p-2 ${prev ? 'border' : null}`}
+              name='prev'
+              onClick={onClick}
+            >
+              <>&lt;</>
+            </button>
+          }
+
+          {
+            data.map((item, index)=>{
+                if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){
+                return (
+                  <button
+                    key={index}
+                    value={index}
+                    className={`p-2 ${index==start ? 'border' : null}`}
+                    onClick={onClick}
+                    name='page_num'
+                    disabled={index == start}
+                  >
+                    {index <= 0 ? index+1 : (index/process.env.REACT_APP_ITEM_PER_PAGE)+1}
+                  </button>
+                )
+              }
+            })
+          }
+          
+          {!next &&
+            <button
+              className={`p-2 ${next ? 'border' : null}`}
+              name='next'
+              onClick={onClick}
+            >
+              <>&gt;</>
+            </button>
+          }
+      </div>
+  );
+};
+
+export default PaginatedList;