import {Socket} from "phoenix"

// let socket = new Socket("/ws")
// socket.connect()
// socket.join("topic:subtopic", {}).receive("ok", chan => {
// })

$(function() {
  var App = React.createClass( {
    getInitialState: function() {
      return { message: "" }
    },
    updateMessage: function(e) {
      this.setState({ message: e.target.value });
    },

    render: function() {
      return (
        <div>
          <input type="text" onChange={this.updateMessage} />
          <Message message={this.state.message} />
        </div>
      );
    }
  });

  var Message = React.createClass({
    render: function() {
      return <p>{this.props.message}</p>;
    }
  });

  React.render(
    <h2 className="jumbotron">Hello from React!</h2>,
    document.getElementById('hello-world')
  );

  React.render(
    <App />,
    document.getElementById('app-container')
  );

});

let App = {
}

export default App

@@ -244,16 +244,25 @@
 eturn %7B 
+%0A        
 message:
@@ -268,18 +268,52 @@
 : %22%22
+,%0A        savedMessages: %5B%5D%0A     
  %7D
+;
 %0A    %7D,%0A
     
@@ -308,16 +308,17 @@
 %0A    %7D,%0A
+%0A
     upda
@@ -396,24 +396,181 @@
 %7D);%0A    %7D,%0A%0A
+    saveMessage: function(message) %7B%0A      var messages = this.state.savedMessages.concat(message);%0A      this.setState(%7B savedMessages: messages%7D);%0A    %7D,%0A%0A
     render: 
@@ -626,25 +626,20 @@
    %3C
-input type=%22text%22
+MessageInput
  onC
@@ -660,24 +660,74 @@
 dateMessage%7D
+%0A                        onSave=%7Bthis.saveMessage%7D
  /%3E%0A        
@@ -761,24 +761,79 @@
 ate.message%7D
+%0A              savedMessages=%7Bthis.state.savedMessages%7D
  /%3E%0A        
@@ -874,16 +874,21 @@
  Message
+Input
  = React
@@ -910,70 +910,738 @@
     
-render: function() %7B%0A      return %3Cp%3E%7Bthis.props.message%7D%3C/p%3E;
+_onChange: function(e) %7B%0A      this.props.onChange(e.target.value);%0A    %7D,%0A%0A    _onKeyDown: function(e) %7B%0A      //13 == Enter Key Code%0A      if (e.keyCode === 13) %7B%0A        this.props.onSave(e.target.value);%0A        e.target.value = %22%22;%0A      %7D%0A    %7D,%0A%0A    render: function() %7B%0A      return %3Cinput type=%22text%22 onChange=%7Bthis._onChange%7D%0A                                onKeyDown=%7Bthis._onKeyDown%7D /%3E;%0A    %7D%0A  %7D);%0A%0A  var Message = React.createClass(%7B%0A    render: function() %7B%0A      var messages = this.props.savedMessages.map(%0A        function (message) %7B%0A          return %3Cli%3E%7Bmessage%7D%3C/li%3E;%0A        %7D%0A      );%0A%0A      return (%0A        %3Cdiv%3E%0A          %3Cp%3E%7Bthis.props.message%7D%3C/p%3E%0A          %3Cul%3E%7Bmessages%7D%3C/ul%3E%0A        %3C/div%3E%0A      )
 %0A   
@@ -1848,17 +1848,16 @@
 ')%0A  );%0A
-%0A
 %7D);%0A%0Alet

update react