ListRecruitment

import React, { Component } from 'react'
import ListItem from '../share/ListItem';
import request from 'superagent';
import _ from 'lodash';
import moment from 'moment';
import Spinner from 'react-spinkit';
import { SALARY_VALUES, EXPERIENCE_VALUES, SORT_TYPES } from '../recruitmentHolder/RecruitmentHolder';
const FULL_SIZE = 10;
const SHOW_SIZE = 1;
class ListRecruitment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recruitments: [],
      show: false,
    }
  }

  postFilterOptions(page = 0, pageSize = FULL_SIZE, sortMode = SORT_TYPES.NEWEST) {
    const data = {
      salary: [SALARY_VALUES.MIN, SALARY_VALUES.MAX],
      experience: EXPERIENCE_VALUES.MIN
    }
    this.setState({recruitments: []}, () => {
      request
      .post('/api/recruitment/filter')
      .query({page, PAGE_SIZE: pageSize, sortMode})
      .send(data)
      .end((err, res) => {
        if (err) {
          console.log(err);
        }
        else {
          const { recruitments } = res.body;
          this.setState({recruitments});
        }
      })
    })
  }
  renderList(propRecruitments, pageSize = SHOW_SIZE) {
    try {
      if (_.isEmpty(propRecruitments)) {
        return (
          <div className="row">
            <div className="col-sm-12 spinner-container">
              <Spinner name="three-bounce" color="#14b1bb" className="spinner-center"/>
            </div>
          </div>
        )
      }
      const recruitments = propRecruitments.map(
        (elem, index) => {
          if (index < pageSize) {
            var organizationName = '', organizationSlogan = '', organizationLogo = '', arr = [];
            if (!elem._organization) {}
            else if (!elem._organization.id) {
              organizationName = elem._organization.name;
            }
            else if (elem._organization.id) {
              organizationName = elem._organization.id.name;
              organizationSlogan = elem._organization.id.slogan;
              try {
                arr = elem._organization.id._logo.url.split('/');
                organizationLogo =  '/' + [arr[arr.length-2], arr[arr.length-1]].join('/');
              } catch (error) {}
            }
            return (<ListItem
              key={elem._id}
              linkTo={`/recruitments/${elem._id}`}
              imageUrl={organizationLogo}
              name={elem.title}
              sub1={organizationName}
              sub2={organizationSlogan}
              col1_footer={`Cập nhật ${moment(new Date(elem.updatedDate), "YYYYMMDD").fromNow()}`}
              sub4={(elem.view)? elem.view.total: 0}
              col2_topleft="18/16 Tân bình Phường 14 Hồ Chí Minh"
              col2_topright=""
              col2_btmleft={elem.requirement.jobType}
              col2_btmright=""
              col2_footer={elem.requirement.positions}
              col3_top={`Lương: ${elem.requirement.minSalary} - ${elem.requirement.maxSalary} triệu`}
              tags={elem.requirement.skills}
            />)
          }
          else {
            return null;
          }
        }
      ).filter(elem => elem !== null);
      console.log(recruitments);
      return (
        <div className="row">
          <div className="col-sm-8">
            <div className="list-item">
              {recruitments}
            </div>
          </div>
        </div>
      )
    } catch (error) {
      console.log(error);
      return <div>404 Not Found.</div>
    }
  }
  handleClick(show) {
    this.setState({show: !show});
  }
  renderExpanseBtn(propRecruitments, show) {
    if (_.isEmpty(propRecruitments)) {
      return null;
    }
    return (
      <div className="row">
        <div className="col-sm-12">
          <button
            className="btn btn-primary"
            style={{backgroundColor: '#14b1bb', borderColor: '#14b1bb', color: 'black!important'}}
            onClick={(e) => this.handleClick(show)}>
            {(show)
            ? <span>Rút ngọn <i className="fa fa-arrow-up"></i></span>
            : <span>Xem thêm <i className="fa fa-arrow-down"></i></span>
            }
          </button>
        </div>
      </div>
    )
  }
  componentWillMount () {
    this.postFilterOptions();
  }

  render () {
    const { recruitments, show } = this.state;
    return (
      <div style={{marginBottom: 10}}>
        <h2>Tin tuyển dụng</h2>
        {this.renderList(recruitments, (show)? FULL_SIZE: SHOW_SIZE)}
        {this.renderExpanseBtn(recruitments, show)}

      </div>
    )
  }
}

export default ListRecruitment