VacancyList.jsx

import React from 'react';
import { Item, Grid, Container, Dropdown } from 'semantic-ui-react';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import AdminVacancy from './AdminVacancy';
import Server from '../lib/Server';
import moment from 'moment';

export default class VacancyList extends React.Component {

  static propTypes = {
    user: React.PropTypes.object.isRequired,
    userId: React.PropTypes.number.isRequired,
    items: React.PropTypes.array,
    sort: React.PropTypes.string.isRequired,
  };

  static defaultProps = {
    items: [],
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      vacancies: this.props.items,
      bookmarkList: [],
      appliedList: [],
      loading: true,
      salaryFilter: 0,
      salaryFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: '< 1 juta', value: 1 },
        { key: 2, text: '1-3 juta', value: 2 },
        { key: 3, text: '3-5 juta', value: 3 },
        { key: 4, text: '> 5 juta', value: 4 },
      ],
      vacancyStateFilter: 0,
      vacancyStateFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: 'Masih Menerima', value: 1 },
        { key: 2, text: 'Sudah Tutup', value: 2 },
      ],
    };
    this.generateVacancies = this.generateVacancies.bind(this);
    this.updateStatus = this.updateStatus.bind(this);
    this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(this);
  }

  updateStatus(id, status) {
    const obj = [];
    this.state.vacancies.map((vacancy) => {
      if (vacancy.id !== id) return obj.push(vacancy);
      return null;
    });
    this.setState({ vacancies: obj });
  }

  deleteVacancy = id => Server.delete(`/vacancies/${id}/`, this.state).then(() => {
    this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');
    const newVacancies = [];
    this.state.vacancies.map(vacancy => vacancy.id !== id && newVacancies.push(vacancy));
    this.setState({ vacancies: newVacancies });
  }, error => error.then((r) => {
    this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
  }));

  filterVacanciesBasedOnSalary = (vacancies) => {
    const salaryFilter = this.state.salaryFilter;
    let filteredVacancies = vacancies;
    if (salaryFilter === 1) {
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary < 1000000);
    } else if (salaryFilter === 2) {
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 1000000 && vacancy.props.data.salary < 3000000);
    } else if (salaryFilter === 3) {
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 3000000 && vacancy.props.data.salary < 5000000);
    } else if (salaryFilter === 4){
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 5000000);
    }

    return filteredVacancies;
  }

  filterVacanciesBasedOnVacancyStatus = (vacancies) => {
    const vacancyStateFilter = this.state.vacancyStateFilter;
    let filteredVacancies = vacancies;
    if (vacancyStateFilter === 1) {
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time >= moment().format());
    } else if (vacancyStateFilter === 2) {
      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time < moment().format());
    }

    return filteredVacancies;
  }

  handleChangeSalaryFilter = (e, data) => {
    this.setState({ salaryFilter: data.value });
  }

  handleChangeVacancyStateFilter = (e, data) => {
    this.setState({ vacancyStateFilter: data.value });
  }

  generateVacancies() {
    if (this.state.vacancies.length === 0) {
      return (
        <Item className="vacancyItems">
          <Grid.Row>
            <Container textAlign="center">
              <p>Tidak ada</p><br />
            </Container>
          </Grid.Row>
        </Item>
      );
    }
    if (this.props.user.role === 'student') {
      let vacancies = this.state.vacancies.map(vacancy =>
        (
          <Vacancy
            key={vacancy.id}
            status={vacancy.status}
            user={this.props.user}
            bookmarked={vacancy.bookmarked ? 1 : 0}
            data={vacancy}
            studentId={this.props.userId}
            salary={this.props.salary}
          />
        ),
      );
      if (this.props.sort === 'ASC') {
        return vacancies.sort((vac1, vac2) => {
          return vac1.props.data.name.localeCompare(vac2.props.data.name);
        });
      } else if (this.props.sort === 'DESC') {
        return vacancies.sort((vac1, vac2) => {
          return vac2.props.data.name.localeCompare(vac1.props.data.name);
        });
      }
      vacancies = this.filterVacanciesBasedOnSalary(vacancies);
      vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
      return vacancies;
    } else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
      || this.props.user.role === 'company') {
      return this.state.vacancies.map(vacancy => (
        <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
          <CompanyVacancy
            key={vacancy.id}
            data={vacancy}
            deleteCallback={() => this.deleteVacancy(vacancy.id)}
          />
        </Item.Group>
      ),
      );
    }

    return this.state.vacancies.map(vacancy => (
      <AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
      />),
    );
  }

  render = () => (
    <div>
      <Dropdown
          placeholder="Filter Berdasarkan Gaji"
          className="dropdownApplicant"
          selection
          options={this.state.salaryFilterBy}
          onChange={this.handleChangeSalaryFilter}
        />
      <Dropdown
          placeholder='Filter Berdasarkan Batas Daftar Lowongan'
          className="dropdownApplicant"
          selection
          options={this.state.vacancyStateFilterBy}
          onChange={this.handleChangeVacancyStateFilter}
        />
      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
      </Grid>
    </div>
  );
}