src/components/Contexts/SocketIOContext.js

@@ -30,11 +30,21 @@ export default function SocketIOContextProvider({children}) {
         }
     };
 
+    const marketUpdate = (message, room) => {
+        if(message && room){
+            socket.emit("marketjob_addded", { message, room });
+        }
+    };
+
     useEffect(() => {
         socket.on("receive_message", (data) => {
             // setSocketMsgReceived(data.message);
             dispatch(tableReload({type:'CHATMESSAGELIST'}))
         });
+        socket.on("received_refreshmarket_jobs", (data) => {
+            // setSocketMsgReceived(data.message);
+            dispatch(tableReload({type:'MARKETTABLELIST'}))
+        });
     }, [socket]);
 
     let values = {
@@ -43,6 +53,7 @@ export default function SocketIOContextProvider({children}) {
         joinRoom,
         setSocketMsgReceived,
         socketMsgReceived,
+        marketUpdate,
         // room,
         // setRoom,
         // message,

src/components/jobPopout/JobListPopout.jsx

@@ -8,6 +8,7 @@ import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import { SocketValues } from "../Contexts/SocketIOContext";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -29,6 +30,9 @@ function JobListPopout({
   openWallet,
   setWalletItem,
 }) {
+
+  let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const [selectedTab, setSelectedTab] = useState("public");
   const tabs = ["public", "individual", "group"];
 
@@ -201,7 +205,9 @@ function JobListPopout({
           setRequestStatus({ message: "", status: false });
         }, 3000);
       }
-      dispatch(tableReload({ type: "JOBTABLE" }));
+      marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
+      dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
       setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
       setTimeout(() => {
         setLoader({ jobFields: false });
@@ -224,6 +230,12 @@ function JobListPopout({
     members: [],
   });
 
+  const DetailsSection = ({ label, value }) => (
+    <div className="my-3 md:flex">
+      <Detail label={label} value={value} />
+    </div>
+  );
+
   // FUNCTION TO POPULATE USER GROUP LIST
   useEffect(() => {
     // setGroupList({loading: true, groups: [], members: []})
@@ -250,12 +262,6 @@ function JobListPopout({
       });
   }, []);
 
-  const DetailsSection = ({ label, value }) => (
-    <div className="my-3 md:flex">
-      <Detail label={label} value={value} />
-    </div>
-  );
-
   const DetailsComponent = () => {
     const detailsArray = [
       { label: "Description", value: details.description },

src/middleware/AuthRoute.jsx

@@ -14,8 +14,12 @@ import { updateWalletDetails } from "../store/walletDetails";
 import { familyBannersList } from "../store/FamilyBannerList";
 import { familyResources } from "../store/FamilyResources";
 import {familyWalletRedeemOptList} from '../store/FamilyWalletRedeemOpt'
+import { SocketValues } from "../components/Contexts/SocketIOContext";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+
+  let {joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const apiCall = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
@@ -23,7 +27,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
@@ -219,7 +223,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable, isLogin.status]);
+  }, [apiCall, dispatch, marketTableList, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
@@ -309,6 +313,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     familyWalletRedeemOptions()
   }, [isLogin.status]);
 
+  useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update when jobs enters the market
+      joinRoom('full-markets-jobs')
+  },[isLogin.status])
+
 
   // RENDER PAGE
   return isLogin.loading && !loggedIn ? (

src/store/TableReloads.js

@@ -10,6 +10,7 @@ const initialState = {
   uploadsTable: false,
   familyBannersListTable: false,
   chatMessageList: false,
+  marketTableList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -45,6 +46,9 @@ export const tableReloadSlice = createSlice({
         case "CHATMESSAGELIST":
           state.chatMessageList = !state.chatMessageList;
           return;
+        case "MARKETTABLELIST":
+          state.marketTableList = !state.marketTableList;
+          return;
         default:
           return state;
       }