<commit_before>// @flow

import React from 'react';
import {Button} from 'react-bootstrap';
import type {ProjectDetailsAPIData} from "../../utils/ProjectAPIUtils.js";
import CurrentUser from "../../utils/CurrentUser.js";
import ContactModal from "./ContactModal.jsx";
import metrics from "../../utils/metrics";
import ProjectAPIUtils from "../../utils/ProjectAPIUtils";

type Props = {|
  project: ?ProjectDetailsAPIData
|};
type State = {|
  project: ?ProjectDetailsAPIData,
  showContactModal: boolean
|};

/**
 * Button to open Modal for sending messages to project volunteers
 */
class ContactVolunteersButton extends React.PureComponent<Props, State> {
  constructor(props: Props): void {
    super(props);

    this.state = {
      project: props.project,
      showContactModal: false,
    };
    
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this._handleSubmission = this._handleSubmission.bind(this);
  }
  
  handleShow() {
    // TODO: Add metrics
    // metrics.logUserClickContactProjectOwner(CurrentUser.userID(), this.props.project.project_id);
    this.setState({showContactModal: true});
  }
  
  _handleSubmission(fields, closeModal): ?React$Node {
    // TODO: Get close modal working
    ProjectAPIUtils.post("/contact/volunteers/" + this.props.project.project_id + "/",
      fields,
      closeModal, //Send function to close modal
      response => null /* TODO: Report error to user */
    );
  }
  
  handleClose() {
    this.setState({showContactModal: false});
  }
  
  _renderContactVolunteerButton(): React$Node {
    return (
      <Button
        className="AboutProject-button btn btn-theme"
        type="button"
        title={"Contact Volunteers"}
        onClick={this.handleShow}
      >
        Contact Volunteers
      </Button>
    );
  }
  
  displayContactVolunteerButton(): ?React$Node {
    return (
      <React.Fragment>
        {this._renderContactVolunteerButton()}
        <ContactModal
          headerText={"Send message to Project Volunteers"}
          explanationText={"Volunteers can reply to your message via your registered email."}
          showSubject={true}
          showModal={this.state.showContactModal}
          handleClose={this.handleClose}
          handleSubmission={this._handleSubmission}
        />
      </React.Fragment>
    );
  }
  
  
  render(): ?React$Node {
    if (CurrentUser.isCoOwnerOrOwner(this.props.project)) {
      return (
        <div>
          {this.displayContactVolunteerButton()}
        </div>)
    } else {
      return null;
    }
  }
}
<commit_msg>Don't show Contact Volunteers button for project with no volunteers<commit_after>// @flow

import React from 'react';
import {Button} from 'react-bootstrap';
import type {ProjectDetailsAPIData} from "../../utils/ProjectAPIUtils.js";
import CurrentUser from "../../utils/CurrentUser.js";
import ContactModal from "./ContactModal.jsx";
import metrics from "../../utils/metrics";
import ProjectAPIUtils from "../../utils/ProjectAPIUtils";
import _ from "lodash";

type Props = {|
  project: ?ProjectDetailsAPIData
|};
type State = {|
  project: ?ProjectDetailsAPIData,
  showContactModal: boolean
|};

/**
 * Button to open Modal for sending messages to project volunteers
 */
class ContactVolunteersButton extends React.PureComponent<Props, State> {
  constructor(props: Props): void {
    super(props);

    this.state = {
      project: props.project,
      showContactModal: false,
    };
    
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this._handleSubmission = this._handleSubmission.bind(this);
  }
  
  handleShow() {
    // TODO: Add metrics
    // metrics.logUserClickContactProjectOwner(CurrentUser.userID(), this.props.project.project_id);
    this.setState({showContactModal: true});
  }
  
  _handleSubmission(fields, closeModal): ?React$Node {
    // TODO: Get close modal working
    ProjectAPIUtils.post("/contact/volunteers/" + this.props.project.project_id + "/",
      fields,
      closeModal, //Send function to close modal
      response => null /* TODO: Report error to user */
    );
  }
  
  handleClose() {
    this.setState({showContactModal: false});
  }
  
  _renderContactVolunteerButton(): React$Node {
    return (
      <Button
        className="AboutProject-button btn btn-theme"
        type="button"
        title={"Contact Volunteers"}
        onClick={this.handleShow}
      >
        Contact Volunteers
      </Button>
    );
  }
  
  displayContactVolunteerButton(): ?React$Node {
    return (
      <React.Fragment>
        {this._renderContactVolunteerButton()}
        <ContactModal
          headerText={"Send message to Project Volunteers"}
          explanationText={"Volunteers can reply to your message via your registered email."}
          showSubject={true}
          showModal={this.state.showContactModal}
          handleClose={this.handleClose}
          handleSubmission={this._handleSubmission}
        />
      </React.Fragment>
    );
  }
  
  
  render(): ?React$Node {
    if (CurrentUser.isCoOwnerOrOwner(this.props.project) && !_.isEmpty(this.props.project.project_volunteers)) {
      return (
        <div>
          {this.displayContactVolunteerButton()}
        </div>)
    } else {
      return null;
    }
  }
}

{'fraction_non_alphanumeric': 0.12460302634036989, 'fraction_numerical': 0.0, 'mean_word_length': 2.930983847283407, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, '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': '7319447', 'n_tokens_mistral': 1534, 'n_tokens_neox': 1552, 'n_words': 327}