<commit_before>import React from 'react';
import Autosuggest from 'react-biz/lib/autosuggest';
import Avatar from 'react-biz/lib/avatar';
import Highlighter from 'react-highlight-words/dist/main';
import style from './SelectUser.scss';

const PersonIcon = (props) => (
  <svg {...props} fill="#000000" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
);
export default class SelectUser extends React.Component {
  static propTypes = {
    error: React.PropTypes.string,
    label: React.PropTypes.string,
    onChange: React.PropTypes.func,
    value: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string])
  };
  state = {
    countries: '',
    query: '',
    user: this.props.value,
    users: []
  };

  componentDidMount () {
    this.fetchData();
  }
  componentWillReceiveProps (nextProps) {
    this.setState({user: nextProps.value});
  }
  fetchData = (q) => {
    if (!q) {
      q = '';
    }
    let token = localStorage.getItem('userToken') || null;
    let filter = { '$or': [ { name: q }, { lastName: q } ] };

    return fetch(`http://10.1.1.219:3001/api/users?conditions=${JSON.stringify(filter)}`,
      {
        method: 'GET',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
      })
      .then(response => response.json())
      .then(json => this.setState({users: json})).bind(this);
  };
  handleChange = (query) => {
    this.setState({user: query});
    this.fetchData(query);
  };
  handleSelect = (key, value) => {
    this.props.onChange(value);
  };

  customUser = (item) => {
    const containerStyle = {
      display: 'flex',
      flexDirection: 'row',
    };

    const contentStyle = {
      display: 'flex',
      flexDirection: 'column',
      flexGrow: 2,
      paddingLeft: '5px',
    };
    const positionStyle = {
      fontSize: '11px',
      color: 'gray',
    };
    const avatarStyle = {
      display: 'inline-block',
      width: 40,
      height: 40,
    };
    return (
      <div style={containerStyle}>
        {item.img ? <Avatar><img src={item.img} /></Avatar> :
          <Avatar style={avatarStyle} icon={<PersonIcon height="60" width="60" />} />}
        <div style={contentStyle}>
          <Highlighter highlightClassName={style.highlightRed}
            searchWords={this.state.query.trim().length > 0 ? this.state.query.split(' ') : []}
            textToHighlight={item.value ? item.value : ''}
          />
          <span style={positionStyle}>{item.position}</span>
        </div>
      </div>
    );
  };
  render () {
    let label = this.props.label ? this.props.label : 'Выбор сотрудника';
    return (
      <Autosuggest
        className={style.suggest}
        direction="down"
        label={label}
        multiple={false}
        name="user"
        error={this.props.error}
        onChange={this.handleChange}
        onSelectItem={this.handleSelect}
        source={this.state.users}
        template={this.customUser}
        value={this.state.user}
      />
    );
  }
}<commit_msg>fix eslint<commit_after>import React from 'react';
import Autosuggest from 'react-biz/lib/autosuggest';
import Avatar from 'react-biz/lib/avatar';
import FontIcon from 'react-biz/lib/font_icon';
import Highlighter from 'react-highlight-words/dist/main';
import style from './SelectUser.scss';

export default class SelectUser extends React.Component {
  static propTypes = {
    error: React.PropTypes.string,
    label: React.PropTypes.string,
    onChange: React.PropTypes.func,
    value: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
  };
  state = {
    countries: '',
    query: '',
    user: this.props.value,
    users: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({user: nextProps.value});
  }

  fetchData = (q) => {
    if (!q) {
      q = '';
    }
    let token = localStorage.getItem('userToken') || null;
    let filter = {'$or': [{name: q}, {lastName: q}]};

    return fetch(`http://10.1.1.219:3001/api/users?conditions=${JSON.stringify(filter)}`,
      {
        method: 'GET',
        mode: 'cors',
        headers: {
          'Accept': 'application/json',
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
      })
      .then(response => response.json())
      .then(json => this.setState({users: json})).bind(this);
  };
  handleChange = (query) => {
    this.setState({user: query});
    this.fetchData(query);
  };
  handleSelect = (key, value) => {
    this.props.onChange(value);
  };

  customUser = (item) => {
    const containerStyle = {
      display: 'flex',
      flexDirection: 'row',
    };

    const contentStyle = {
      display: 'flex',
      flexDirection: 'column',
      flexGrow: 2,
      paddingLeft: '5px',
    };
    const positionStyle = {
      fontSize: '11px',
      color: 'gray',
    };
    const avatarStyle = {
      display: 'inline-block',
      width: 40,
      height: 40,
    };
    return (
      <div style={containerStyle}>
        {item.img ? <Avatar><img src={item.img} /></Avatar> :
          <Avatar style={avatarStyle} icon={<FontIcon value="person" />} />}
        <div style={contentStyle}>
          <Highlighter highlightClassName={style.highlightRed}
            searchWords={this.state.query.trim().length > 0 ? this.state.query.split(' ') : []}
            textToHighlight={item.value ? item.value : ''}
          />
          <span style={positionStyle}>{item.position}</span>
        </div>
      </div>
    );
  };

  render() {
    let label = this.props.label ? this.props.label : 'Выбор сотрудника';
    return (
      <Autosuggest
        className={style.suggest}
        direction="down"
        label={label}
        multiple={false}
        name="user"
        error={this.props.error}
        onChange={this.handleChange}
        onSelectItem={this.handleSelect}
        source={this.state.users}
        template={this.customUser}
        value={this.state.user}
      />
    );
  }
}
{'fraction_non_alphanumeric': 0.16682449494949494, 'fraction_numerical': 0.019886363636363636, 'mean_word_length': 2.4704271631982477, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 1}, 'pii_count': 2, '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': '5823868', 'n_tokens_mistral': 2132, 'n_tokens_neox': 2051, 'n_words': 375}