Merge branch 'pagination-familylist' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyTable.jsx

@@ -2,19 +2,32 @@ import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
 export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   const navigate = useNavigate();
   // let location = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
         className || ""
       }`}
     >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
         {loader ? (
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
@@ -30,10 +43,10 @@ export default function FamilyTable({ className, familyList, loader }) {
                   <th className="py-4 text-right"></th>
                 </tr>
               </thead>
-              <tbody className="overflow-y-scroll h-auto">
+              <tbody className="h-full">
                 <>
                   {familyList?.length > 0 ? (
-                    familyList?.map((props, idx) => {
+                    currentFamilyList?.map((props, idx) => {
                       let {
                         firstname,
                         lastname,
@@ -115,6 +128,21 @@ export default function FamilyTable({ className, familyList, loader }) {
           </table>
         )}
       </div>
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          familyList?.length
+            ? true
+            : false
+        }
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
     </div>
   );
 }

src/store/UserDetails.js

@@ -8,8 +8,8 @@ export const userSlice = createSlice({
   name: "userDetails",
   initialState,
   reducers: {
-    updateUserDetails: (state,payload) => {
-      state.userDetails = {...payload.payload}
+    updateUserDetails: (state,action) => {
+      state.userDetails = {...action.payload}
     },
   },
 });

src/store/jobLists.js

@@ -8,8 +8,8 @@ export const jobSlice = createSlice({
   name: "jobLists",
   initialState,
   reducers: {
-    updateJobs: (state, payload) => {
-      state.jobLists = { ...payload.payload };
+    updateJobs: (state, action) => {
+      state.jobLists = { ...action.payload };
     },
   },
 });