import React, { Component } from 'react';
import './App.css';
import Table from './Table';


class App extends Component {
  constructor () {
    super();

    let ws_url = process.env.REACT_APP_WS_URL
    if (!ws_url) {
      const proto = (location.protocol === "https:")? "wss://" : "ws://"
      ws_url = proto + location.host + "/websocket"
    }
    this.ws = new WebSocket(ws_url)
    this.ws.onopen = () => console.log("OPENED")
  };

  login = (event) => {
    let name = this.nameInput.value
    if (!name) {
      console.log("No name supplied");
      return
    }
    console.log("Logging in as " + name);
    let msg = {
      method: "login",
      name: name
    }
    this.ws.send(JSON.stringify(msg))
  }

  render() {
    return (
      <div>
       <div className="App">
          <div className="App-header">
            <h2>Welcome to Tarabish Online</h2>
          </div>
          <div>
            <input type="text" placeholder="Name"
              ref={(ref) => this.nameInput = ref}
            />
            <input type="button" value="Login" onClick={this.login} />
          </div>
          <div><Table name="Test Table 1"/></div>
        </div>
      </div>
    );
  }
}

export default App;

@@ -434,12 +434,454 @@
 D%22)%0A
+%0A    this.ws.onmessage = (%7Bdata%7D) =%3E this.handleMessage(data)%0A%0A    this.state = %7B%0A      show_login: true%0A    %7D%0A  %7D;%0A%0A  handleMessage = (data) =%3E %7B%0A    console.log(%22Received data: %22 + data)%0A    let msg = null;%0A    try %7B%0A      msg = JSON.parse(data)%0A    %7D catch (e) %7B%0A      console.log(%22Error: Non JSON data%22)%0A      return%0A    %7D%0A    if (msg.type === %22valid_login%22) %7B%0A      console.log(%22Logged In%22)%0A      this.setState(%7Bshow_login: false%7D)%0A    %7D%0A
   %7D
-;
 %0A%0A  
@@ -1180,182 +1180,40 @@
     
-return (%0A      %3Cdiv%3E%0A       %3Cdiv className=%22App%22%3E%0A          %3Cdiv className=%22App-header%22%3E%0A            %3Ch2%3EWelcome to Tarabish Online%3C/h2%3E%0A          %3C/div%3E
+let login_block = (
 %0A      
-    
 %3Cdiv%3E%0A
-    
     
@@ -1264,20 +1264,16 @@
         
-    
 ref=%7B(re
@@ -1312,19 +1312,11 @@
     
-  
-  
 /%3E%0A
-    
     
@@ -1380,34 +1380,283 @@
 n%7D /%3E%0A      
-    
 %3C/div%3E
+%0A    )%0A    if (!this.state.show_login) %7B%0A      login_block = null%0A    %7D%0A    return (%0A      %3Cdiv%3E%0A       %3Cdiv className=%22App%22%3E%0A          %3Cdiv className=%22App-header%22%3E%0A            %3Ch2%3EWelcome to Tarabish Online%3C/h2%3E%0A          %3C/div%3E%0A          %7Blogin_block%7D
 %0A          %3C

Handle the login message.