changed the value of REACT_APP_PRIMARY_SOCKET in env production file

.env

@@ -20,3 +20,6 @@ REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria
 
 #AGENT LINK
 REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

.env.development

@@ -20,3 +20,6 @@ REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria
 
 #AGENT LINK
 REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

.env.production

@@ -20,3 +20,6 @@ REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria
 
 #AGENT LINK
 REACT_APP_AGENT_LINK='https://agents.wrenchboard.com'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

package.json

@@ -16,6 +16,7 @@
     "react-slick": "^0.28.1",
     "simple-react-lightbox": "^3.6.9-0",
     "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.4.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,18 @@
+import { useEffect } from 'react';
 import Routes from './Routes';
 import { Redirect, useLocation } from 'react-router-dom';
 
+import { SocketValues } from './Contexts/SocketIOContext';
+
 function App() {
+    let { joinRoom } = SocketValues() // function to join market room, to be able to receive market job post update
+
     const {pathname} = useLocation()
 
+    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')
+    },[])
+
     return (
         <>
         {pathname.startsWith('/@') ? 

src/Contexts/SocketIOContext.js

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+
+import io from "socket.io-client";
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+
+    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
+
+    // //Room State
+    // const [room, setRoom] = useState("");
+
+    // // Messages States
+    // const [message, setMessage] = useState("");
+    const [socketMsgReceived, setSocketMsgReceived] = useState({type:'', msg:''});
+
+    const joinRoom = (room) => {
+        if (room !== "") {
+        socket.emit("join_room", room);
+        }
+    };
+    
+    useEffect(() => {
+        socket.on("received_refreshmarket_jobs", (data) => {
+            setSocketMsgReceived({type: 'market', msg: data?.message});
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        joinRoom,
+        setSocketMsgReceived,
+        socketMsgReceived,
+    }
+
+  return (
+    <SocketIOContext.Provider value={values}>
+        {children}
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketValues = () => {
+    return useContext(SocketIOContext)
+}

src/components/HomeOne/CurrentJobsHero.js

@@ -1,29 +1,24 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import blogOne from '../../assets/images/blog-1.jpg';
 import blogTwo from '../../assets/images/blog-2.jpg';
 import blogThree from '../../assets/images/blog-3.jpg';
 import JobsData from '../../Services/JobsData';
 import getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
+import { SocketValues } from '../../Contexts/SocketIOContext';
 
-class CurrentJobsHero extends Component {
+let CurrentJobsHero = () => {
 
-    constructor() {
+  let {socketMsgReceived} = SocketValues() // destructure FROM SOCKET
-        //  debugger;
-        super();
-        this.state = { jobsDataResults: [] };
-    }
 
-    async componentDidMount(){
-        //  debugger;
-        JobsData().then(res => {
-            this.setState({jobsDataResults:res.data.result_list});
-        }).catch(err => {
-            console.log('startjoblist error', err)
-        })
-    }
 
-    titleLen(title){
+    var site = getConfig()[0];
+
+    var dashUrl = process.env.REACT_APP_DASH_URL;
+
+    let [jobs, setJobs] = useState([])
+
+    function titleLen(title){
         let maxl = 45;
         title.replace('/', ' ');
         title.replace('www.', '');
@@ -32,28 +27,27 @@ class CurrentJobsHero extends Component {
 
         return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
     }
-    //  if (jobsDataResults ()== null){
-    //       return null;
-    //   }
-    render() {
-        var site = getConfig()[0];
-        if ( this.state.jobsDataResults== undefined ){
-            return null;
-        }
-        var dashUrl = process.env.REACT_APP_DASH_URL;
 
-        if (this.state.jobsDataResults.length == 0){
+    useEffect(()=>{
-            return <></>;
+        JobsData().then(res => {
-        }
+            setJobs(res.data.result_list);
+        }).catch(err => {
+            console.log('startjoblist error', err)
+        })
+    },[socketMsgReceived])
+
     return (
         <>
+        {jobs.length < 1 ?
+        null
+        :
         <section className="appie-blog-area">
             <div className="container">
                 <div className="row">
                     <p className='pl-15'>Recent jobs.</p>
 
                     {
-                                this.state.jobsDataResults.map((i, index) => {
+                        jobs.map((i, index) => {
                             var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                             var postDt  = new Date(i.expire).toLocaleDateString("en-US", options);
                             let hourRemaining = Math.floor(Math.abs(new Date() - new Date(i.expire)) / (1000*60*60))
@@ -70,7 +64,7 @@ class CurrentJobsHero extends Component {
                                         <div className="titleBox">
                                             <h3 className="title_hero">
                                                 <a href={dashUrl}>
-                                                            <span className='font_black_hero'>{this.titleLen(i.title)} </span>
+                                                    <span className='font_black_hero'>{titleLen(i.title)} </span>
                                                 </a>
                                             </h3>
                                         </div>
@@ -130,9 +124,9 @@ class CurrentJobsHero extends Component {
                 </div>
             </div>
         </section>
+        }
         </>
     );
 }
-}
 
 export default CurrentJobsHero;

src/components/Service/MissionStatement.js

@@ -29,7 +29,7 @@ function MissionStatement() {
         },
         {
             id: 4,
-            title: "Get you work done",
+            title: "Get your work done",
             content: "For other tasks you need to get done, we will be there for smooth engagement",
         }
     ];

src/components/Service/index.js

@@ -25,7 +25,7 @@ function Service() {
             <HeroNews
                 title="Services"
                 breadcrumb={[
-                    { link: '/', title: 'home' },
+                    { link: '/', title: 'Home' },
                     { link: '/service', title: 'Service' },
                 ]}
             />

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
+import SocketIOContextProvider from './Contexts/SocketIOContext';
 
 import App from './App';
 import './assets/css/bootstrap.min.css';
@@ -15,7 +16,9 @@ import './assets/css/style.css';
 ReactDOM.render(
     <React.StrictMode>
         <Router>
+            <SocketIOContextProvider>
                 <App />
+            </SocketIOContextProvider>
         </Router>
     </React.StrictMode>,
     document.getElementById('root')