<commit_before>/* globals React:false */
import AAQStep from './AAQStep.jsx';
import AAQActions from '../actions/AAQActions.es6.js';
import aaqGa from '../utils/aaqGa.es6.js';
import UrlActions from '../../../sumo/js/actions/UrlActions.es6.js';

export default class TitleContentEditor extends AAQStep {
  handleChange(ev) {
    let {name, value} = ev.target;
    aaqGa.trackEventOnce(`${name} input`);
    if (name === 'title') {
      AAQActions.setTitle(value);
    } else if (name === 'content') {
      AAQActions.setContent(value);
    } else {
      throw new Error(`Unknown field name ${name} in TitleContentEditor.`);
    }
  }

  componentWillMount() {
    if (!this.props.question.topic && !this.props.question.product) {
      this.setPropsFromUrl();
    }
  }

  componentDidMount() {
    AAQActions.checkTroubleshootingAvailable();
  }

  shouldExpand() {
    return (this.props.question.topic !== null &&
            this.props.question.product !== null);
  }

  heading() {
    return 'Summarize your question in a sentence';
  }

  body() {
    return (
      <div className="AAQApp__TitleContentEditor">
        <div className="row">
          <div className="AAQApp__TitleContentEditor__Editor">
            <div className="AAQApp__TitleContentEditor__Editor__Title simple-search-form">
              <input
                type="text"
                name="title"
                className="searchbox"
                value={this.props.question.title}
                onChange={this.handleChange.bind(this)}
                ref="title"/>
            </div>
            <SuggestionList suggestions={this.props.suggestions} />
            <div className="AAQApp__TitleContentEditor__Editor__Content">
              <h3>Details</h3>
              <textarea
                name="content"
                value={this.props.question.content}
                onChange={this.handleChange.bind(this)}
                ref="content"/>
            </div>
          </div>

        </div>

        {this.props.troubleshooting.available
          ? <div className="row">
              <TroubleshootingData {...this.props.troubleshooting}/>
            </div>
          : null}
      </div>
    );
  }
}
TitleContentEditor.propTypes = {
  className: React.PropTypes.string,
  question: React.PropTypes.object.isRequired,
  suggestions: React.PropTypes.array.isRequired,
  troubleshooting: React.PropTypes.object.isRequired,
};

class SuggestionList extends React.Component {
  render() {
    let style = {
      display: this.props.suggestions.length > 0 ? 'block' : 'none'
    };
    return (
      <div className="AAQApp__SuggestionList" style={style}>
        <h3>Do any of these articles answer your question?</h3>
        <ul className="highlight-box">
          {this.props.suggestions.map((suggestion) => (
            <SuggestionItem key={suggestion.slug} suggestion={suggestion}/>))}
        </ul>
      </div>
    );
  }
}
SuggestionList.propTypes = {
  suggestions: React.PropTypes.array.isRequired,
};

class SuggestionItem extends React.Component {
  render() {
    let suggestion = this.props.suggestion;
    let classString = 'AAQApp__SuggestionList__SuggestionItem ' + suggestion.type;
    return (
      <li className={classString}>
        <a
          href={suggestion.url}
          data-ga-click="Ask A Question Flow - SPA | suggested article selected"
        >
          {suggestion.title}
        </a>
        <div dangerouslySetInnerHTML={{__html: suggestion.summary}}/>
      </li>
    );
  }
}
SuggestionItem.propTypes = {
  suggestion: React.PropTypes.object.isRequired,
};
<commit_msg>Fix ga-click attribute to track suggested article clicks<commit_after>/* globals React:false */
import AAQStep from './AAQStep.jsx';
import AAQActions from '../actions/AAQActions.es6.js';
import aaqGa from '../utils/aaqGa.es6.js';
import UrlActions from '../../../sumo/js/actions/UrlActions.es6.js';

export default class TitleContentEditor extends AAQStep {
  handleChange(ev) {
    let {name, value} = ev.target;
    aaqGa.trackEventOnce(`${name} input`);
    if (name === 'title') {
      AAQActions.setTitle(value);
    } else if (name === 'content') {
      AAQActions.setContent(value);
    } else {
      throw new Error(`Unknown field name ${name} in TitleContentEditor.`);
    }
  }

  componentWillMount() {
    if (!this.props.question.topic && !this.props.question.product) {
      this.setPropsFromUrl();
    }
  }

  componentDidMount() {
    AAQActions.checkTroubleshootingAvailable();
  }

  shouldExpand() {
    return (this.props.question.topic !== null &&
            this.props.question.product !== null);
  }

  heading() {
    return 'Summarize your question in a sentence';
  }

  body() {
    return (
      <div className="AAQApp__TitleContentEditor">
        <div className="row">
          <div className="AAQApp__TitleContentEditor__Editor">
            <div className="AAQApp__TitleContentEditor__Editor__Title simple-search-form">
              <input
                type="text"
                name="title"
                className="searchbox"
                value={this.props.question.title}
                onChange={this.handleChange.bind(this)}
                ref="title"/>
            </div>
            <SuggestionList suggestions={this.props.suggestions} />
            <div className="AAQApp__TitleContentEditor__Editor__Content">
              <h3>Details</h3>
              <textarea
                name="content"
                value={this.props.question.content}
                onChange={this.handleChange.bind(this)}
                ref="content"/>
            </div>
          </div>

        </div>

        {this.props.troubleshooting.available
          ? <div className="row">
              <TroubleshootingData {...this.props.troubleshooting}/>
            </div>
          : null}
      </div>
    );
  }
}
TitleContentEditor.propTypes = {
  className: React.PropTypes.string,
  question: React.PropTypes.object.isRequired,
  suggestions: React.PropTypes.array.isRequired,
  troubleshooting: React.PropTypes.object.isRequired,
};

class SuggestionList extends React.Component {
  render() {
    let style = {
      display: this.props.suggestions.length > 0 ? 'block' : 'none'
    };
    return (
      <div className="AAQApp__SuggestionList" style={style}>
        <h3>Do any of these articles answer your question?</h3>
        <ul className="highlight-box">
          {this.props.suggestions.map((suggestion) => (
            <SuggestionItem key={suggestion.slug} suggestion={suggestion}/>))}
        </ul>
      </div>
    );
  }
}
SuggestionList.propTypes = {
  suggestions: React.PropTypes.array.isRequired,
};

class SuggestionItem extends React.Component {
  render() {
    let suggestion = this.props.suggestion;
    let classString = 'AAQApp__SuggestionList__SuggestionItem ' + suggestion.type;
    return (
      <li className={classString}>
        <a
          href={suggestion.url}
          data-ga-click="_trackEvent | Ask A Question Flow - SPA | suggested article selected"
        >
          {suggestion.title}
        </a>
        <div dangerouslySetInnerHTML={{__html: suggestion.summary}}/>
      </li>
    );
  }
}
SuggestionItem.propTypes = {
  suggestion: React.PropTypes.object.isRequired,
};

{'fraction_non_alphanumeric': 0.1310127449636837, 'fraction_numerical': 0.002192681924078388, 'mean_word_length': 2.4086875291919663, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 67, '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': '5013623', 'n_tokens_mistral': 2203, 'n_tokens_neox': 2136, 'n_words': 386}