diff --git a/.env b/.env index 7c7e8b8..1eb627a 100644 --- a/.env +++ b/.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" diff --git a/.env.development b/.env.development index ae974cb..cb34976 100644 --- a/.env.development +++ b/.env.development @@ -19,4 +19,7 @@ REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339' REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria' #AGENT LINK -REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com' \ No newline at end of file +REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com' + +#SOCKETS ENDS +REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com" \ No newline at end of file diff --git a/.env.production b/.env.production index 63606d3..1d3d6b3 100644 --- a/.env.production +++ b/.env.production @@ -19,4 +19,7 @@ REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339' REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria' #AGENT LINK -REACT_APP_AGENT_LINK='https://agents.wrenchboard.com' \ No newline at end of file +REACT_APP_AGENT_LINK='https://agents.wrenchboard.com' + +#SOCKETS ENDS +REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com" \ No newline at end of file diff --git a/package.json b/package.json index 15e5a55..9dd4c2e 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index 850be84..20cf080 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,19 @@ +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') + console.log('market room joined') + },[]) + return ( <> {pathname.startsWith('/@') ? diff --git a/src/Contexts/SocketIOContext.js b/src/Contexts/SocketIOContext.js new file mode 100644 index 0000000..d39048b --- /dev/null +++ b/src/Contexts/SocketIOContext.js @@ -0,0 +1,49 @@ +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}); + console.log('YES ssss') + }); + }, [socket]); + + let values = { + socket, + joinRoom, + setSocketMsgReceived, + socketMsgReceived, + } + + return ( + + {children} + + ) +} + + +export const SocketValues = () => { + return useContext(SocketIOContext) +} diff --git a/src/components/HomeOne/CurrentJobsHero.js b/src/components/HomeOne/CurrentJobsHero.js index ac69229..ac67d01 100644 --- a/src/components/HomeOne/CurrentJobsHero.js +++ b/src/components/HomeOne/CurrentJobsHero.js @@ -1,29 +1,39 @@ -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() { - // debugger; - super(); - this.state = { jobsDataResults: [] }; - } + let {socketMsgReceived} = SocketValues() // destructure FROM SOCKET - 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([]) + + // constructor() { + // // 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) + // }) + // } + + function titleLen(title){ let maxl = 45; title.replace('/', ' '); title.replace('www.', ''); @@ -32,107 +42,117 @@ 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; + + useEffect(()=>{ + if(socketMsgReceived.type == '' || socketMsgReceived.type == 'market'){ + JobsData().then(res => { + setJobs(res.data.result_list); + }).catch(err => { + console.log('startjoblist error', err) + }) } - var dashUrl = process.env.REACT_APP_DASH_URL; + },[socketMsgReceived.type]) - if (this.state.jobsDataResults.length == 0){ - return <>; - } - return ( - <> -
-
-
-

Recent jobs.

- { - this.state.jobsDataResults.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)) - if(index < 5){ - return ( -
-
-
- -
- {/*
*/} - {/*
*/} - {/* */} - {/*
*/} -
-

{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}

- - Learn More - -
-
+ // if ( this.state.jobsDataResults== undefined ){ + // return null; + // } + + // if (this.state.jobsDataResults.length == 0){ + // return <>; + // } + return ( + <> + {jobs.length < 1 ? + null + : +
+
+
+

Recent jobs.

+ + { + 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)) + + if(index < 5){ + return ( +
+
+
+ +
+ {/*
*/} + {/*
*/} + {/* */} + {/*
*/} +
+

{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}

+ + Learn More +
- ) - } - - - }) +
+
+ ) } -
- - ); - } + +
+
+
+ } + + ); } export default CurrentJobsHero; \ No newline at end of file diff --git a/src/index.js b/src/index.js index c4f0162..d4d4929 100644 --- a/src/index.js +++ b/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( - + + + , document.getElementById('root')