<commit_before>// @flow

import React from 'react';
import {Modal, Button, ControlLabel, FormControl, FormGroup} from 'react-bootstrap';
import ConfirmationModal from '../../common/confirmation/ConfirmationModal.jsx';
import form from "../../utils/forms.js";

export type ContactModalFields = {|
  subject: ?string,
  message: string
|}

type Props = {|
  headerText: string,
  explanationText: string,
  messagePlaceholderText: string,
  showSubject: ?boolean,
  showModal: boolean,
  handleClose: () => void,
  handleSubmission: (ContactModalFields, () => void) => void
|};
type State = {|
  showModal: boolean,
  isSending: boolean,
  formFields: ContactModalFields,
  showConfirmationModal: boolean
|};

/**
 * Modal for sending messages to individuals
 */

class ContactModal extends React.PureComponent<Props, State> {
  constructor(props: Props): void {
    super(props);
    this.state = {
      showModal: false,
      isSending: false,
      formFields: {
        subject: "",
        message: ""
      },
      showConfirmationModal: false
    };
    this.closeModal = this.closeModal.bind(this, this.props.handleClose);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.askForSendConfirmation = this.askForSendConfirmation.bind(this);
    this.receiveSendConfirmation = this.receiveSendConfirmation.bind(this);
  
    this.form = form.setup();
  }

  componentWillReceiveProps(nextProps: Props): void {
    // TODO: Erase fields
    this.setState({ showModal: nextProps.showModal });
  }

  askForSendConfirmation(): void {
    this.setState({showConfirmationModal:true});
  }

  receiveSendConfirmation(confirmation: boolean): void {
    if (confirmation) {
      this.handleSubmit();
    }
    this.setState({showConfirmationModal: false});
  }

  handleSubmit() {
    this.setState({isSending: true});
    this.props.handleSubmission(this.state.formFields, this.closeModal);
  }

  closeModal(){
    this.setState({isSending:false});
    this.props.handleClose();
  }

  render(): React$Node {
    return (
      <div>
        <ConfirmationModal
          showModal={this.state.showConfirmationModal}
          message="Do you want to send this?"
          onSelection={this.receiveSendConfirmation}
        />
          <Modal show={this.state.showModal}
                 onHide={this.closeModal}
          >
              <Modal.Header >
                  <Modal.Title>{this.props.headerText}</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <p>{this.props.explanationText}</p>
                {this.props.showSubject ? this._renderSubjectLineBox() : null}
                <FormGroup>
                  <ControlLabel>Message:</ControlLabel>
                  <FormControl componentClass="textarea"
                    placeholder={this.props.messagePlaceholderText}
                    rows="4"
                    cols="50"
                    name="message"
                    value={this.state.formFields.message}
                    onChange={this.form.onInput.bind(this, "message")}/>
                </FormGroup>
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={this.closeModal}>{"Cancel"}</Button>
                <Button disabled={this.state.isSending} onClick={this.askForSendConfirmation}>{this.state.isSending ? "Sending" : "Send"}</Button>
              </Modal.Footer>
          </Modal>
      </div>
    );
  }
  
  _renderSubjectLineBox(): React$Node {
    return (
      <FormGroup>
        <ControlLabel>Subject</ControlLabel>
        <FormControl componentClass="input" name="subject" maxLength="60"
               value={this.state.formFields.subject} onChange={this.form.onInput.bind(this, "subject")}/>
      </FormGroup><commit_msg>User must enter message text to Contacting volunteers or project owners<commit_after>// @flow

import React from 'react';
import {Modal, Button, ControlLabel, FormControl, FormGroup} from 'react-bootstrap';
import ConfirmationModal from '../../common/confirmation/ConfirmationModal.jsx';
import form from "../../utils/forms.js";
import _ from "lodash";

export type ContactModalFields = {|
  subject: ?string,
  message: string
|}

type Props = {|
  headerText: string,
  explanationText: string,
  messagePlaceholderText: string,
  showSubject: ?boolean,
  showModal: boolean,
  handleClose: () => void,
  handleSubmission: (ContactModalFields, () => void) => void
|};
type State = {|
  showModal: boolean,
  isSending: boolean,
  formFields: ContactModalFields,
  showConfirmationModal: boolean
|};

/**
 * Modal for sending messages to individuals
 */

class ContactModal extends React.PureComponent<Props, State> {
  constructor(props: Props): void {
    super(props);
    this.state = {
      showModal: false,
      isSending: false,
      formFields: {
        subject: "",
        message: ""
      },
      showConfirmationModal: false
    };
    this.closeModal = this.closeModal.bind(this, this.props.handleClose);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.askForSendConfirmation = this.askForSendConfirmation.bind(this);
    this.receiveSendConfirmation = this.receiveSendConfirmation.bind(this);
  
    this.form = form.setup();
  }

  componentWillReceiveProps(nextProps: Props): void {
    // TODO: Erase fields
    this.setState({ showModal: nextProps.showModal });
  }

  askForSendConfirmation(): void {
    this.setState({showConfirmationModal:true});
  }

  receiveSendConfirmation(confirmation: boolean): void {
    if (confirmation) {
      this.handleSubmit();
    }
    this.setState({showConfirmationModal: false});
  }

  handleSubmit() {
    this.setState({isSending: true});
    this.props.handleSubmission(this.state.formFields, this.closeModal);
  }

  closeModal(){
    this.setState({isSending:false});
    this.props.handleClose();
  }

  render(): React$Node {
    return (
      <div>
        <ConfirmationModal
          showModal={this.state.showConfirmationModal}
          message="Do you want to send this?"
          onSelection={this.receiveSendConfirmation}
        />
          <Modal show={this.state.showModal}
                 onHide={this.closeModal}
          >
              <Modal.Header >
                  <Modal.Title>{this.props.headerText}</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <p>{this.props.explanationText}</p>
                {this.props.showSubject ? this._renderSubjectLineBox() : null}
                <FormGroup>
                  <ControlLabel>Message:</ControlLabel>
                  <FormControl componentClass="textarea"
                    placeholder={this.props.messagePlaceholderText}
                    rows="4"
                    cols="50"
                    name="message"
                    value={this.state.formFields.message}
                    onChange={this.form.onInput.bind(this, "message")}/>
                </FormGroup>
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={this.closeModal}>{"Cancel"}</Button>
                <Button disabled={this.state.isSending || _.isEmpty(this.state.formFields.message)} onClick={this.askForSendConfirmation}>{this.state.isSending ? "Sending" : "Send"}</Button>
              </Modal.Footer>
          </Modal>
      </div>
    );
  }
  
  _renderSubjectLineBox(): React$Node {
    return (
      <FormGroup>
        <ControlLabel>Subject</ControlLabel>
        <FormControl componentClass="input" name="subject" maxLength="60"
               value={this.state.formFields.subject} onChange={this.form.onInput.bind(this, "subject")}/>
      </FormGroup>
{'fraction_non_alphanumeric': 0.12816827802456232, 'fraction_numerical': 0.0013065064018813691, 'mean_word_length': 2.5588098558809858, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6196142', 'n_tokens_mistral': 2186, 'n_tokens_neox': 2142, 'n_words': 377}