ApproveModal.jsx

import React from 'react';
import { Modal, Button } from 'semantic-ui-react';
import Server from './../lib/Server';
import ConfirmationModal from './../components/ConfirmationModal';
import Applicant from './../components/Applicant';

export default class ApproveModal extends React.Component {
  static propTypes = {
    data: React.PropTypes.object.isRequired,
    updateStatus: React.PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      modalOpen: false,
      rejectLoading: false,
      acceptLoading: false,
    };
    this.handleOpen = this.handleOpen.bind(this);
    this.reject = this.reject.bind(this);
    this.accept = this.accept.bind(this);
  }

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

  rejectApplication = () => {
    const data = { status: Applicant.APPLICATION_STATUS.REJECTED };
    this.setState({ rejectLoading: true });
    Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
      this.props.updateStatus(this.props.data.id, status.status);
    });
  };

  reject = () => {
    this.modal.open(
      'Tolak Lamaran?',
      'Apakah anda yakin untuk menolak lamaran ini?',
      'trash',
      this.rejectApplication,
    );
  };

  acceptApplication = () => {
    const data = { status: Applicant.APPLICATION_STATUS.ACCEPTED };
    this.setState({ acceptLoading: true });
    Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
      this.props.updateStatus(this.props.data.id, status.status);
    });
  };

  accept = () => {
    this.modal.open(
      'Terima Lamaran?',
      'Apakah anda yakin untuk menerima lamaran ini?',
      'checkmark',
      this.acceptApplication,
    );
  };

  render = () => (
    <Modal
      trigger={<Button primary onClick={this.handleOpen} floated="right">Detail</Button>}
      closeIcon="close"
      open={this.state.modalOpen}
      onClose={this.handleClose}
    >
      <ConfirmationModal ref={(modal) => { this.modal = modal; }} />
      <Modal.Header>Data Lamaran</Modal.Header>
      <Modal.Content>
        <h4> Cover Letter </h4>
        { this.props.data.cover_letter }
        <div style={{ float: 'right' }}>
          <a href={this.props.data.resume} >CV Pelamar </a>
        </div>
      </Modal.Content>
      <Modal.Actions>
        <Button.Group>
          <Button disabled={this.props.data.status === Applicant.APPLICATION_STATUS.REJECTED} loading={this.state.rejectLoading} color="red" onClick={this.reject}>Tolak Lamaran</Button>
          <Button.Or />
          <Button disabled={this.props.data.status === Applicant.APPLICATION_STATUS.ACCEPTED} loading={this.state.acceptLoading} color="green" onClick={this.accept}>Terima Lamaran</Button>
        </Button.Group>
      </Modal.Actions>
    </Modal>
    )
}