import React, { PureComponent } from 'react'

import LoadingIndicator from '../LoadingIndicator'

import constants from '../../constants.json'

class Manual extends PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      loaded: false
    }

    console.info('Fetching manual')
    fetch(`${constants.serverUrl}manual`) // eslint-disable-line
      .then((resp) => {
        return resp.text()
      })
      .then((data) => {
        this.manual = {
          __html: data
        }

        this.setState({
          loaded: true
        })
      })
  }

  render () {
    const { loaded } = this.state

    if (loaded) {
      return (
        <div>
          <div dangerouslySetInnerHTML={this.manual} />
        </div>
      )
    } else {
      return (
        <LoadingIndicator />
      )
    }
  }
}

export default Manual