From 48a50fd47c5a43e6c233afbbd442ade8f9aa75b8 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 23 Mar 2024 20:06:30 +0100
Subject: [PATCH] added pagination for market list

---
 src/components/MarketPlace/MainSection.jsx     | 16 ++++++++++++----
 src/components/MarketPlace/index.jsx           |  7 +++++++
 src/components/Pagination/NewPaginatedList.jsx |  3 ++-
 src/middleware/AuthRoute.jsx                   |  3 ++-
 src/store/jobLists.js                          |  2 +-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index 46d74bb..db8dc29 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -96,7 +96,9 @@ export default function MainSection({
           </div>
           {/* end of contentDisplay toggler */}
         </div>
-        <div className="filter-navigate-content w-full min-h-screen">
+
+        {/* OLD MARKET JOB LISTING */}
+        {/* <div className="filter-navigate-content w-full min-h-screen">
           <div
             className={
               contentDisplay == "grid"
@@ -120,8 +122,10 @@ export default function MainSection({
               )}
             </DataIteration>
           </div>
-        </div>
-        {/* {products?.length &&
+        </div> */}
+        {/* END OF OLD MARKET JOB LISTING */}
+
+        {products?.length ?
         <NewPaginatedList
             data={products}
             itemsPerPage={6}
@@ -154,7 +158,11 @@ export default function MainSection({
             )
           }
         </NewPaginatedList>
-        } */}
+        :
+        <div className="w-full h-[40rem] bg-white dark:bg-dark-white flex justify-center items-center">
+          No Jobs Found!
+        </div>
+        }
       </div>
     </div>
   );
diff --git a/src/components/MarketPlace/index.jsx b/src/components/MarketPlace/index.jsx
index e29c0ad..c017cf6 100644
--- a/src/components/MarketPlace/index.jsx
+++ b/src/components/MarketPlace/index.jsx
@@ -3,6 +3,7 @@ import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MainSection from "./MainSection";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
@@ -25,12 +26,18 @@ export default function MarketPlace({ commonHeadData }) {
             }
             />
         </div>
+        {jobLists.loading ?
+        <div className="w-full flex justify-center items-center bg-white dark:bg-dark-white">
+          <LoadingSpinner size='20' height='h-[40rem]' />
+        </div>
+        :
         <MainSection
           marketPlaceProduct={marketData}
           categories={categories}
           image_server={image_server}
           className="mb-10"
         />
+        }
       </Layout>
     </>
   );
diff --git a/src/components/Pagination/NewPaginatedList.jsx b/src/components/Pagination/NewPaginatedList.jsx
index ec9a057..8a06307 100644
--- a/src/components/Pagination/NewPaginatedList.jsx
+++ b/src/components/Pagination/NewPaginatedList.jsx
@@ -42,7 +42,7 @@ export default function NewPaginatedList({
       filteredData?.slice(currentPage, numberOfSelection + currentPage)
     );
   }, [currentPage, filteredData]);
-  console.log("newData", newData, filteredData);
+
   return (
     <div className="w-full">
       <h1 className="text-2xl mb-5 font-semibold">{tableTitle}</h1>
@@ -89,6 +89,7 @@ export default function NewPaginatedList({
           if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
             return (
               <button
+                key={index}
                 onClick={handleNext}
                 className={`w-12 h-12 rounded-full flex justify-center items-center border transition-all duration-300 ${
                   currentPage != index
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx
index 535c535..9d3c7c1 100644
--- a/src/middleware/AuthRoute.jsx
+++ b/src/middleware/AuthRoute.jsx
@@ -219,8 +219,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     const getMarketActiveJobList = async () => {
       try {
         const res = await apiCall.getActiveJobList();
-        dispatch(updateJobs(res.data));
+        dispatch(updateJobs({loading: false, ...res.data}));
       } catch (error) {
+        dispatch(updateJobs({loading: false}));
         console.log("Error getting mode");
       }
     };
diff --git a/src/store/jobLists.js b/src/store/jobLists.js
index 282edaa..9ad7ac7 100644
--- a/src/store/jobLists.js
+++ b/src/store/jobLists.js
@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  jobLists: {}
+  jobLists: {loading: true}
 };
 
 export const jobSlice = createSlice({
-- 
2.34.1