import { Component } from 'react'
import Link from 'next/link'

export default class OnClick extends Component {
  static getInitialProps ({ res, query: {count} }) {
    return { count: count ? parseInt(count) : 0 }
  }

  state = {
    stateCounter: 0
  }

  render () {
    const {stateCounter} = this.state
    const {count} = this.props
    return (
      <div id='on-click-page'>
        <Link href={`/nav/on-click?count=${count + 1}`} replace>
          <a id='on-click-link' onClick={() => this.setState({stateCounter: stateCounter + 1})}>Self Reload</a>
        </Link>
        <Link href='/nav/on-click'>
          <a id='on-click-link-prevent-default' onClick={(e) => {
            e.preventDefault()
            this.setState({stateCounter: stateCounter + 1})
          }}>Self Reload</a>
        </Link>
        <p id='query-count'>QUERY COUNT: {count}</p>
        <p id='state-count'>STATE COUNT: {stateCounter}</p>
      </div>
    )
  }
}