added socket context

.env

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=ng"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=ng"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -17,3 +17,9 @@ REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 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'
+
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

.env.development

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://dev-users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=ng"
 REACT_APP_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=ng"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -16,4 +16,10 @@ REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
 REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
-REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+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

@@ -5,7 +5,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api
 
 REACT_APP_SITE_NAME='WrenchBoard'
 REACT_APP_DASH_URL='https://users.wrenchboard.com'
-REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login"
+REACT_APP_DASH_URL_LOGIN="https://users.wrenchboard.com/login?cnt=ng"
 REACT_APP_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=ng"
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
@@ -16,4 +16,10 @@ REACT_APP_SUPPORT_EMAIL='support@wrenchboard.com'
 REACT_APP_SUPPORT_PHONE='404 855-7966'
 REACT_APP_SUPPORT_PHONE_NG='(+420) 336 476 328'
 REACT_APP_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
-REACT_APP_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+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.wrenchboard.com"

package.json

@@ -10,11 +10,13 @@
     "react": "^17.0.2",
     "react-countup": "^6.0.0",
     "react-dom": "^17.0.2",
+    "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
     "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": {

public/index.html

@@ -68,4 +68,7 @@
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
    </script>
+
+     <!-- plugins js -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 </html>

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('/@') ? 

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 (
+    <SocketIOContext.Provider value={values}>
+        {children}
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketValues = () => {
+    return useContext(SocketIOContext)
+}

src/assets/css/main.css

@@ -8364,4 +8364,33 @@ blockquote cite {
   animation-timing-function: linear;
   animation-duration: .5s;
   animation-fill-mode: forwards; */
+}
+
+
+
+/* -----------Interface_Section-Css-Start----------------- */
+
+/* interface wraper */
+.interface_section .screen_slider {
+  margin-top: 35px;
+  /* min-height: 520px; */
+  display: flex;
+  align-items: center;
+}
+
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
+  transform: scale(.9);
+  border: 2px solid #000;
+  border-radius: 20px;
+  transition: 1s all;
+  margin: 0 auto;
+  height: 520px;
+  width: auto;
+}
+
+.interface_section .owl-item.center .screen_frame_img img {
+  transform: scale(1);
+  border: 3px solid #000;
+  padding: 5px;
 }

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 (
-            <>
-                <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/components/HomeOne/FeaturedScreen.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import OwlCarousel from 'react-owl-carousel'
+import localImgLoad from '../../lib/localImgLoad'
+
+import 'owl.carousel/dist/assets/owl.carousel.css'
+import 'owl.carousel/dist/assets/owl.theme.default.css'
+
+export default function FeaturedScreen() {
+  
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="appie-service-area pt-50 pb-50 interface_section">
+            <div className="container-fluid">
+                <div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                    <h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
+                    <p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
+                </div>
+                <div className="screen_slider" >
+                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_1.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}

src/components/HomeOne/FooterHomeOne.js

@@ -54,6 +54,9 @@ function FooterHomeOne({ className }) {
                   <li>
                     <a href="/use-cases">Use Cases</a>
                   </li>
+                  <li>
+                      <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
+                  </li>
                   <li>
                     <Link to="/blog">Blog</Link>
                   </li>

src/components/HomeOne/index.js

@@ -18,6 +18,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
 import HomeNigeria from "./HomeNigeria";
+import FeaturedScreen from './FeaturedScreen';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
@@ -36,6 +37,7 @@ function HomeOne() {
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}
             <TrafficHomeTwo />
+            <FeaturedScreen />
             {/*<TestimonialHomeOne />*/}
             {/*<TeamHomeOne />*/}
             {/*<PricingHomeOne />*/}

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>
-            <App />
+            <SocketIOContextProvider>
+                <App />
+            </SocketIOContextProvider>
         </Router>
     </React.StrictMode>,
     document.getElementById('root')

src/lib/localImgLoad.js

@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad