Fakultas Ilmu Komputer UI

VacancyList.jsx 4.44 KB
Newer Older
1
import React from 'react';
2
import { Item, Button, Grid, Loader } from 'semantic-ui-react';
3
import { Link } from 'react-router';
4
import Vacancy from './Vacancy';
5
import CompanyVacancy from './CompanyVacancy';
6
import Server from '../lib/Server';
7
import ModalAlert from '../components/ModalAlert';
8

9
10
11
12

export default class VacancyList extends React.Component {

  static propTypes = {
13
    url: React.PropTypes.string.isRequired,
14
15
    userId: React.PropTypes.number.isRequired,
    type: React.PropTypes.string,
M. Reza Qorib's avatar
M. Reza Qorib committed
16
    status: React.PropTypes.string,
17
18
19
  };

  static defaultProps = {
20
    type: 'student',
M. Reza Qorib's avatar
M. Reza Qorib committed
21
    status: 'new',
22
23
  };

24
25
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
26
    /* istanbul ignore next */
27
    this.state = { vacancies: [], bookmarkList: [], appliedList: [], loading: true };
28
    this.updateStatusList = this.updateStatusList.bind(this);
29
    this.generateVacancies = this.generateVacancies.bind(this);
30
    this.checkBookmark = this.checkBookmark.bind(this);
31
    this.checkApplied = this.checkApplied.bind(this);
32
    this.companyHeader = this.companyHeader.bind(this);
33
34
    if (this.props.type === 'student') {
      this.updateStatusList();
35
    } else Server.get(this.props.url, false).then((data) => {
36
      this.setState({ vacancies: data, loading: false });
37
38
39
40
    }, e => e.then((error) => {
      this.modalAlert.open('Akun anda belum terverfikasi', 'Mohon tunggu sampai akun perusahaan anda terverifikasi atau hubungi pihak administrasi');
      this.setState({ loading: false });
    }));
41
42
43
  }

  checkBookmark(id) {
44
45
    for (let i = 0; i < this.state.bookmarkList.length; i += 1) {
      if (id === this.state.bookmarkList[i].id) { return 1; }
46
47
    }
    return 0;
48
49
  }

50
51
  checkApplied(id) {
    for (let i = 0; i < this.state.appliedList.length; i += 1) {
M. Reza Qorib's avatar
M. Reza Qorib committed
52
      if (id === this.state.appliedList[i].vacancy.id) { return 'registered'; }
53
54
55
56
    }
    return 'new';
  }

57
58
59
60
61
62
63
  updateStatusList = () => Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
    this.setState({ bookmarkList: data });
  }).then(() => Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((data) => {
    this.setState({ appliedList: data });
  })).then(() => Server.get(this.props.url, false).then((data) => {
    this.setState({ vacancies: data, loading: false });
  }));
64

65
66
67
68
69
70
71
72
73
  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);
  }));

74
  generateVacancies() {
75
76
77
78
    if (this.props.type === 'student') {
      return this.state.vacancies.map(vacancy =>
        (
          <Vacancy
M. Reza Qorib's avatar
M. Reza Qorib committed
79
80
81
82
            key={this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id}
            status={this.checkApplied(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id)}
            bookmarked={this.checkBookmark(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id)}
            data={this.props.status === 'applied' ? vacancy.vacancy : vacancy}
83
            studentId={this.props.userId}
84
            applicationStatus={this.props.status === 'applied' ? (vacancy.status === 4 ? 'Ditolak' :
M. Reza Qorib's avatar
M. Reza Qorib committed
85
                (vacancy.status === 3 ? 'Diterima' : 'Terdaftar')) : ''}
86
          />
87
88
89
90
        ),
      );
    }

91
92
93
94
95
    return this.state.vacancies.map(vacancy => (<CompanyVacancy
      key={vacancy.id}
      data={vacancy}
      deleteCallback={() => this.deleteVacancy(vacancy.id)}
    />),
96
97
98
    );
  }

99
100
101
  companyHeader() {
    if (this.props.type === 'company') {
      return (
Zamil Majdy's avatar
Zamil Majdy committed
102
        <Grid textAlign="center" style={{ paddingTop: '10px' }}>
103
          <Button size="tiny" as={Link} to="/pelamar" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
104
          <Button size="tiny" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
105
        </Grid>
106
107
108
109
110
      );
    }

    return '';
  }
111

112
  render = () => (
113
    <div>
114
      <Loader active={this.state.loading} />
115
116
117
      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
      <Grid container columns="eleven" doubling>
        { this.companyHeader() }
118
119
120
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
121
      </Grid>
122
    </div>
123
  );
124
}