$(document).ready(function() {
  "use strict";

  var socket = io.connect("http://127.0.0.1:8080", { reconnection: true, transports: ['websocket', 'xhr-polling', 'polling', 'htmlfile', 'flashsocket'] });

  socket.on('connect', function() {
    socket.emit('connected', { user: 'test' });
  });

  var ChatApp = React.createClass({
    getInitialState: function() {
      socket.on('message', this.messageReceive);
      socket.on('connect_error', this.connectionError);
      return { messages: [] };
    },

    componentDidMount: function() {
      $.ajax({
        url: '/messages',
        dataType: 'json',
        success: (data) => {
          console.log(data);
          this.setState({ messages: data });
        },
        failure: (xhr, status, err) => {
          console.err(url, status, err.toString());
        }
      });
    },

    connectionError: function() {
      $('#content').html('Wystąpił błąd, nie można pobrać danych.');
    },

    setCaretPosition: function (ctrl, pos) {
      if(ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
      } else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
      }
    },

    messageReceive: function(msg) {
      console.log('dostalem wiadomosc: ' + msg);
      var messages = this.state.messages;
      messages.push(msg);
      //console.log(msg);
      this.setState({ messages: messages });
    },

    messageSend: function(e) {
      console.log(e.keyCode);
      if (e.keyCode === 13) {
        e.preventDefault();
        socket.emit('message', { message: e.target.value, user_id: 1 });
        e.target.value = '';
        this.setCaretPosition(e.target, 0);
      }
    },

    render: function() {
      return (
        <div>
          <div className="well" id="content">
            {this.state.messages.map(function(msg) {
              return <Message key={msg['id']} message={msg}></Message>
            })}
          </div>
          <textarea className="form-control" id="input" rows="1" onKeyDown={this.messageSend}></textarea>
        </div>
      );
    }
  });

  var Message = React.createClass({
    formatMessage: function() {
      var body = this.props.message['body'].replace(new RegExp('\ ','g'), '&nbsp;').replace(new RegExp('\r?\n','g'), '<br />');
      return `${this.props.message['user']['login']}: ${body}`;
    },

    render: function() {
      return <div dangerouslySetInnerHTML={{ __html: this.formatMessage() }}></div>
    }
  });

  ReactDOM.render(<ChatApp />, document.getElementById('main'));
});

@@ -1558,32 +1558,265 @@
 ges %7D);%0A    %7D,%0A%0A
+    render: function() %7B%0A      return (%0A        %3Cdiv className='chatApp'%3E%0A          %3CMessagesList messages=%7Bthis.state.messages%7D/%3E%0A          %3CMessageForm /%3E%0A        %3C/div%3E%0A      )%0A    %7D%0A  %7D);%0A%0A  var MessageForm = React.createClass(%7B%0A
     messageSend:
@@ -1826,24 +1826,24 @@
 nction(e) %7B%0A
-
       consol
@@ -2072,32 +2072,238 @@
       %7D%0A    %7D,%0A%0A
+    render: function() %7B%0A      return (%0A        %3Ctextarea className=%22form-control%22 id=%22input%22 rows=%221%22 onKeyDown=%7Bthis.messageSend%7D%3E%3C/textarea%3E%0A      )%0A    %7D%0A  %7D);%0A%0A  var MessagesList = React.createClass(%7B%0A
     render: func
@@ -2400,29 +2400,29 @@
       %7Bthis.
-state
+props
 .messages.ma
@@ -2526,16 +2526,16 @@
     %7D)%7D%0A
+
         
@@ -2547,114 +2547,8 @@
 iv%3E%0A
-          %3Ctextarea className=%22form-control%22 id=%22input%22 rows=%221%22 onKeyDown=%7Bthis.messageSend%7D%3E%3C/textarea%3E%0A
     

fix bugs