<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { setSelectedOption } from '../actions/selectedOptionsActions';
import styles from '../css/components/CategoryContactStyles.css';
import { MASTER_OPTIONS } from './helpers/MASTER_OPTIONS';


class ContactComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      companyName: "",
      email: "",
      telephone: ""
    }
  }

  render() {



    return (
      <div>
        <div className={[styles.categoryHeader].join(' ')}>
          {this.props.category.categoryHeader}
        </div>
        <div className={[styles.wrapperContactForm].join(' ')}>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <div>
          sample input styles=>>>>
        </div>
        <div className={[styles.wrapperContactForm].join(' ')}>
          <form role="form"
                data-toggle="validator"
                className={[styles.contactForm].join(' ')}>
            <div className="form-group">
              <label className="control-label"
                     htmlFor="focusedInput">
                Focused
              </label>
              <input className="form-control"
                     id="focusedInput"
                     type="text"
                     value="Click to focus..." />
            </div>
            <div className="form-group has-success has-feedback">
              <label className="control-label"
                     htmlFor="inputSuccess">
                Input with success and glyphicon
              </label>
              <input type="text"
                     className={[styles.inputField, "form-control"].join(' ')}
                     id="inputSuccess" />
              <span className="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div className="form-group has-warning has-feedback">
              <label className="control-label"
                     htmlFor="inputWarning">
                Input with warning and glyphicon
              </label>
              <input type="text"
                     className="form-control"
                     id="inputWarning" />
              <span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div className="form-group has-error has-feedback">
              <label className="control-label"
                     htmlFor="inputError">
                Input with error and glyphicon
              </label>
              <input type="text"
                     className="form-control"
                     id="inputError" />
              <span className="glyphicon glyphicon-remove form-control-feedback"></span>
              <div className={["form-control-feedback", styles.errorMessage].join(' ')}>
                Shucks, check the formatting of that and try again.
              </div>
              <small className="form-text text-muted">Example help text that remains unchanged.</small>
            </div>
            <button type="submit"
                    className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>

    );
  }
}

ContactComponent.propTypes = {
  // index: PropTypes.number.isRequired,
  category: PropTypes.object.isRequired


// selectedOptions: PropTypes.object,
// topics: PropTypes.array.isRequired,<commit_msg>wip: contact form with validation<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { setSelectedOption } from '../actions/selectedOptionsActions';
import styles from '../css/components/CategoryContactStyles.css';
import { MASTER_OPTIONS } from './helpers/MASTER_OPTIONS';


class ContactComponent extends Component {
  constructor(props) {
    super(props);

    this.onCompanyNameChange = this.onCompanyNameChange.bind(this);
    this.onEmailChange = this.onEmailChange.bind(this);
    this.onTelephoneChange = this.onTelephoneChange.bind(this);
    this.submitContactForm = this.submitContactForm.bind(this);
    this.getFormGroupCompanyName = this.getFormGroupCompanyName.bind(this);

    this.verifyCompanyName = this.verifyCompanyName.bind(this);


    this.state = {
      companyName: "",
      email: "",
      telephone: "",

      companyNameStatus: {
        isValid: true
      },
      emailStatus: {
        isValid: true
      },
      telephoneStatus: {
        isValid: true
      }
    }
  }

  verifyCompanyName() {
    if (this.state.companyName == "") {
      this.setState({
        companyNameStatus: {
          isValid: false,
          message: "Company name is Required"
        }
      })
    } else {
      this.setState({
        companyNameStatus: {
          isValid: true
        }
      })
    }
  }
  submitContactForm() {
    console.log("submitContactForm");
    this.verifyCompanyName();

  }


  onCompanyNameChange(event) {
    console.log("onCompanyNameChange");

    this.setState({
      companyName: event.target.value
    }, () => {
      this.verifyCompanyName()
    })



  }

  onEmailChange(event) {
    console.log("onEmailChange");
    this.setState({
      email: event.target.value
    })

  }
  onTelephoneChange(event) {
    console.log("onTelephoneChange");
    this.setState({
      telephone: event.target.value
    })

  }

  getFormGroupCompanyName(companyNameIsValid) {
    if (companyNameIsValid) {

      return (
        <div className="form-group">
          <label className="control-label" htmlFor="idCompanyName">
            Company Name
          </label>
          <input className="form-control"
                 id="idCompanyName"
                 type="text"
                 defaultValue={this.state.companyName}
                 onChange={this.onCompanyNameChange} />
        </div>
      )
    } else {
      return (
        <div className="form-group has-error has-feedback">
          <label className="control-label" htmlFor="idCompanyName">
            Company Name
          </label>
          <input type="text"
                 className="form-control"
                 id="idCompanyName"
                 defaultValue={this.state.companyName}
                 onChange={this.onCompanyNameChange} />
          <span className="glyphicon glyphicon-remove form-control-feedback"></span>
          <div className={["form-control-feedback", styles.errorMessage].join(' ')}>
            {this.state.companyNameStatus.message}
          </div>
        </div>
      )
    }
  }


  render() {

    const formGroupCompanyName = this.getFormGroupCompanyName(this.state.companyNameStatus.isValid);

    return (
      <div>
        <div className={[styles.categoryHeader].join(' ')}>
          {this.props.category.categoryHeader}
        </div>
        <div className={[styles.wrapperContactForm].join(' ')}>
          <form role="form" data-toggle="validator" className={[styles.contactForm].join(' ')}>
            {formGroupCompanyName}
            <button type="button" className="btn btn-primary" onClick={this.submitContactForm}>
              Submit
            </button>
          </form>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <div>
          sample input styles=>>>>
        </div>
        <div className={[styles.wrapperContactForm].join(' ')}>
          <form role="form" data-toggle="validator" className={[styles.contactForm].join(' ')}>
            <div className="form-group">
              <label className="control-label" htmlFor="focusedInput">
                Focused
              </label>
              <input className="form-control"
                     id="focusedInput"
                     type="text"
                     value="Click to focus..." />
            </div>
            <div className="form-group has-success has-feedback">
              <label className="control-label" htmlFor="inputSuccess">
                Input with success and glyphicon
              </label>
              <input type="text" className={[styles.inputField, "form-control"].join(' ')} id="inputSuccess" />
              <span className="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div className="form-group has-warning has-feedback">
              <label className="control-label" htmlFor="inputWarning">
                Input with warning and glyphicon
              </label>
              <input type="text" className="form-control" id="inputWarning" />
              <span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div className="form-group has-error has-feedback">
              <label className="control-label" htmlFor="inputError">
                Input with error and glyphicon
              </label>
              <input type="text" className="form-control" id="inputError" />
              <span className="glyphicon glyphicon-remove form-control-feedback"></span>
              <div className={["form-control-feedback", styles.errorMessage].join(' ')}>
                Shucks, check the formatting of that and try again.
              </div>
              <small className="form-text text-muted">Example help text that remains unchanged.</small>
            </div>
          </form>
        </div>
      </div>

      );
  }
}

ContactComponent.propTypes = {
  // index: PropTypes.number.isRequired,
  category: PropTypes.object.isRequired


// selectedOptions: PropTypes.object,
// topics: PropTypes.array.isRequired,
{'fraction_non_alphanumeric': 0.12796355730406875, 'fraction_numerical': 0.0, 'mean_word_length': 1.9113924050632911, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 124, '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': '3812492', 'n_tokens_mistral': 2553, 'n_tokens_neox': 2470, 'n_words': 479}