merged branch with master, offer interest refresh fixed

src/components/Contexts/SocketIOContext.js

@@ -78,11 +78,12 @@ export default function SocketIOContextProvider({children}) {
         });
 
         socket.on("marketjob_actions", (data) => { // Triggers refresh on owner side, when somebody sends/shows interest in a job 
-            // let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid') // gets user UID
+            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid') // gets user UID
             let {message} = data
-            if(message.action == "REFRESH_OFFERS" && message.audience == "MERCHANT"){  // for refreshing job owner offer interest list when any worker sends interest
+            if(message.action == "REFRESH_OFFERS" && message.audience == "MERCHANT" && message.market_uid == user_uid){  // for refreshing job owner offer interest list when any worker sends interest
                 dispatch(tableReload({type:'OFFERINTERESTLISTRELOAD'}))
             }
+            console.log('data', data)
         });
 
     }, [socket]);

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyManageTabs from "./FamilyManageTabs";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
@@ -34,7 +35,7 @@ export default function FamilyManage() {
         <div className="notification-page w-full mb-10">
           <div className="notification-wrapper w-full">
             {/* heading */}
-            <div className="sm:flex justify-between items-center mb-6">
+            {/* <div className="sm:flex justify-between items-center mb-6">
               <div className="mb-5 sm:mb-0">
                 <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                   <span
@@ -50,6 +51,40 @@ export default function FamilyManage() {
                   className="relative"
                 ></div>
               </div>
+            </div> */}
+            <div className="w-full mb-5 flex justify-between items-center">
+              <div className="">
+                  <CustomBreadcrumb 
+                  title = {'Manage Family'}
+                  breadcrumb={
+                      [
+                      { link: "/", title: "Home" },
+                      { link: "/manage-family", title: "Manage Family", active: true},
+                      ]
+                  }
+                  />
+              </div>
+              <Link
+                className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+                to="/acc-family"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-4 h-4"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+                  />
+                </svg>
+
+              <span>Family</span>
+            </Link>
             </div>
             <FamilyManageTabs accountDetails={accountDetails} />
           </div>

src/components/Helpers/DataIteration.jsx

@@ -7,7 +7,7 @@ function DataIteration(props) {
       {datas &&
         datas?.length >= endLength &&
         datas?.slice(startLength, endLength)
-          .map((value) => children({ datas: value }))}
+          .map((value, index) => children({ datas: value, index }))}
     </>
   );
 }

src/components/MarketPlace/MainSection.jsx

@@ -109,8 +109,8 @@ export default function MainSection({
               startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
-              {({ datas }) => (
+              {({ datas, index }) => (
-                <div key={datas.job_uid}>
+                <div key={datas.job_uid+index}>
                   <AvailableJobsCard
                     contentDisplay={contentDisplay}
                     image_server={image_server}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -16,6 +16,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       "offer_code": details?.offer_code,
       "offer_uid": details?.offer_uid,
       "job_uid": details?.job_uid,
+      "market_uid": details?.market_uid
     }
     let room = `INTEREST-${details?.market_uid}`
     sendJobInterestToOwner(message, room)

src/components/Pagination/NewPaginatedList.jsx

@@ -74,27 +74,45 @@ export default function NewPaginatedList({
       {/* show prev and next button if data exist */}
       {data.length > 0 && (
         <div className="mt-10 w-full flex gap-4 justify-center items-center">
-          <button
+        <button
-            onClick={handlePrev}
+          onClick={handlePrev}
-            className={`w-12 h-12 rounded-full flex justify-center items-center border ${
+          className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
-              currentPage == 0
+            currentPage == 0
-                ? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
-                : "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
-            } transition-all duration-500`}
+          }`}
-          >
+        >
-            &lt;
+          &lt;
-          </button>
+        </button>
-          <button
+
-            onClick={handleNext}
+        {data.length && data.map((item, index)=>{
-            className={`w-12 h-12 rounded-full flex justify-center items-center border ${
+          if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
-              currentPage + numberOfSelection >= data.length
+            return (
-                ? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              <button
-                : "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
+                onClick={handleNext}
-            } transition-all duration-500`}
+                className={`w-12 h-12 rounded-full flex justify-center items-center border transition-all duration-300 ${
-          >
+                  currentPage != index
-            &gt;
+                    ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
-          </button>
+                    : "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
-        </div>
+                }`}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })}
+
+        <button
+          onClick={handleNext}
+          className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
+            currentPage + numberOfSelection >= data.length
+              ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
+              : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
+          }`}
+        >
+          &gt;
+        </button>
+      </div>
       )}
     </div>
   );