Fakultas Ilmu Komputer UI

VacancyList.jsx 4.36 KB
Newer Older
1
import React from 'react';
M. Reza Qorib's avatar
M. Reza Qorib committed
2
import { Item, Button, Grid } 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';
M. Reza Qorib's avatar
M. Reza Qorib committed
8
import Aplicant from './../components/Applicant';
9

10
11
12
13

export default class VacancyList extends React.Component {

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

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

25
26
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
27
    /* istanbul ignore next */
28
    this.state = { vacancies: [], bookmarkList: [], appliedList: [] };
29
    if (this.props.type === 'student') {
30
      this.updateStatusList();
31
    }
32
    Server.get(this.props.url, false).then((data) => {
33
34
      this.setState({ vacancies: data });
    });
M. Reza Qorib's avatar
M. Reza Qorib committed
35
    console.log(this.state.vacancies);
36
    this.updateStatusList = this.updateStatusList.bind(this);
37
    this.generateVacancies = this.generateVacancies.bind(this);
38
    this.checkBookmark = this.checkBookmark.bind(this);
39
    this.checkApplied = this.checkApplied.bind(this);
40
    this.companyHeader = this.companyHeader.bind(this);
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
57
    }
    return 'new';
  }

  updateStatusList() {
58
    Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
59
60
      this.setState({ bookmarkList: data });
    });
61
    Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((data) => {
M. Reza Qorib's avatar
M. Reza Qorib committed
62
63
64
      // console.log('hasil api:');
      // console.log(data);
      // console.log(data.vacancy);
65
      this.setState({ appliedList: data });
M. Reza Qorib's avatar
M. Reza Qorib committed
66
67
      console.log('applied list:')
      console.log(this.state.appliedList);
68
    });
69
  }
70

71
72
73
74
75
76
77
78
79
  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);
  }));

80
  generateVacancies() {
81
82
83
84
    if (this.props.type === 'student') {
      return this.state.vacancies.map(vacancy =>
        (
          <Vacancy
M. Reza Qorib's avatar
M. Reza Qorib committed
85
86
87
88
            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}
89
            studentId={this.props.userId}
M. Reza Qorib's avatar
M. Reza Qorib committed
90
91
92
            applicationStatus= {this.props.status === 'applied' ? (vacancy.status === 4 ? 'Ditolak' :
                (vacancy.status === 3 ? 'Diterima' : 'Terdaftar')) : ''}
          >{console.log(this.checkApplied(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id))}</Vacancy>
93
94
95
96
        ),
      );
    }

97
98
99
100
101
    return this.state.vacancies.map(vacancy => (<CompanyVacancy
      key={vacancy.id}
      data={vacancy}
      deleteCallback={() => this.deleteVacancy(vacancy.id)}
    />),
102
103
104
    );
  }

105
106
107
  companyHeader() {
    if (this.props.type === 'company') {
      return (
108
        <Grid textAlign="center">
109
          <Button size="tiny" as={Link} to="/pelamar" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
110
          <Button size="tiny" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
111
        </Grid>
112
113
114
115
116
      );
    }

    return '';
  }
117

118
  render = () => (
119
    <div>
120
121
122
      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
      <Grid container columns="eleven" doubling>
        { this.companyHeader() }
123
124
125
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
126
      </Grid>
127
    </div>
128
  );
129
}