<commit_before>'use strict';

import React from 'react';
import Actions from "actions/UIActions";
import 'styles/SendMessage.scss';
import UsersStore from 'stores/UsersStore';

class SendMessage extends React.Component {
  constructor(props) {
    super(props);
    this.tabPressCounter = null;
    this.matches = []; 
    this.state = {
      theme: props.theme
    };
  }

  componentDidMount() {
    this.unsubscribe = Actions.onPanelClosed.listen(() => this.refs.message.focus());
    this.unsubscribe2 = Actions.focusOnSendMessage.listen(() => this.refs.message.focus());
    this.refs.message.focus();
  }

  componentWillUnmount() {
    this.unsubscribe();
    this.unsubscribe2();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ theme: nextProps.theme });
  }

  sendMessage(event) {
    event.preventDefault();
    var text = this.refs.message.value.trim();
    this.props.onSendMessage(text);
    this.refs.message.value = '';
    this.refs.message.focus();
    return;
  }

  onKeyDown(event) {
    // console.log("KEYDOWN", event.type, event.which);
    if(event.which === 9) {
      // Tab
      event.preventDefault();
      // TODO: autocomplete user name
      // get value of the last typed letters
      
      const getLastChars = (message) => {
        // split the message, string to array
        this.words = message.split(' ');
        return this.words.pop();
      }

      if(this.tabPressCounter == null){
        this.tabPressCounter = 0;
        this.lastWord = getLastChars(this.refs.message.value);
        // console.log(this.lastWord);
        // get matches     
        this.matches = UsersStore.users.filter((s) => {
           return s.startsWith(this.lastWord)
        });
      }
      else{
        this.tabPressCounter += 1;
        // when end of array is reached go back to the first elt
        this.tabPressCounter = this.tabPressCounter % this.matches.length;
        this.words.pop();
      }
       
      console.log(`%c matches = ${this.matches}`, 'color:green; background-color:yellow');     
      console.log(`words = ${this.words}`);
      console.log(`tabPressCounter = ${this.tabPressCounter}`);<commit_msg>make relevant console.logs into  function<commit_after>'use strict';

import React from 'react';
import Actions from "actions/UIActions";
import 'styles/SendMessage.scss';
import UsersStore from 'stores/UsersStore';

class SendMessage extends React.Component {
  constructor(props) {
    super(props);
    this.tabPressCounter = null;
    this.matches = []; 
    this.state = {
      theme: props.theme
    };
  }

  componentDidMount() {
    this.unsubscribe = Actions.onPanelClosed.listen(() => this.refs.message.focus());
    this.unsubscribe2 = Actions.focusOnSendMessage.listen(() => this.refs.message.focus());
    this.refs.message.focus();
  }

  componentWillUnmount() {
    this.unsubscribe();
    this.unsubscribe2();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ theme: nextProps.theme });
  }

  sendMessage(event) {
    event.preventDefault();
    var text = this.refs.message.value.trim();
    this.props.onSendMessage(text);
    this.refs.message.value = '';
    this.refs.message.focus();
    return;
  }

  onKeyDown(event) {
    // console.log("KEYDOWN", event.type, event.which);
    if(event.which === 9) {
      // Tab
      event.preventDefault();
      // TODO: autocomplete user name
      // get value of the last typed letters
      
      const getLastChars = (message) => {
        // split the message, string to array
        this.words = message.split(' ');
        return this.words.pop();
      }
      
      // console.log relevant variables
      const control = (matches, words, tabs) => {
        console.log(`%c matches = ${matches}`, 'color:green; background-color:yellow');     
        console.log(`words = ${words}`);
        console.log(`tabPressCounter = ${tabs}`);
      }

      if(this.tabPressCounter == null){
        this.tabPressCounter = 0;
        this.lastWord = getLastChars(this.refs.message.value);
        // get matches     
        this.matches = UsersStore.users.filter((s) => {
           return s.startsWith(this.lastWord)
        });
      }
      else{
        this.tabPressCounter += 1;
        // when end of array is reached go back to the first elt
        this.tabPressCounter = this.tabPressCounter % this.matches.length;
        this.words.pop();
      }
       
      // control
      control(this.matches, this.words, this.tabPressCounter);
{'fraction_non_alphanumeric': 0.1392208942009739, 'fraction_numerical': 0.002213368747233289, 'mean_word_length': 2.56107171000788, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 12, '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': '1670422', 'n_tokens_mistral': 1364, 'n_tokens_neox': 1324, 'n_words': 264}