import React from 'react'
import { Helmet } from 'react-helmet'
import injectSheet from 'react-jss'
import PropTypes from 'prop-types'

import styles from './styles'
import Notice from '../Notice/Notice'
import ButtonLink from '../Button/ButtonLink'

import FrequenForm from './FrequenForm'
import FrequenResults from './FrequenResults'
import frequenService from './FrequenService'

import { canonical, siteTitle } from '../../App'

class Frequen extends React.Component {
  constructor (props) {
    super(props)
    this.onChangeInput = this.onChangeInput.bind(this)
    this.onAnalyze = this.onAnalyze.bind(this)
    this.state = frequenService.getData()
  }

  onChangeInput (e) {
    const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value
    const name = e.target.name
    this.setState(prevState => ({
      [name]: val
    }))
  }

  onAnalyze (e) {
    e.preventDefault()
    this.setState(
      prevState => ({
        analyzed: false
      }),
      () => {
        // Save the current state to storage
        frequenService.setStorage(this.state)

        const response = frequenService.analyze(this.state)

        this.setState(prevState => ({
          results: response,
          analyzed: true
        }))
      }
    )
  }

  render () {
    return (
      <div className={this.props.classes.frequen}>
        <Helmet>
          <title>{siteTitle} Frequen</title>
          <meta
            name='description'
            content='LanguaFrequen is a tool for analyzing phoneme frequencies in a given text.'
          />
          <link rel='canonical' href={`${canonical}frequen/`} />
        </Helmet>
        <ButtonLink route='/frequen/help'>Help</ButtonLink>
        <h2 className='toolTitle'>LanguaFrequen</h2>
        <Notice>This tool is still in development.</Notice>
        <FrequenForm
          classes={this.props.classes}
          state={this.state}
          onChangeInput={this.onChangeInput}
          onAnalyze={this.onAnalyze}
        />
        <FrequenResults
          classes={this.props.classes}
          results={this.state.results}
          analyzed={this.state.analyzed}
        />
      </div>
    )
  }
}

Frequen.propTypes = {
  classes: PropTypes.object
}

export default injectSheet(styles)(Frequen)

import React from 'react'
import { Helmet } from 'react-helmet'
import injectSheet from 'react-jss'
import PropTypes from 'prop-types'

import styles from './styles'
import ButtonLink from '../Button/ButtonLink'

import FrequenForm from './FrequenForm'
import FrequenResults from './FrequenResults'
import frequenService from './FrequenService'

import { canonical, siteTitle } from '../../App'

class Frequen extends React.Component {
  constructor (props) {
    super(props)
    this.onChangeInput = this.onChangeInput.bind(this)
    this.onAnalyze = this.onAnalyze.bind(this)
    this.state = frequenService.getData()
  }

  onChangeInput (e) {
    const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value
    const name = e.target.name
    this.setState(prevState => ({
      [name]: val
    }))
  }

  onAnalyze (e) {
    e.preventDefault()
    this.setState(
      prevState => ({
        analyzed: false
      }),
      () => {
        // Save the current state to storage
        frequenService.setStorage(this.state)

        const response = frequenService.analyze(this.state)

        this.setState(prevState => ({
          results: response,
          analyzed: true
        }))
      }
    )
  }

  render () {
    return (
      <div className={this.props.classes.frequen}>
        <Helmet>
          <title>{siteTitle} Frequen</title>
          <meta
            name='description'
            content='LanguaFrequen is a tool for analyzing phoneme frequencies in a given text.'
          />
          <link rel='canonical' href={`${canonical}frequen/`} />
        </Helmet>
        <ButtonLink route='/frequen/help'>Help</ButtonLink>
        <h2 className='toolTitle'>LanguaFrequen</h2>
        <FrequenForm
          classes={this.props.classes}
          state={this.state}
          onChangeInput={this.onChangeInput}
          onAnalyze={this.onAnalyze}
        />
        <FrequenResults
          classes={this.props.classes}
          results={this.state.results}
          analyzed={this.state.analyzed}
        />
      </div>
    )
  }
}

Frequen.propTypes = {
  classes: PropTypes.object
}

export default injectSheet(styles)(Frequen)

Remove dev notice from Frequen page