dispatch/client/src/js/components/pages/Chat/MessageInput.js

import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Editable from 'components/ui/Editable';
import { isValidNick } from 'utils';

export default class MessageInput extends PureComponent {
  state = {
    value: ''
  };

  handleKey = e => {
    const {
      tab,
      onCommand,
      onMessage,
      add,
      reset,
      increment,
      decrement,
      currentHistoryEntry
    } = this.props;

    if (e.key === 'Enter' && e.target.value) {
      if (e.target.value[0] === '/') {
        onCommand(e.target.value, tab.name, tab.server);
      } else if (tab.name) {
        onMessage(e.target.value, tab.name, tab.server);
      }

      add(e.target.value);
      reset();
      this.setState({ value: '' });
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      increment();
    } else if (e.key === 'ArrowDown') {
      decrement();
    } else if (currentHistoryEntry) {
      this.setState({ value: e.target.value });
      reset();
    }
  };

  handleChange = e => {
    this.setState({ value: e.target.value });
  };

  render() {
    const {
      nick,
      currentHistoryEntry,
      onNickChange,
      onNickEditDone
    } = this.props;

    return (
      <div className="message-input-wrap">
        <Editable
          className={classnames('message-input-nick', {
            invalid: !isValidNick(nick)
          })}
          value={nick}
          onBlur={onNickEditDone}
          onChange={onNickChange}
        >
          <span className="message-input-nick">{nick}</span>
        </Editable>
        <input
          className="message-input"
          type="text"
          value={currentHistoryEntry || this.state.value}
          onKeyDown={this.handleKey}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}