increased number of item to show in pagination

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,11 +122,13 @@ export default function MainSection({
               )}
             </DataIteration>
           </div>
-        </div>
+        </div> */}
-        {/* {products?.length &&
+        {/* END OF OLD MARKET JOB LISTING */}
+
+        {products?.length ?
         <NewPaginatedList
             data={products}
-            itemsPerPage={6}
+            itemsPerPage={9}
             filterItem=''
             tableTitle='' 
         >
@@ -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>
   );

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>
     </>
   );

src/components/Pagination/NewPaginatedList.jsx

@@ -42,7 +42,11 @@ export default function NewPaginatedList({
       filteredData?.slice(currentPage, numberOfSelection + currentPage)
     );
   }, [currentPage, filteredData]);
-  console.log("newData", newData, filteredData);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
   return (
     <div className="w-full">
       <h1 className="text-2xl mb-5 font-semibold">{tableTitle}</h1>
@@ -89,6 +93,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

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");
       }
     };

src/store/jobLists.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  jobLists: {}
+  jobLists: {loading: true}
 };
 
 export const jobSlice = createSlice({