ModalPendaftaran.jsx

import React from 'react';
import { Modal, Button, Icon, TextArea, Form } from 'semantic-ui-react';
import ModalAlert from './ModalAlert';

export default class ModalPendaftaran extends React.Component {
  static propTypes = {
    data: React.PropTypes.object.isRequired,
    id: React.PropTypes.number.isRequired,
    buttonTitle: React.PropTypes.string.isRequired,
  };

  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';

  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);
    this.handleOpen = this.handleOpen.bind(this);
  }

  handleChange(event) {
    // this.setState({ coverLetter: event.target.value });
  }

  handleOpen() {
    this.setState({ modalOpen: true });
  }

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

  render = () => (
    <Modal
      trigger={<Button 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>

        <Modal.Description>
          <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
          {this.props.data.description}

        </Modal.Description>

          <div className="coverLetter">

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

            <h5> Write your Cover Letter </h5>
            <Form >
              <TextArea placeholder="Tell us more" size='big' />
            </Form>

          </div>

      </Modal.Content>
      <Modal.Actions>
        <ModalAlert
          id={this.props.id}
          onChangeValue={this.handleClose}
          coverLetter={this.state.coverLetter}
        />
      </Modal.Actions>
    </Modal>
    )
}