removed resources from nav link and change hero section style

.env.production

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

src/App.js

@@ -11,7 +11,6 @@ function App() {
 
     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 (

src/Contexts/SocketIOContext.js

@@ -14,7 +14,9 @@ export default function SocketIOContextProvider({children}) {
 
     // // Messages States
     // const [message, setMessage] = useState("");
-    const [socketMsgReceived, setSocketMsgReceived] = useState({type:'', msg:''});
+    const [socketMsgReceived, setSocketMsgReceived] = useState('');
+
+    const [updateMarket, setUpdateMarket] = useState(false)
 
     const joinRoom = (room) => {
         if (room !== "") {
@@ -24,8 +26,8 @@ export default function SocketIOContextProvider({children}) {
     
     useEffect(() => {
         socket.on("received_refreshmarket_jobs", (data) => {
-            setSocketMsgReceived({type: 'market', msg: data?.message});
-            console.log('YES ssss')
+            setSocketMsgReceived(data?.message);
+            setUpdateMarket(prev => !prev)
         });
     }, [socket]);
 
@@ -34,6 +36,7 @@ export default function SocketIOContextProvider({children}) {
         joinRoom,
         setSocketMsgReceived,
         socketMsgReceived,
+        updateMarket,
     }
 
   return (

src/assets/css/main.css

@@ -1782,7 +1782,7 @@ p {
   }
 }
 .appie-hero-content ul {
-  margin: 41px 0 0;
+  /* margin: 41px 0 0; */
   padding: 0;
   list-style-type: none;
 }
@@ -1886,25 +1886,25 @@ p {
 }
 .appie-hero-content.appie-hero-content-6 .appie-title {
   font-weight: 700;
-  font-size: 70px;
-  line-height: 80px;
+  font-size: 40px;
+  line-height: 50px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 60px;
-    line-height: 70px;
+    font-size: 35px;
+    line-height: 50px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 50px;
-    line-height: 60px;
+    font-size: 35px;
+    line-height: 40px;
   }
 }
 @media (max-width: 767px) {
   .appie-hero-content.appie-hero-content-6 .appie-title {
-    font-size: 36px;
-    line-height: 46px;
+    font-size: 30px;
+    line-height: 25px;
   }
 }
 .appie-hero-content.appie-hero-content-6 ul li a {
@@ -8381,7 +8381,7 @@ blockquote cite {
 /* interface images */
 .interface_section .owl-item .screen_frame_img img {
   transform: scale(.9);
-  border: 2px solid #000;
+  /* border: 2px solid #000; */
   border-radius: 20px;
   transition: 1s all;
   margin: 0 auto;
@@ -8391,6 +8391,6 @@ blockquote cite {
 
 .interface_section .owl-item.center .screen_frame_img img {
   transform: scale(1);
-  border: 3px solid #000;
-  padding: 5px;
+  /* border: 3px solid #000;
+  padding: 5px; */
 }

src/components/HomeOne/CurrentJobsHero.js

@@ -2,37 +2,16 @@ 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 JobsData from '../../Services/JobsData';
 import getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
-import { SocketValues } from '../../Contexts/SocketIOContext';
-
-let CurrentJobsHero = () => {
-
-  let {socketMsgReceived} = SocketValues() // destructure FROM SOCKET
 
+let CurrentJobsHero = ({jobs}) => {
 
     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('/', ' ');
@@ -43,25 +22,6 @@ let CurrentJobsHero = () => {
         return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
     }
 
-    useEffect(()=>{
-        if(socketMsgReceived.type == '' || socketMsgReceived.type == 'market'){
-            JobsData().then(res => {
-                setJobs(res.data.result_list);
-            }).catch(err => {
-                console.log('startjoblist error', err)
-            })
-        }
-    },[socketMsgReceived.type])
-
-
-
-    // if ( this.state.jobsDataResults== undefined ){
-    //     return null;
-    // }
-
-    // if (this.state.jobsDataResults.length == 0){
-    //     return <></>;
-    // }
     return (
         <>
         {jobs.length < 1 ?
@@ -110,7 +70,7 @@ let CurrentJobsHero = () => {
                                             {/*</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=''>
+                                                <a href={process.env.REACT_APP_DASH_URL_LOGIN} className=''>
                                                     Learn More <i className="fal fa-arrow-right" />
                                                 </a>
                                             </div>
@@ -140,7 +100,7 @@ let CurrentJobsHero = () => {
                                         Find more opportunities at our marketplace.
                                     </a>
                                 </h3>
-                                <a className='align-self-end' href="https://users.wrenchboard.com/login">
+                                <a className='align-self-end' href="https://dashboard.wrenchboard.com/login">
                                     Login now <i className="fal fa-arrow-right" />
                                 </a>
                             </div>

src/components/HomeOne/FeaturedScreen.js

@@ -39,37 +39,44 @@ export default function FeaturedScreen() {
                     <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" />
+                                {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
+                                {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
+                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>

src/components/HomeOne/HomeNigeria.js

@@ -2,52 +2,44 @@ import React from 'react';
 import heroThumb from '../../assets/images/hero-thumb-7.png';
 import CurrentJobsHero from "./CurrentJobsHero";
 
-function HomeNigeria() {
+function HomeNigeria({jobs}) {
     return (
         <>
-            <section className="appie-hero-area">
+            <section className="appie-hero-area pb-0 mt-50">
                 <div className="container">
                     <div className="row align-items-start">
 
-                        <div className="col-12 col-lg-6">
+                        <div className="col-12">
                             <div className="appie-hero-content appie-hero-content-6">
-                                {/*<span>Welcome To Creative App.</span>*/}
                                 <h1 className="appie-title">Pick any task and start earning.</h1>
-                                <p>
-                                    The Marketplace platform to earn money with your skills, find, buy and sell professional services.
-                                </p>
-                                <ul>
-                                    <li className=''>
-                                        <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
-                                            <i className="fab fa-apple"></i>
-                                            <span>
-                                                Available on the <span>App Store</span>
-                                            </span>
-                                        </a>
-                                    </li>
-                                    <li className=''>
-                                        <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
-                                            <i className="fab fa-google-play"></i>
-                                            <span>
-                                                Available on the <span>Google Play</span>
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
+                                <div className='row'>
+                                    <p className='col-12 col-lg-8'>
+                                        The Marketplace platform to earn money with your skills, find, buy and sell professional services.
+                                    </p>
+                                    <ul className='col-12 col-lg-4 d-flex justify-content-center justify-content-lg-end'>
+                                        <li className=''>
+                                            <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                                                <i className="fab fa-apple"></i>
+                                                <span>
+                                                    Available on the <span>App Store</span>
+                                                </span>
+                                            </a>
+                                        </li>
+                                        <li className=''>
+                                            <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                                                <i className="fab fa-google-play"></i>
+                                                <span>
+                                                    Available on the <span>Google Play</span>
+                                                </span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
-                        <div className="col-12 col-lg-6">
-                            {/*<div className="appie-hero-thumb-6">*/}
-                            {/*    <div*/}
-                            {/*        className="thumb wow animated fadeInUp"*/}
-                            {/*        data-wow-duration="1000ms"*/}
-                            {/*        data-wow-delay="600ms"*/}
-                            {/*    >*/}
-                            {/*        <img src={heroThumb} alt="" />*/}
-                            {/*    </div>*/}
-                            {/*</div>*/}
-                            <CurrentJobsHero />
-                        </div>
+                        {/* <div className="col-12 col-lg-6">
+                            <CurrentJobsHero jobs={jobs} />
+                        </div> */}
                     </div>
                 </div>
             </section>

src/components/HomeOne/RecentJobsOne.js

@@ -1,140 +1,121 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect, useState } 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 JobsData from '../../Services/JobsData';
 import getConfig from './../../Config/config'
 import CountDownTimer from '../Helper/CountDownTimer';
 
-class RecentJobsOne extends Component {
+let RecentJobsOne = ({jobs}) => {
 
-    constructor() {
-      //  debugger;
-        super();
-        this.state = { jobsDataResults: [] };
+
+    var site = getConfig()[0];
+
+    var dashUrl = process.env.REACT_APP_DASH_URL;
+
+    function titleLen(title){
+        let maxl = 45;
+        title.replace('/', ' ');
+        title.replace('www.', '');
+        title.replace('.com', '');
+        title.replace('http//', '');
+
+        return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
     }
 
-async componentDidMount(){
-  //  debugger;
-    JobsData().then(res => {
-        this.setState({jobsDataResults:res.data.result_list});
-    }).catch(err => {
-        console.log('startjoblist error', err)
-    })
-}
-
-titleLen(title){
-    let maxl = 45;
-    title.replace('/', ' ');
-    title.replace('www.', '');
-    title.replace('.com', '');
-    title.replace('http//', '');
-    
-    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){
-            return <></>;
-        }
-
-        return (
-            <>
-                <section className="appie-blog-area pt-90 pb-95">
-                    <div className="container">
-                        <div className="row">
-                            <div className="col-lg-12">
-                                <div className="appie-section-title text-center">
-                                    <h3 className="appie-title">Current Projects</h3>
-                                </div>
-                            </div>
+    return (
+        <>
+        {jobs.length < 1 ?
+        null
+        :
+        <section className="appie-blog-area pt-50 pb-50">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12">
+                        <div className="appie-section-title text-left">
+                            <h3 className="appie-title">Current Projects</h3>
                         </div>
-                        <div className="row">
+                    </div>
+                </div>
+                <div className="row">
 
-                            {
-                                this.state.jobsDataResults.map(i => {
-                                    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-                                    var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
-
-                                    return (<div className="col-md-6 col-xl-3">
-                                        <div
-                                            className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
-                                            data-wow-duration="3000ms"
-                                            data-wow-delay="200ms"
-                                        >
-                                            <div className="content d-flex flex-column justify-content-between" style={{height: '200px', width: '100%'}}>
-                                                <div className="titleBox">
-                                                    <h3 className="title">
-                                                        <a href={dashUrl}>
-                                                        <span className='font_black'>{this.titleLen(i.title)} </span>   
-                                                        </a>
-                                                    </h3>
+                    {
+                        jobs.map((i, index) => {
+                            var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                            var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
+                            if(index < 24){
+                                return (
+                                <div className="col-md-6 col-xl-3">
+                                    <div
+                                        className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
+                                        data-wow-duration="3000ms"
+                                        data-wow-delay="200ms"
+                                    >
+                                        <div className="content d-flex flex-column justify-content-between" style={{height: '250px', width: '100%'}}>
+                                            <div className="titleBox">
+                                                <h3 className="title">
+                                                    <a href={dashUrl}>
+                                                    <span className='font_black'>{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='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-end align-items-center'>
-                                                        <a href={dashUrl}>
-                                                        Learn More <i className="fal fa-arrow-right" />
-                                                    </a>                                                
-                                                    </div>
+                                                <div className='lmoreTxt d-flex justify-content-end align-items-center'>
+                                                    <a href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                                    Learn More <i className="fal fa-arrow-right" />
+                                                </a>                                                
                                                 </div>
                                             </div>
                                         </div>
-
-                                    </div>)
-
-
-                                })
-                            }
-
-
-                            <div className="col-lg-3 col-md-6">
-                                <div
-                                    className="appie-blog-item mt-30 wow animated fadeInUp"
-                                    data-wow-duration="3000ms"
-                                    data-wow-delay="600ms"
-                                >
-
-                                    <div className="content">
-
-                                        <h3 className="title">
-                                            <a href={dashUrl}>
-                                                Find more opportunities at our marketplace.
-                                            </a>
-                                        </h3>
-                                        <a href="https://dashboard.wrenchboard.com/login">
-                                            Login now <i className="fal fa-arrow-right" />
-                                        </a>
                                     </div>
                                 </div>
-                            </div>
+                                )
+                            }
 
+                        })
+                    }
+
+
+                    <div className="col-lg-3 col-md-6">
+                        <div
+                            className="appie-blog-item mt-30 wow animated fadeInUp"
+                            data-wow-duration="3000ms"
+                            data-wow-delay="600ms"
+                        >
+
+                            <div className="content">
+
+                                <h3 className="title">
+                                    <a href={dashUrl}>
+                                        Find more opportunities at our marketplace.
+                                    </a>
+                                </h3>
+                                <a href="https://dashboard.wrenchboard.com/login">
+                                    Login now <i className="fal fa-arrow-right" />
+                                </a>
+                            </div>
                         </div>
                     </div>
-                </section>
-            </>
-        );
-    }
+
+                </div>
+            </div>
+        </section>
+        }
+        </>
+    );
 }
 
 export default RecentJobsOne;

src/components/HomeOne/ServicesHomeOne.js

@@ -9,7 +9,7 @@ import IconFour from '../../assets/images/icon/reward.png';
 
 function ServicesHomeOne({ className }) {
     return (
-        <section className={`appie-service-area pt-90 pb-50 ${className}`} id="service">
+        <section className={`appie-service-area pt-90 pb-90 ${className}`} id="service">
             <div className="container">
                 <div className="row justify-content-center">
                     <div className="col-lg-8">

src/components/HomeOne/TrafficHomeTwo.js

@@ -5,7 +5,7 @@ import getConfig from './../../Config/config'
 function TrafficHomeOne() {
     var site = getConfig()[0];
     return (
-        <section className="appie-traffic-area pt-140 pb-180">
+        <section className="appie-traffic-area pt-140 pb-180 bg-white">
             <div className="container">
                 <div className="row">
                     <div className="col-lg-7">

src/components/HomeOne/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import useToggle from '../../Hooks/useToggle';
 import BackToTop from '../BackToTop';
 import Drawer from '../Mobile/Drawer';
@@ -19,20 +19,34 @@ import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
 import HomeNigeria from "./HomeNigeria";
 import FeaturedScreen from './FeaturedScreen';
+import { SocketValues } from '../../Contexts/SocketIOContext';
+import JobsData from '../../Services/JobsData';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
+
+    let {updateMarket} = SocketValues() // destructure FROM SOCKET
+
     const [drawer, drawerAction] = useToggle(false);
 
+    let [jobs, setJobs] = useState([])
+
+    useEffect(()=>{
+        JobsData().then(res => {
+            setJobs(res.data.result_list);
+        }).catch(err => {
+            console.log('startjoblist error', err)
+        })
+    },[updateMarket])
 
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
             <HomeOneHeader action={drawerAction.toggle} />
-            <HomeNigeria />
+            <HomeNigeria jobs={jobs} />
             {/*<HeroHomeOne />*/}
+            <RecentJobsOne jobs={jobs} />
             <ServicesHomeOne />
-            <RecentJobsOne />
             <FeaturesHomeOne />
             {/*<FaqHomeOne />*/}
             {/*<TrafficHomeOne />*/}

src/components/Navigation.js

@@ -11,7 +11,7 @@ function Navigation() {
                 <li>
                     <Link to="/service">Services</Link>
                 </li>
-                <li>
+                {/* <li>
                     <a href="#">
                         Resources <i className="fal fa-angle-down" />
                     </a>
@@ -26,7 +26,7 @@ function Navigation() {
                             <Link to="/faq">FAQs</Link>
                         </li>
                     </ul>
-                </li>
+                </li> */}
                
             </ul>
         </>