Fakultas Ilmu Komputer UI

Vacancy.jsx 1.92 KB
Newer Older
1
import React from 'react';
2
import { Button, Image as ImageComponent, Item, Rating } from 'semantic-ui-react';
3
import ModalPendaftaran from './ModalPendaftaran';
4
5
import Storage from '../lib/Storage';
import Server from '../lib/Server';
6

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

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

  static defaultProps = {
    bookmarked: 0,
17
18
  };

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

  bookmark() {
    const studentId = Storage.get('user-data').student.id;
    const data = { vacancy_id: this.props.data.id };
29
30
31
32
33
34
    if (this.state.bookmarked < 1){
      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;
35
36
  }

37
38
39
  render() {
    return (
      <Item >
40
        <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
41
42
43
        <Item.Content verticalAlign="middle">
          <Item.Extra>
            <h3>{ this.props.data.name }</h3>
sirinbaisa's avatar
sirinbaisa committed
44
45

            <div className="bookmark">
46
              <Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={this.props.bookmarked} maxRating={1} />
sirinbaisa's avatar
sirinbaisa committed
47
            </div>
48
49
50
51
52
            <h4>{ this.props.data.company.name }</h4>
            <h5>{ this.props.data.company.address }</h5>

            <ModalPendaftaran
              id={this.props.data.id} data={{ header: this.props.data.name,
53
54
                description: this.props.data.description }} buttonTitle="Daftar"
            />
55
56
57
58
59
60

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