Skip to content

Instantly share code, notes, and snippets.

@ddewaele
Created October 8, 2017 15:16
Show Gist options
  • Save ddewaele/474a003360e9748524d43690ba559051 to your computer and use it in GitHub Desktop.
Save ddewaele/474a003360e9748524d43690ba559051 to your computer and use it in GitHub Desktop.
Facebook create app
import React, { Component } from 'react';
import './App.css';
import moment from 'moment'
class App extends Component {
state = { sensors : null }
intervalId = 0
loadDataFromServer = () => {
console.log("Loading data from server......");
fetch('/api/aggregate', {
headers: {
'Authorization': 'Basic '+btoa('xxx:xxx'),
'Content-Type': 'application/json'
}})
.then((response) => response.json())
.then((responseData) => {
this.setState({
data: responseData
});
});
}
componentDidMount() {
this.intervalId = setInterval(this.loadDataFromServer, 2000);
}
componentWillUnmount() {
clearInterval(this.intervalId)
}
render() {
return (
<div className="App">
{ this.state.data && <Sensors sensors={this.state.data}/> }
{ !this.state.data && <p>No sensors</p> }
</div>
);
}
}
class Sensors extends React.Component {
render() {
var sensors = [];
for (var key in this.props.sensors) {
sensors.push(<Sensor key={key} sensor={this.props.sensors[key]}/>)
}
return (
<div>
<table className="table table-striped">
<thead>
<tr>
<th>Sensor</th><th>Status</th><th>Temp</th><th>Date</th>
</tr>
</thead>
<tbody>{sensors}</tbody>
</table>
</div>);
}
}
class Sensor extends React.Component {
render() {
return (
<tr>
<td>{this.props.sensor.sensorId.slice(-2)}</td>
<td>{this.props.sensor.status ? "true" : "false"}</td>
<td>{this.props.sensor.temp}</td>
<td>{moment(this.props.sensor.date).format("LLLL")}</td>
</tr>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment