Fakultas Ilmu Komputer UI

VacancyList.jsx 3.58 KB
Newer Older
1
import React from 'react';
2
import { Item, Button, Grid, Segment } 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,
16
17
18
  };

  static defaultProps = {
19
    type: 'student',
20
21
  };

22
23
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
24
    /* istanbul ignore next */
25
    this.state = { vacancies: [], bookmarkList: [], appliedList: [] };
26
    if (this.props.type === 'student') {
27
      this.updateStatusList();
28
    }
29
    Server.get(this.props.url, false).then((data) => {
30
31
      this.setState({ vacancies: data });
    });
32
    this.updateStatusList = this.updateStatusList.bind(this);
33
    this.generateVacancies = this.generateVacancies.bind(this);
34
    this.checkBookmark = this.checkBookmark.bind(this);
35
    this.checkApplied = this.checkApplied.bind(this);
36
    this.companyHeader = this.companyHeader.bind(this);
37
38
39
  }

  checkBookmark(id) {
40
41
    for (let i = 0; i < this.state.bookmarkList.length; i += 1) {
      if (id === this.state.bookmarkList[i].id) { return 1; }
42
43
    }
    return 0;
44
45
  }

46
47
48
49
50
51
52
53
  checkApplied(id) {
    for (let i = 0; i < this.state.appliedList.length; i += 1) {
      if (id === this.state.appliedList[i].id) { return 'registered'; }
    }
    return 'new';
  }

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

62
63
64
65
66
67
68
69
70
  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);
  }));

71
  generateVacancies() {
72
73
74
75
76
    if (this.props.type === 'student') {
      return this.state.vacancies.map(vacancy =>
        (
          <Vacancy
            key={vacancy.id}
77
            status={this.checkApplied(vacancy.id)}
78
79
            bookmarked={this.checkBookmark(vacancy.id)}
            data={vacancy}
80
            studentId={this.props.userId}
81
82
83
84
85
          />
        ),
      );
    }

86
87
88
89
90
    return this.state.vacancies.map(vacancy => (<CompanyVacancy
      key={vacancy.id}
      data={vacancy}
      deleteCallback={() => this.deleteVacancy(vacancy.id)}
    />),
91
92
93
    );
  }

94
95
96
  companyHeader() {
    if (this.props.type === 'company') {
      return (
97
98
99
        <Grid textAlign="center">
          <Button size="tiny" 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" />
100
        </Grid>
101
102
103
104
105
      );
    }

    return '';
  }
106

107
  render = () => (
108
    <Segment padded className="vacancyList-company">
109
110
111
      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
      <Grid container columns="eleven" doubling>
        { this.companyHeader() }
112
113
114
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
115
      </Grid>
116
    </Segment>
117
  );
118
}