import React from "react";
import { Chance }from "chance";

import WriteMessage from "./components/WriteMessage";
import Messages from "./components/Messages";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: chance.name(), messages: [] }
  }

  componentDidMount() {
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    this.chatsock = new ReconnectingWebSocket(ws_scheme + '://' + window.location.host + "/chat" + window.location.pathname);

    this.chatsock.onmessage = (message) => {
      console.log(message);
      let messages = this.state.messages.slice();
      messages.push(JSON.parse(message.data));
      this.setState({messages: messages})
    };
  }

  sendMessage(msg) {
    const payload = {
      handle: this.state.user,
      message: msg
    };
    this.chatsock.send(JSON.stringify(payload));
  }

  render() {
    return (
      <div>
        <h1>M O O N Y</h1>
        <Messages
          messages={this.state.messages}
        />
        <WriteMessage
          sendMessage={this.sendMessage.bind(this)}
        />
      </div>
    )
  }
}
@@ -298,19 +298,37 @@
 ages: %5B%5D
+, connected: false
  %7D%0A
-
   %7D%0A%0A  c
@@ -548,16 +548,254 @@
 name);%0A%0A
+    this.chatsock.onopen = event =%3E %7B%0A      this.setState(%7B%0A        connected: true%0A      %7D)%0A      console.log(this.chatsock);%0A    %7D;%0A%0A    this.chatsock.onclose = event =%3E %7B%0A      this.setState(%7B%0A        connected: false%0A      %7D)%0A    %7D;%0A%0A
     this
@@ -1198,24 +1198,24 @@
       %3Cdiv%3E%0A
-
         %3Ch1%3E
@@ -1223,16 +1223,85 @@
  O O N Y
+ (%3Cspan%3E%7Bthis.state.connected ? 'connected' : 'disconnected'%7D%3C/span%3E)
 %3C/h1%3E%0A  

Put a connected visual help