Fakultas Ilmu Komputer UI

VacancyList.jsx 2.59 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

8
9
10
11

export default class VacancyList extends React.Component {

  static propTypes = {
12
    url: React.PropTypes.string.isRequired,
13
    userId: React.PropTypes.number.isRequired,
14
    status: React.PropTypes.string,
15
    type: React.PropTypes.string,
16
17
18
  };

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

23
24
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
25
    /* istanbul ignore next */
26
27
28
    if (this.props.type === 'student') {
      this.updateBookmarkList();
    }
29
    this.state = { vacancies: [], bookmarkList: [] };
30
    Server.get(this.props.url, false).then((data) => {
31
32
      this.setState({ vacancies: data });
    });
33
    this.updateBookmarkList = this.updateBookmarkList.bind(this);
34
    this.generateVacancies = this.generateVacancies.bind(this);
35
    this.checkBookmark = this.checkBookmark.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
  updateBookmarkList() {
47
    Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
48
49
50
      this.setState({ bookmarkList: data });
    });
  }
51

52
  generateVacancies() {
53
54
55
56
57
58
59
60
61
62
63
64
65
    if (this.props.type === 'student') {
      return this.state.vacancies.map(vacancy =>
        (
          <Vacancy
            key={vacancy.id}
            status={this.props.status}
            bookmarked={this.checkBookmark(vacancy.id)}
            data={vacancy}
          />
        ),
      );
    }

66
    return this.state.vacancies.map(vacancy =>
67
68
69
      (
        <CompanyVacancy key={vacancy.id} data={vacancy} />
      ),
70
71
72
    );
  }

73
74
75
  companyHeader() {
    if (this.props.type === 'company') {
      return (
76
77
78
79
        <Grid style={{ padding: '10px' }}>
          <Button fluid size="mini" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
          <Button fluid size="mini" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
        </Grid>
80
81
82
83
84
      );
    }

    return '';
  }
85

86
  render = () => (
87
    <Segment>
88
    <Grid container columns="eleven" doubling>
89
      { this.companyHeader() }
90
91
92
93
94

        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>

95
    </Grid>
96
    </Segment>
97
  );
98
}