App.js

import React, { Component } from 'react'
import Navbar from './components/Navbar'
import Connection from './components/Connection.js'
import Device from './components/Device'
import store from './flux/Store'
import uuid from 'uuid'
import _ from 'underscore'
import Devices from './components/Devices'

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      messages: [],
      connection: false
    }

    store.addListener(() => {
      let storeData = store.state.messageArrived
      let devices = []

      Object.keys(storeData).forEach((myName) => {
        devices.push(storeData[myName])
      })

      this.setState({
        messages: devices,
        connection: store.state.connection
      })
    })
  }

  componentWillUpdate () {
    console.log(this.state.messages)
  }

  render () {
    return (
      <div className="container">
        <Navbar/>
        <div className="row">
          <div className="col-3" style={{marginTop: 20, display: this.state.connection && 'none'}}>
            <Connection/>
          </div>
          <div className={this.state.connection ? 'col-12' : 'col-9'} style={{marginTop: 20}}>

            <div className="form-group">
              <div className="form-group">
                <h3>Devices</h3>
              </div>
              <div className="row">
                {/*{this.state.messages.map(object => <Device key={uuid()} data={object}/>)}*/}
                <Devices/>
              </div>
            </div>

          </div>
        </div>
      </div>
    )
  }
}

export default App

Device.js

import React, { Component } from 'react'
import TypeActions from '../flux/Constants'
import Dispatcher from '../flux/Dispatcher'
import Modal from 'react-modal'
import uuid from 'uuid'
import _ from 'underscore'

let moment = require('moment-timezone')
moment.locale('th')

export default class Message extends Component {

