Send state updates through socket, finish app

server.js

@@ -1,10 +1,21 @@
 const express = require('express')
 const app = express()
 
+var ioState = {
+    dout: [false],
+}
+
+const updateState = data => {
+    ioState[data.type] = ioState[data.type].map((x, i) =>
+        i == data.pin ? data.value : x
+    );
+    console.log(ioState);
+}
+
 app.use('/', express.static('dist'))
 
-app.get('/hello', function (req, res) {
+app.get('/api/dout/:pin', function (req, res) {
-  res.send('Hello World!')
+  res.send(ioState.dout[req.params.pin])
 })
 
 const server = app.listen(3000, function () {
@@ -13,6 +24,11 @@ const server = app.listen(3000, function () {
 
 const io = require('socket.io').listen(server);
 
-io.on('connection', (socket) => {
+io.on('connection', socket => {
-    socket.emit('message', 'hello socket');
+    socket.emit('ioState', ioState);
+    socket.on('update', data => {
+        console.log(data);
+        updateState(data);
+        io.sockets.emit('ioState', ioState);
+    });
 });

src/app.js

@@ -6,9 +6,7 @@ export default class App extends React.Component {
         super(props);
 
         this.state = {
-            ioState: {
+            ioState: null,
-                dout: [false],
-            },
             socket: io.connect()
         }
     }
@@ -28,8 +26,9 @@ export default class App extends React.Component {
             console.log('connected');
         });
 
-        socket.on('message', (data) => {
+        socket.on('ioState', (data) => {
             console.log(data);
+            this.setState({ioState: data});
         });
     }
 
@@ -42,6 +41,14 @@ export default class App extends React.Component {
         });
     }
 
+    sendUpdate(type, pin, value) {
+        this.state.socket.emit('update', {
+            type: type,
+            pin: pin,
+            value: value,
+        });
+    }
+
     render() {
         return (
             <div className="ui text container">
@@ -54,7 +61,7 @@ export default class App extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <div className="column">
+                    {this.state.ioState && <div className="column">
                         <div className="ui segment">
                             <div className="ui top attached label">Digital Out</div>
                             <div className="ui two column middle aligned grid">
@@ -63,8 +70,8 @@ export default class App extends React.Component {
                                           DO1
                                     </div>
                                     <div className="ui buttons">
-                                      <button onClick={() => this.doutSet(0, true)} className="ui red button">On</button>
+                                      <button onClick={() => this.sendUpdate('dout', 0, true)} className="ui red button">On</button>
-                                      <button onClick={() => this.doutSet(0, false)} className="ui button">Off</button>
+                                      <button onClick={() => this.sendUpdate('dout', 0, false)} className="ui button">Off</button>
                                     </div>
                                 </div>
                                 <div className="four wide right aligned column">
@@ -73,7 +80,7 @@ export default class App extends React.Component {
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </div>}
                 </div>
             </div>
        );