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';

class RecentJobsOne extends Component {

    constructor() {
      //  debugger;
        super();
        this.state = { jobsDataResults: [] };
    }

async componentDidMount(){
  //  debugger;
     const response = await JobsData();
     this.setState({jobsDataResults:response});
}

    //  if (jobsDataResults ()== null){
    //       return null;
    //   }
    render() {

       if ( this.state.jobsDataResults== undefined ){
           return null;
       }
        var dashUrl = "https://dashboard.wrenchboard.com/";

        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>
                        </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-lg-3 col-md-6">
                                        <div
                                            className="appie-single-service mt-30 wow animated fadeInUp boxBorder"
                                            data-wow-duration="3000ms"
                                            data-wow-delay="200ms"
                                        >

                                            <div className="content">
                                                <div className="titleBox">
                                                    <h3 className="title">
                                                        <a href={dashUrl}>
                                                        <span className='font_black'>{i.title} </span>   
                                                        </a>
                                                    </h3>
                                                </div>


                                                <div><hr /></div>
                                                <div className="blog-meta">
                                                    <ul>
                                                        <li className="expire">
                                                            <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div className='lmoreTxt'>
                                                    <a href={dashUrl}>
                                                    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>
                    </div>
                </section>
            </>
        );
    }
}

export default RecentJobsOne;