  constructor (props) {
    super(props)
    this.state = {
      devices: props.data,
      effectUpdate: 'text-primary',
      modalIsOpen: false,
      tableContent: [],
      items: [],
      timestamp: 0
    }
    this.convertStringToJSON = JSON.parse(this.props.data.payloadString)
    Modal.setAppElement('#root')
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  componentWillMount () {
    this.timer = setInterval(() => {
      console.log('myName ' + this.convertStringToJSON.d.myName + ' millis : ' + moment(this.convertStringToJSON.d.millis).fromNow())
      this.setState({timestamp: moment(this.convertStringToJSON.d.millis).fromNow()})
    }, 1000)

    // let items = this.state.items
    // let result = this.state.items
    // result.push(this.convertStringToJSON)
    // this.setState({items: result})

    // console.log('items : ', this.state.items)

  }

  openModal = () => {
    this.setState({modalIsOpen: true})
  }

  closeModal = () => {
    this.setState({modalIsOpen: false})
  }

  handleClickInfo = (e) => {
    e.preventDefault()
    let tableContent = []

    tableContent.push(
      <tr key={uuid()}>
        <td>myName</td>
        <td>{this.convertStringToJSON.d.myName}</td>
      </tr>
    )

    this.setState({tableContent: tableContent})
    this.openModal()
  }

  render () {
    let d = this.convertStringToJSON.d
    let info = this.convertStringToJSON.info

    const styles = {
      content: {marginBottom: 5},
      footer: {marginBottom: 0},
      customStyle: {
        overlay: {
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(255, 255, 255, 0.75)'
        },
        content: {
          position: 'absolute',
          top: '40px',
          left: '40px',
          right: '40px',
          bottom: '40px',
          border: '1px solid #ccc',
          background: '#fff',
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          borderRadius: '4px',
          outline: 'none',
          padding: '20px'

        }
      }
    }

    return (
      <div className="col-3">
        <div className="form-group">
          <div className="card">
            <div className="card-header bg-success">
              <span style={{color: 'white'}}>{d.myName}</span>
            </div>
            <div className="card-body text-primary">
              <p>ip : {info.ip}</p>
              <p>heap : {d.heap}</p>
              <p>run time : {((d.millis / 60000) / 60).toFixed(2)} hour</p>
              <p>millis : {d.millis}</p>
              <p>prefix : {info.prefix}</p>
              {/*<p className={this.state.effectUpdate}>*/}
                {/*<i className='fa fa-clock-o'/>&ensp;*/}
                {/*{moment(this.props.data.unix).fromNow()}*/}
              {/*</p>*/}

              <p className={this.state.effectUpdate}>
                <i className='fa fa-clock-o'/>&ensp;
                {this.state.timestamp}
              </p>

              <button className='btn btn-primary' style={{width: '100%'}} onClick={this.handleClickInfo}>
                MORE INFO
              </button>
              <Modal
                isOpen={this.state.modalIsOpen}
                style={styles.customStyle}
                contentLabel="Modal"
              >
                <table className='table table-bordered'>
                  <thead>
                  <tr>
                    <th>Key</th>
                    <th>Value</th>
                    {/*<th>Data Key</th>*/}
                    {/*<th>Value</th>*/}
                  </tr>
                  </thead>
                  <tbody>
                  {this.state.tableContent.map(d => d)}
                  </tbody>
                </table>
                <button className='btn btn-danger float-right' onClick={this.closeModal}>Close</button>
              </Modal>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

Devices.js

import React, { Component } from 'react'
import store from '../flux/Store'
import uuid from 'uuid'

let moment = require('moment-timezone')
moment.locale('th')

export default class Devices extends Component {

  constructor (props) {
    super(props)

    this.state = {
      devices: []
    }

    store.addListener(() => {
      let storeData = store.state.messageArrived
      let listDevices = []

      Object.keys(storeData).forEach((myName) => {
        listDevices.push(storeData[myName])
      })

      this.setState({
        devices: listDevices,
      })
    })
  }

  componentWillUpdate () {
    // console.log(this.state.devices)
  }

  componentWillMount() {

    this.timer = setInterval(() => {
    //   this.convertStringToJSON = JSON.parse(this.props.data.payloadString)
    //   let d = this.convertStringToJSON.d
    //   let timestamp = this.state.timestamp
    //   timestamp[d.myName] = moment(d.millis).fromNow()
    //   Object.assign([], this.state.timestamp, timestamp[d.myName])

      this.timeUpdate = ''

      this.state.devices.map(device => {

          this.timeUpdate = moment(device.d.millis).fromNow()
          device.d.timeUpdate = this.timeUpdate

      })

    //   console.log(this.state.devices)
    //
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  componentDidUpdate () {

  }

  render () {

    const Component = (props) => {

      let d = props.data.d
      let info = props.data.info

      return (
        <div className="col-3">
          <div className="form-group">
            <div className="card">
              <div className="card-header bg-success">
                <span style={{color: 'white'}}>{d.myName}</span>
              </div>
              <div className="card-body text-primary">

                <p>timestamp : {d.timeUpdate}</p>

                <p>ip : {info.ip}</p>
                <p>heap : {d.heap}</p>
                <p>run time : {((d.millis / 60000) / 60).toFixed(2)} hour</p>
                <p>millis : {d.millis}</p>
                <p>prefix : {info.prefix}</p>
                {/*<p className={this.state.effectUpdate}>*/}
                  {/*<i className='fa fa-clock-o'/>&ensp;*/}
                  {/*{moment(props.data.unix).fromNow()}*/}
                {/*</p>*/}
                <button className='btn btn-primary' style={{width: '100%'}} onClick={this.handleClickInfo}>
                  MORE INFO
                </button>
                {/*<Modal*/}
                {/*isOpen={this.state.modalIsOpen}*/}
                {/*style={styles.customStyle}*/}
                {/*contentLabel="Modal"*/}
                {/*>*/}
                {/*<table className='table table-bordered'>*/}
                {/*<thead>*/}
                {/*<tr>*/}
                {/*<th>Key</th>*/}
                {/*<th>Value</th>*/}
                {/*/!*<th>Data Key</th>*!/*/}
                {/*/!*<th>Value</th>*!/*/}
                {/*</tr>*/}
                {/*</thead>*/}
                {/*<tbody>*/}
                {/*{this.state.tableContent.map(d => d)}*/}
                {/*</tbody>*/}
                {/*</table>*/}
                {/*<button className='btn btn-danger float-right' onClick={this.closeModal}>Close</button>*/}
                {/*</Modal>*/}
              </div>
            </div>
          </div>
        </div>
      )
    }

    return this.state.devices.map(obj => <Component key={uuid()} data={obj}/>)

  }

}

mqtt.dev.js

import Dispatcher from './flux/Dispatcher'
import TypeActions from './flux/Constants'

const mqtt_dev = () => {

  Dispatcher.dispatch({
    type: TypeActions.MQTT_CONNECTION_SUCCESS,
    data: true
  })

  this.myName = ['mockup.a', 'mockup.b', 'mockup.c', 'mockup.d']

  setInterval(() => {

    this.myName.map(myName => {

      setTimeout(() => {

        Dispatcher.dispatch({
          type: TypeActions.MQTT_MESSAGE_ARRIVED,
          data: {
            'info': {
              'ssid': 'CMMC_Sinet_2.4G',
              'flash_size': 4194304,
              'flash_id': '1640c8',
              'chip_id': 'be9041',
              'sdk': '2.1.0(deb1901)',
              'mac': '5C:CF:7F:BE:90:41',
              'id': '12488769',
              'client_id': '12488769',
              'device_id': '12488769',
              'prefix': 'CMMC/',
              'ip': '192.168.1.' + (Math.random() * 1000).toFixed(0),
              'version': 0.991
            },
            'd': {
              'myName': myName,
              'millis': Date.now(),
              'temperature_c': 0,
              'humidity_percent_rh': 0,
              'state': 0,
              'heap': 38152,
              'rssi': -60,
              'counter': 4,
              'subscription': 1
            }
          }
        })

      }, (Math.random() * 10000).toFixed(0))

    })

  }, 2000)

}

export default mqtt_dev