Fakultas Ilmu Komputer UI

ApplyModal.jsx 3.58 KB
Newer Older
sirinbaisa's avatar
sirinbaisa committed
1
import React from 'react';
2
import { Icon, Modal, Button, TextArea, Form, Message } from 'semantic-ui-react';
3
import ModalAlert from './../components/ModalAlert';
4
import Server from './../lib/Server';
sirinbaisa's avatar
sirinbaisa committed
5

6
export default class ApplyModal extends React.Component {
sirinbaisa's avatar
sirinbaisa committed
7
  static propTypes = {
8
    data: React.PropTypes.object.isRequired,
9
    active: React.PropTypes.bool.isRequired,
10
    buttonTitle: React.PropTypes.string.isRequired,
11
    resume: React.PropTypes.string.isRequired,
12
    studentId: React.PropTypes.number.isRequired,
13
    updateStatus: React.PropTypes.func.isRequired,
14
  };
sirinbaisa's avatar
sirinbaisa committed
15

16
17
18
19
20
21
  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      modalOpen: false,
      coverLetter: '',
22
      load: false,
23
24
    };
    this.handleChange = this.handleChange.bind(this);
25
    this.handleOpen = this.handleOpen.bind(this);
26
    this.handleApply = this.handleApply.bind(this);
27
28
29
  }

  handleChange(event) {
30
    this.setState({ coverLetter: event.target.value });
31
32
33
34
35
  }

  handleOpen() {
    this.setState({ modalOpen: true });
  }
sirinbaisa's avatar
sirinbaisa committed
36
37
38

  handleClose = () => this.setState({
    modalOpen: false,
39
    load: false,
sirinbaisa's avatar
sirinbaisa committed
40
41
  });

42
  handleApply = () => {
43
44
45
46
    this.setState({ load: true });
    const requestData = { vacancy_id: this.props.data.id, cover_letter: this.state.coverLetter };
    Server.post(`/students/${this.props.studentId}/applied-vacancies/`, requestData).then(() => {
      this.modalAlert.open('Pendaftaran Berhasil', 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n', this.handleClose);
47
      this.props.updateStatus('registered');
48
49
    }, () => this.modalAlert.open('Pendaftaran Gagal', 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n', this.handleClose),
    );
50
51
  };

52
  render() {
53
54
55
56
57
58
59
60
61
62
63
64
    return (
      <Modal
        trigger={<Button primary onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
        closeIcon="close"
        open={this.state.modalOpen}
        onClose={this.handleClose}
      >
        <Modal.Header>{this.props.data.header}</Modal.Header>
        <Modal.Content>
          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
          <Modal.Description>
            <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
65
            { <div dangerouslySetInnerHTML={{ __html: this.props.data.description }} /> }
66
67
68
69
70
          </Modal.Description>
          {this.props.active && (
            <div className="coverLetter">
              <br />
              <div className="linkCV">
71
72
73
74
75
76
77
78
79
                { this.props.resume ? (<a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>)
                  : (
                    <Message
                      error
                      icon="warning sign"
                      header="CV Tidak Ditemukan"
                      content="Anda belum mengunggah CV. Harap ubah profil anda terlebih dahulu pada halaman Profil."
                    />)
                  }
80
81
82
83
84
85
86
87
              </div>
              <br />
              <div>
                <h5>Cover Letter </h5>
                <Form >
                  <TextArea placeholder="Tell us more" size="big" onChange={this.handleChange} />
                </Form>
              </div>
88
            </div>
89
           )}
90
91
92
93
94
95
96
97
98
        </Modal.Content>
        <Modal.Actions>
          <Button loading={this.state.load} color="blue" disabled={!this.props.active} onClick={this.handleApply}>
            { this.props.active ? 'Daftar' : 'Sudah Terdaftar' } <Icon name="right chevron" />
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
sirinbaisa's avatar
sirinbaisa committed
99
}