WrenchBoard/WrenchBoardNigeriaMainSite
2
0
Fork 0
Code Issues Pull Requests Releases Activity

added socket context

Browse Source
This commit was merged in pull request #17.
This commit is contained in:
victorAnumudu
2024-03-14 10:42:57 +01:00
parent df80cf8aae
commit a52479e11f
8 changed files with 197 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+3
View File
@@ -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
+4 -1
View File
@@ -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'
REACT_APP_AGENT_LINK='https://dev-agents.wrenchboard.com'
#SOCKETS ENDS
REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
.env.production
+4 -1
View File
@@ -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'
REACT_APP_AGENT_LINK='https://agents.wrenchboard.com'
#SOCKETS ENDS
REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com"
package.json
+1
View File
@@ -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
+10
View File
@@ -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('/@') ?
src/Contexts/SocketIOContext.js
+49
View File
@@ -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 (
<SocketIOContext.Provider value={values}>
{children}
</SocketIOContext.Provider>
)
}
export const SocketValues = () => {
return useContext(SocketIOContext)
}
src/components/HomeOne/CurrentJobsHero.js
+122 -102
View File
@@ -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 (
<>
<section className="appie-blog-area">
<div className="container">
<div className="row">
<p className='pl-15'>Recent jobs.</p>
{
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 (
<div className="col-12">
<div
className="container-fluid mb-10 wow animated fadeInUp boxBorder d-flex align-items-center rounded"
data-wow-duration="3000ms"
data-wow-delay="200ms"
>
<div className="content d-flex flex-column justify-content-between" style={{height: '50px', width: '100%'}}>
<div className="titleBox">
<h3 className="title_hero">
<a href={dashUrl}>
<span className='font_black_hero'>{this.titleLen(i.title)} </span>
</a>
</h3>
</div>
<div className='p-0 container-fluid'>
{/*<div><hr /></div>*/}
{/*<div className="blog-meta">*/}
{/* <ul>*/}
{/* <li className="expire">*/}
{/* <a href={dashUrl} className='d-block'>*/}
{/* <div className='font_red d-flex align-items-start'>*/}
{/* <div className='pr-2'>Expires :</div>*/}
{/* <CountDownTimer targetDate={postDt}/>*/}
{/* </div>*/}
{/* </a>*/}
{/* </li>*/}
{/* </ul>*/}
{/*</div>*/}
<div className='lmoreTxt d-flex justify-content-between align-items-center'>
<p className='text-danger' style={{fontSize: '12px'}}>{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}</p>
<a href={dashUrl} className=''>
Learn More <i className="fal fa-arrow-right" />
</a>
</div>
</div>
// if ( this.state.jobsDataResults== undefined ){
// return null;
// }
// if (this.state.jobsDataResults.length == 0){
// return <></>;
// }
return (
<>
{jobs.length < 1 ?
null
:
<section className="appie-blog-area">
<div className="container">
<div className="row">
<p className='pl-15'>Recent jobs.</p>
{
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 (
<div className="col-12">
<div
className="container-fluid mb-10 wow animated fadeInUp boxBorder d-flex align-items-center rounded"
data-wow-duration="3000ms"
data-wow-delay="200ms"
>
<div className="content d-flex flex-column justify-content-between" style={{height: '50px', width: '100%'}}>
<div className="titleBox">
<h3 className="title_hero">
<a href={dashUrl}>
<span className='font_black_hero'>{titleLen(i.title)} </span>
</a>
</h3>
</div>
<div className='p-0 container-fluid'>
{/*<div><hr /></div>*/}
{/*<div className="blog-meta">*/}
{/* <ul>*/}
{/* <li className="expire">*/}
{/* <a href={dashUrl} className='d-block'>*/}
{/* <div className='font_red d-flex align-items-start'>*/}
{/* <div className='pr-2'>Expires :</div>*/}
{/* <CountDownTimer targetDate={postDt}/>*/}
{/* </div>*/}
{/* </a>*/}
{/* </li>*/}
{/* </ul>*/}
{/*</div>*/}
<div className='lmoreTxt d-flex justify-content-between align-items-center'>
<p className='text-danger' style={{fontSize: '12px'}}>{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}</p>
<a href={dashUrl} className=''>
Learn More <i className="fal fa-arrow-right" />
</a>
</div>
</div>
</div>
)
}
})
</div>
</div>
)
}
<div className="col-md-6 col-xl-12">
<div
className="appie-blog-item mt-15 wow animated fadeInUp"
data-wow-duration="3000ms"
data-wow-delay="600ms"
>
})
}
<div className="pt-10 d-flex flex-column gap-2">
<h3 className="title">
<a href={dashUrl}>
Find more opportunities at our marketplace.
</a>
</h3>
<a className='align-self-end' href="https://users.wrenchboard.com/login">
Login now <i className="fal fa-arrow-right" />
</a>
</div>
</div>
<div className="col-md-6 col-xl-12">
<div
className="appie-blog-item mt-15 wow animated fadeInUp"
data-wow-duration="3000ms"
data-wow-delay="600ms"
>
<div className="pt-10 d-flex flex-column gap-2">
<h3 className="title">
<a href={dashUrl}>
Find more opportunities at our marketplace.
</a>
</h3>
<a className='align-self-end' href="https://users.wrenchboard.com/login">
Login now <i className="fal fa-arrow-right" />
</a>
</div>
</div>
</div>
</section>
</>
);
}
</div>
</div>
</section>
}
</>
);
}
export default CurrentJobsHero;
src/index.js
+4 -1
View File
@@ -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>
<App />
<SocketIOContextProvider>
<App />
</SocketIOContextProvider>
</Router>
</React.StrictMode>,
document.getElementById('root')