// @flow

import React from 'react'

import { socket } from './../socket'

export class ConnectedWidget extends React.Component {
  state: {
    connected: string
  }
  constructor (props: Object) {
    super(props)
    this.state = {
      connected: 'Connecting...'
    }
  }
  componentDidMount () {
    socket.on('connect', () => {
      this.setState({
        connected: `Socket connected`
      })
    })
    socket.on('disconnect', () => {
      this.setState({
        connected: 'Disconnected!'
      })
    })
  }
  render () {
    return (
      <div>{ this.state.connected }</div>
    )
  }
}