text: import React from 'react';
  import { withRouter } from 'react-router-dom'
  
  import Datepicker from './datepicker'
  import Filters from './filters'
  import CurrentVisitors from './stats/current-visitors'
  import VisitorGraph from './stats/visitor-graph'
  import Referrers from './stats/referrers'
  import Pages from './stats/pages'
  import Countries from './stats/countries'
  import Devices from './stats/devices'
  import Conversions from './stats/conversions'
  import {parseQuery} from './query'
  
  class Stats extends React.Component {
    constructor(props) {
      super(props)
      this.state = {query: parseQuery(props.location.search, this.props.site)}
    }
  
    componentDidUpdate(prevProps) {
      if (prevProps.location.search !== this.props.location.search) {
        this.setState({query: parseQuery(this.props.location.search, this.props.site)})
      }
    }
  
    renderConversions() {
      if (this.props.site.hasGoals) {
        return (
          <div className="w-full block md:flex items-start justify-between mt-6">
            <Conversions site={this.props.site} query={this.state.query} />
          </div>
        )
      }
    }
  
    forgotten() {
      return (
        <div>
        <OperatingSystems site={this.props.site} query={this.state.query} />
        </div>
      )
    }
  
    render() {
      return (
        <div className="mb-12">
          <div className="w-full sm:flex justify-between items-center">
            <div className="w-full flex items-center">
              <h2 className="text-left mr-8 font-semibold text-xl">Analytics for <a href={`//${this.props.site.domain}`} target="_blank">{this.props.site.domain}</a></h2>
              <CurrentVisitors site={this.props.site}  />
            </div>
            <Datepicker site={this.props.site} query={this.state.query} />
          </div>
          <Filters query={this.state.query} history={this.props.history} />
          <VisitorGraph site={this.props.site} query={this.state.query} />
          <div className="w-full block md:flex items-start justify-between">
            <Referrers site={this.props.site} query={this.state.query} />
            <Pages site={this.props.site} query={this.state.query} />
          </div>
          <div className="w-full block md:flex items-start justify-between">
            <Countries site={this.props.site} query={this.state.query} />
            <Devices site={this.props.site} query={this.state.query} />
          </div>
          { this.renderConversions() }
        </div>
      )
    }
  }
  
  export default withRouter(Stats)
  