import React from 'react';
import { render } from 'react-dom';
import { Doodle3DManager } from './src/index.js';
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 (
name: {this.props.box.boxData.wifiboxid}
{Object.entries(this.state.status).map(([key, value]) => - {key}: {value}
)}
);
};
}
class OverView extends React.Component {
state = {
boxes: []
};
componentWillMount() {
const doodle3DManager = new Doodle3DManager();
doodle3DManager.checkNonServerBoxes = false;
doodle3DManager.setAutoUpdate(true, 1000);
doodle3DManager.addEventListener('boxappeared', ({ box }) => {
this.setState({ boxes: [...this.state.boxes, ] })
});
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() {
const { boxes } = this.state;
return (
{boxes.map((box, i) => {box})}
);
};
}
render(, document.getElementById('app'));