Fakultas Ilmu Komputer UI

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

export default class ModalPendaftaran extends React.Component {
  static propTypes = {
8
9
10
    data: React.PropTypes.object.isRequired,
    id: React.PropTypes.number.isRequired,
    buttonTitle: React.PropTypes.string.isRequired,
11
  };
sirinbaisa's avatar
sirinbaisa committed
12

13
14
  static successResponse = 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n';
  static failedResponse = 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n';
sirinbaisa's avatar
sirinbaisa committed
15

16
17
18
19
20
21
22
23
24
25
  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      modalOpen: false,
      responseHeader: 'Menghubungkan ke Server',
      responseText: 'Terima kasih sudah mendaftar!',
      coverLetter: '',
    };
    this.handleChange = this.handleChange.bind(this);
26
    this.handleOpen = this.handleOpen.bind(this);
27
28
29
  }

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

  handleOpen() {
34
    console.log(this.state);
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    const data = { coverLetter: this.state.coverLetter };
    Server.post(`/students/${this.props.id}/application`, data).then((data) => {
      this.setState({
        responseHeader: 'Pendaftaran Berhasil',
        responseText: this.successResponse + JSON.stringify(data),
      });
    }, (error) => {
      this.setState({
        responseHeader: 'Pendaftaran Gagal',
        responseText: this.failedResponse + JSON.stringify(error),
      });
    });
    this.setState({ modalOpen: true });
  }
sirinbaisa's avatar
sirinbaisa committed
49
50
51
52
53
54
55

  handleClose = () => this.setState({
    modalOpen: false,
  });

  render = () => (
    <Modal
56
      trigger={<Button onClick={this.handleOpen} >{this.props.buttonTitle}</Button>}
sirinbaisa's avatar
sirinbaisa committed
57
58
59
60
61
      closeIcon="close"
      open={this.state.modalOpen}
      onClose={this.handleClose}
    >

62
      <Modal.Header>{this.props.data.header}</Modal.Header>
sirinbaisa's avatar
sirinbaisa committed
63
64
65
66
67
68
      <Modal.Content image>
        <div className="image">
          <Icon name="right arrow" />
        </div>
        <Modal.Description>
          <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
69
          {this.props.data.description}
sirinbaisa's avatar
sirinbaisa committed
70
71
72
73
74
75
76
77

          <div className="linkCV">
            <a> your latest CV </a>
          </div>

          <div className="coverLetter">
            <h5> Write your Cover Letter </h5>
            <Form>
78
              <TextArea placeholder="Tell us more" onChange={this.handleChange} />
sirinbaisa's avatar
sirinbaisa committed
79
80
81
82
83
84
            </Form>
          </div>

        </Modal.Description>
      </Modal.Content>
      <Modal.Actions>
85
86
87
88
89
        <ModalAlert
          onChangeValue={this.handleClose}
          header={this.state.responseHeader}
          content={this.state.responseText}
        />
sirinbaisa's avatar
sirinbaisa committed
90
91
92
93
94
      </Modal.Actions>
    </Modal>
    )
}