Fakultas Ilmu Komputer UI

Vacancy.jsx 2.22 KB
Newer Older
1
import React from 'react';
2
import { Item, Rating } from 'semantic-ui-react';
3
import ApplyModal from './ApplyModal';
4
5
import Storage from '../lib/Storage';
import Server from '../lib/Server';
6
import CancelModal from './CancelModal';
7

8
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
9

M. Reza Qorib's avatar
M. Reza Qorib committed
10
export default class Vacancy extends React.Component {
11
12
  static propTypes = {
    data: React.PropTypes.object.isRequired,
13
    bookmarked: React.PropTypes.number,
14
    status: React.PropTypes.string.isRequired,
15
16
17
18
  };

  static defaultProps = {
    bookmarked: 0,
19
20
  };

21
22
23
  constructor(props) {
    super(props);
    /* istanbul ignore next */
24
    this.state = { bookmarked: this.props.bookmarked };
25
    this.bookmark = this.bookmark.bind(this);
26
    this.generateAction = this.generateAction.bind(this);
27
28
29
30
31
  }

  bookmark() {
    const studentId = Storage.get('user-data').student.id;
    const data = { vacancy_id: this.props.data.id };
32
    if (this.state.bookmarked < 1) {
33
34
35
36
37
      Server.post(`/students/${studentId}/bookmarked-vacancies/`, data);
    } else {
      Server.delete(`/students/${studentId}/bookmarked-vacancies/${this.props.data.id}/`);
    }
    this.state.bookmarked = 1 - this.state.bookmarked;
38
39
  }

40
41
42
43
44
45
46
47
48
49
  generateAction() {
    const applyModal = (<ApplyModal
      id={this.props.data.id} data={{ header: this.props.data.name,
        description: this.props.data.description }} buttonTitle="Detail"
    />);

    const cancelModal = <CancelModal id={this.props.data.id} />;
    return this.props.status === 'Daftar' ? applyModal : cancelModal;
  }

50
51
  render() {
    return (
52
      <Item className="applicantItems">
53
        <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
54
55
56
        <Item.Content verticalAlign="middle">
          <Item.Extra>
            <h3>{ this.props.data.name }</h3>
sirinbaisa's avatar
sirinbaisa committed
57
58

            <div className="bookmark">
59
              <Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={this.props.bookmarked} maxRating={1} />
sirinbaisa's avatar
sirinbaisa committed
60
            </div>
61
62
63
            <h4>{ this.props.data.company.name }</h4>
            <h5>{ this.props.data.company.address }</h5>

64
            { this.generateAction() }
65
66
67
68
69
70

          </Item.Extra>
        </Item.Content>
      </Item>
    );
  }
71
}