VacancyList.jsx

import React from 'react';
import { Item, Button, Grid } from 'semantic-ui-react';
import { Link } from 'react-router';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import AdminVacancy from './AdminVacancy';
import Server from '../lib/Server';

export default class VacancyList extends React.Component {

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

  static defaultProps = {
    items: [],
  };

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

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      vacancies: this.props.items,
      bookmarkList: [],
      appliedList: [],
      loading: true,
    };
    this.generateVacancies = this.generateVacancies.bind(this);
    this.updateStatus = this.updateStatus.bind(this);
  }

  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);
  }));

  generateVacancies() {
    if (this.props.user.role === 'student') {
      return 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}
          />
        ),
      );
    }
    if (this.props.user.role === 'admin' || this.props.user.role === 'supervisor'){
      return this.state.vacancies.map(vacancy => (<AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
      />),
      );  
    }
    
    return this.state.vacancies.map(vacancy => (<CompanyVacancy
      key={vacancy.id}
      data={vacancy}
      deleteCallback={() => this.deleteVacancy(vacancy.id)}
    />),
    );
  }

  companyHeader() {
    if (this.props.user.role === 'company') {
      return (
        <Grid textAlign="center" style={{ paddingTop: '10px' }}>
          <Button size="tiny" as={Link} to="/pelamar" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
          <Button size="tiny" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
        </Grid>
      );
    }

    return '';
  }

  render = () => (
    <div>
      <Grid container columns="eleven" doubling>
        { this.companyHeader() }
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
      </Grid>
    </div>
  );
}