victorAnumudu
138 lines
6.7 KiB
JavaScript
138 lines
6.7 KiB
JavaScript
import React, { Component } 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';
|
|
|
|
class CurrentJobsHero extends Component {
|
|
|
|
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)
|
|
})
|
|
}
|
|
|
|
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">
|
|
<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>
|
|
</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>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CurrentJobsHero; |