obniz-text.js

/* global Obniz */
import React from 'react'
import tokens from './tokens'

class RemoteDevice extends React.Component {
  state = { text: this.props.text || `id: ${this.props.id}` }

  componentDidMount () {
    const { id } = this.props
    const access_token = tokens[id]
    this.obniz = new Obniz(id, { access_token })
    this.obniz.onconnect = this.renderRemote
  }

  renderRemote = () => {
    this.obniz.display.clear()
    this.obniz.display.print(this.state.text)
  }

  handleTextChange = e => this.setState({ text: e.target.value }, this.renderRemote)

  render () {
    return (
      <div style={{ marginBottom: '30px' }}>
        <input type="text" value={this.state.text} onChange={this.handleTextChange} />
      </div>
    )
  }
}

class Main extends React.Component {
  render () {
    return (
      <div>
        <RemoteDevice id="REDACTED-0713" text="manage" />
        <RemoteDevice id="REDACTED-7673" text="multiple" />
        <RemoteDevice id="REDACTED-7692" text="nodes" />
        <RemoteDevice id="REDACTED-1909" text="from" />
        <RemoteDevice id="REDACTED-6322" text="cloud" />
      </div>
    )
  }
}

export default Main