<commit_before>import React, { PropTypes } from 'react'
import { isEmpty, trim } from 'lodash'
import Autosuggest from 'react-autosuggest'
import _ from 'lodash'
import request from 'axios'

// Functions for Autosuggest component
const fuzzySearchUsers = (query) => {
  return request({
    method: 'GET',
    url: 'users/search',
    responseType: 'json',
    params: {
      q: query
    }
  }).then((res) => {
    return res.data.map(obj => _.pick(obj, [ 'name', 'email' ]))
  })
}

const getSuggestionValue = suggestion => suggestion.email

const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}, {suggestion.email}
  </div>
)

// Simple example of a React "dumb" component
export default class GiveKudo extends React.Component {
  static propTypes = {
    // If you have lots of data or action properties, you should consider grouping them by
    // passing two properties: "data" and "actions".
    createKudo: PropTypes.func.isRequired,
  }

  _initialState() {
    return {
      emails: [],
      message: '',
      userSuggestions: [],
      inFlight: false
    }
  }

  constructor(props, context) {
    super(props, context)

    this.state = this._initialState()

    // Uses lodash to bind all methods to the context of the object instance, otherwise
    // the methods defined here would not refer to the component's class, not the component
    // instance itself.
    _.bindAll(this, 'handleClick', 'onChangeSearchInput', 'setMessage', 'onSuccess', 'onFailure')
  }

  // React will automatically provide us with the event `e`
  handleClick(e) {
    this.setState({inFlight: true})
    this.props.createKudo(this.state.emails, this.state.message, this.onSuccess, this.onFailure)
  }

  onSuccess(_res) {
    this.setState(this._initialState())
  }

  onFailure(_err) {
    this.setState({inFlight: false})
  }

  onChangeSearchInput = (event, { newValue }) => {
    this.setState({
      emails: newValue.split(',').map(trim)
    })
  }

  onSuggestionsFetchRequested = ({ value }) => {
    fuzzySearchUsers(value).then(suggestions => {
      this.setState({
        userSuggestions: suggestions
      })
    })
  }

  onSuggestionsClearRequested = () => {
    this.setState({
      userSuggestions: []
    })
  }
  setMessage(e) {
    this.setState({message: e.target.value})
  }

  render() {
    const buttonInnerHTML = this.state.inFlight ? '<i class="fas fa-spinner fa-spin"></i>' : 'Give Kudo'
    const buttonDisabled = isEmpty(this.state.emails) || isEmpty(this.state.message) || this.state.inFlight
    const autoSuggestProps = {
      placeholder: 'Type an email or search a factualite',
      value: this.state.emails.join(', '),
      onChange: this.onChangeSearchInput,
    }
    return (
      <div className="give-kudo">
        <h3>
          Give Kudo
        </h3>
        <form className="give-kudo__form">
          <fieldset className="give-kudo__inputs">
            <label htmlFor="give-kudo__input-email">
              To:
            </label>
            <Autosuggest
              suggestions={this.state.userSuggestions}
              id="give-kudo__input-email"
              disabled={this.state.inFlight}<commit_msg>Prevent default form submission on 'Enter' closes #12927<commit_after>import React, { PropTypes } from 'react'
import { isEmpty, trim } from 'lodash'
import Autosuggest from 'react-autosuggest'
import _ from 'lodash'
import request from 'axios'

// Functions for Autosuggest component
const fuzzySearchUsers = (query) => {
  return request({
    method: 'GET',
    url: 'users/search',
    responseType: 'json',
    params: {
      q: query
    }
  }).then((res) => {
    return res.data.map(obj => _.pick(obj, [ 'name', 'email' ]))
  })
}

const getSuggestionValue = suggestion => suggestion.email

const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}, {suggestion.email}
  </div>
)

// Simple example of a React "dumb" component
export default class GiveKudo extends React.Component {
  static propTypes = {
    // If you have lots of data or action properties, you should consider grouping them by
    // passing two properties: "data" and "actions".
    createKudo: PropTypes.func.isRequired,
  }

  _initialState() {
    return {
      emails: [],
      message: '',
      userSuggestions: [],
      inFlight: false
    }
  }

  constructor(props, context) {
    super(props, context)

    this.state = this._initialState()

    // Uses lodash to bind all methods to the context of the object instance, otherwise
    // the methods defined here would not refer to the component's class, not the component
    // instance itself.
    _.bindAll(this, 'handleClick', 'onChangeSearchInput', 'setMessage', 'onSuccess', 'onFailure')
  }

  // React will automatically provide us with the event `e`
  handleClick(e) {
    this.setState({inFlight: true})
    this.props.createKudo(this.state.emails, this.state.message, this.onSuccess, this.onFailure)
  }

  onSuccess(_res) {
    this.setState(this._initialState())
  }

  onFailure(_err) {
    this.setState({inFlight: false})
  }

  onChangeSearchInput = (event, { newValue }) => {
    this.setState({
      emails: newValue.split(',').map(trim)
    })
  }

  onSuggestionsFetchRequested = ({ value }) => {
    fuzzySearchUsers(value).then(suggestions => {
      this.setState({
        userSuggestions: suggestions
      })
    })
  }

  onSuggestionsClearRequested = () => {
    this.setState({
      userSuggestions: []
    })
  }
  setMessage(e) {
    this.setState({message: e.target.value})
  }

  render() {
    const buttonInnerHTML = this.state.inFlight ? '<i class="fas fa-spinner fa-spin"></i>' : 'Give Kudo'
    const buttonDisabled = isEmpty(this.state.emails) || isEmpty(this.state.message) || this.state.inFlight
    const autoSuggestProps = {
      placeholder: 'Type an email or search a factualite',
      value: this.state.emails.join(', '),
      onChange: this.onChangeSearchInput,
      onKeyPress: e => {
        if (e.key === 'Enter') {
          e.preventDefault()
        }
      },
    }
    return (
      <div className="give-kudo">
        <h3>
          Give Kudo
        </h3>
        <form className="give-kudo__form">
          <fieldset className="give-kudo__inputs">
            <label htmlFor="give-kudo__input-email">
              To:
            </label>
            <Autosuggest
              suggestions={this.state.userSuggestions}
              id="give-kudo__input-email"
              disabled={this.state.inFlight}
{'fraction_non_alphanumeric': 0.12997388231679213, 'fraction_numerical': 0.0013827008757105546, 'mean_word_length': 2.7937062937062938, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 44, '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': '5030299', 'n_tokens_mistral': 2038, 'n_tokens_neox': 1987, 'n_words': 472}