update example

index.js

@@ -2,26 +2,71 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Doodle3DManager } from './src/index.js';
 
-class Mananger extends React.Component {
+class Box extends React.Component {
+  state = {
+    status: {}
+  };
+
+  componentWillMount() {
+    const { box } = this.props;
+    box.setAutoUpdate(true, 1000);
+
+    box.addEventListener('update', ({ state }) => {
+      this.setState({ status: state });
+    });
+  }
+
+  componentWillUnMount() {
+    const { box } = this.props;
+    box.setAutoUpdate(false);
+  }
+
+  render() {
+    return (
+      <div>
+        <p><b>name: {this.props.box.boxData.wifiboxid}</b></p>
+        <ul>
+          {Object.entries(this.state.status).map(([key, value]) => <li key={key}>{key}: {value}</li>)}
+        </ul>
+      </div>
+    );
+  };
+}
+
+class OverView extends React.Component {
   state = {
     boxes: []
   };
 
-  componentDidMount() {
+  componentWillMount() {
     const doodle3DManager = new Doodle3DManager();
     doodle3DManager.checkNonServerBoxes = false;
     doodle3DManager.setAutoUpdate(true, 1000);
-    doodle3DManager.addEventListener('boxeschanged', ({ boxes }) => {
-      this.setState({ boxes });
-    })
+
+    doodle3DManager.addEventListener('boxappeared', ({ box }) => {
+      this.setState({ boxes: [...this.state.boxes, <Box box={box} />] })
+    });
+
+    doodle3DManager.addEventListener('boxdisappeared', ({ box }) => {
+      this.setState({ boxes: this.state.boxes.filter(box => box.props.box.boxData.id !== box.boxData.id) })
+    });
+
+    this.setState({ doodle3DManager })
+  }
+
+  componentWillUnMount() {
+    const { doodle3DManager } = this.state;
+    if (doodle3DManager) doodle3DManager.setAutoUpdate(false);
   }
 
-  render = () => {
+  render() {
     const { boxes } = this.state;
-    return (<ul>
-      {boxes.map((box) => <li key={box.boxData.wifiboxid}>{box.boxData.wifiboxid}</li>)}
-    </ul>);
+    return (
+      <div>
+        {boxes.map((box, i) => <span key={i}>{box}</span>)}
+      </div>
+    );
   };
 }
 
-render(<Mananger />, document.getElementById('app'));
+render(<OverView />, document.getElementById('app'));

src/api/network.js

@@ -48,7 +48,7 @@ export default class Network {
   }
   async alive() {
     try {
-      await fecth(`${this.api}network/alive`, { method: 'GET' }).then(parseFetch);
+      await fetch(`${this.api}network/alive`, { method: 'GET' }).then(parseFetch);
       return true;
     } catch(error) {
       return false;

webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
   },
   plugins: [
     new HTMLWebpackPlugin({
-      title: 'Doodle3D Slicer - Simple example',
+      title: 'Doodle3D API - Simple example',
       template: require('html-webpack-template'),
       inject: false,
       appMountId: 'app'