move websocket initialization to app component

Author: mroote

ui/App/App.jsx

@@ -4,6 +4,7 @@ import Header from './components/Header.jsx';
 import Sidebar from './components/Sidebar.jsx';
 import Footer from './components/Footer.jsx';
 import HiddenSidebar from './components/HiddenSidebar.jsx';
+import Socket from '../socket.js';
 
 class App extends React.Component {
     constructor(props) {
@@ -13,6 +14,7 @@ class App extends React.Component {
         this.facServStatus = this.facServStatus.bind(this);
         this.getSaves = this.getSaves.bind(this);
         this.getStatus = this.getStatus.bind(this);
+        this.connectWebSocket = this.connectWebSocket.bind(this);
         this.state = {
             serverRunning: "stopped",
             serverStatus: {},
@@ -32,6 +34,13 @@ class App extends React.Component {
                 browserHistory.push("/login");
             }
         }, 1000);
+        this.connectWebSocket();
+    }
+    
+    connectWebSocket() {
+        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
+        let ws = new WebSocket(ws_scheme + "://" + window.location.host + "/ws");
+        let socket = this.socket = new Socket(ws);
     }
 
     flashMessage(message) {
@@ -127,7 +136,8 @@ class App extends React.Component {
                         getStatus: this.getStatus,
                         saves: this.state.saves,
                         getSaves: this.getSaves,
-                        username: this.state.username}
+                        username: this.state.username,
+                        socket: this.socket}
                     )}
 
                     <Footer />

ui/App/components/ConsoleContent.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import {IndexLink} from 'react-router';
-import Socket from '../../socket.js';
 
 class ConsoleContent extends React.Component {
     constructor(props) {
         super(props);
         this.componentDidMount = this.componentDidMount.bind(this);
-        this.connectWebsocket = this.connectWebsocket.bind(this);
-        this.handleCommand = this.handleCommand.bind(this);
-        this.onConnect = this.onConnect.bind(this);
         this.handleInput = this.handleInput.bind(this);
         this.clearInput = this.clearInput.bind(this);
         this.clearHistory = this.clearHistory.bind(this);
@@ -23,43 +19,23 @@ class ConsoleContent extends React.Component {
     }
 
     componentDidMount() {
-        this.connectWebsocket();
+        this.props.socket.emit("log subscribe");
+        this.setState({connected: true});
+        
+        this.props.socket.on('log update', this.newLogLine.bind(this));
     }
 
     componentDidUpdate() {
       var el = this.refs.output;
-      console.log(this.refs);
       var container = document.getElementById("console-output");
-      console.log(container)
       container.scrollTop = this.refs.output.scrollHeight;
     }
 
-    connectWebsocket() {
-        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
-        let ws = new WebSocket(ws_scheme + "://" + window.location.host + "/ws");
-        let socket = this.socket = new Socket(ws);
-        socket.on('connect', this.onConnect.bind(this));
-        socket.on('log update', this.newLogLine.bind(this));
-    }
-
-    handleCommand(command) {
-        this.refs.console.log(command);
-        this.refs.console.return();
-    }
-
-    onConnect() {
-        this.setState({connected: true});
-        this.socket.emit("log subscribe");
-    }
-
     handleInput(e) {
         if (e.key === "Enter") {
             var input_text = this.refs.term.value;
-
-            this.socket.emit("command send", input_text);
-
+            this.props.socket.emit("command send", input_text);
             this.addHistory(this.state.prompt + " " + input_text);
-
             this.clearInput();
         }
     }
@@ -69,7 +45,7 @@ class ConsoleContent extends React.Component {
     }
 
     clearHistory() {
-        ths.setState({ history: []});
+        ths.setState({ history: [] });
     }
 
     addHistory(output) {
@@ -127,4 +103,8 @@ class ConsoleContent extends React.Component {
     }
 }
 
+ConsoleContent.propTypes = {
+    socket: React.PropTypes.object.isRequired,
+}
+
 export default ConsoleContent;

ui/App/components/Users/UserTable.jsx

@@ -75,7 +75,7 @@ class UserTable extends React.Component {
     }
 }
 
-UserTable.proptypes = {
+UserTable.propTypes = {
     users: React.PropTypes.array.isRequired,
     listUsers: React.PropTypes.func.isRequired,
 }