Facebook create app

App.js

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;