import React from 'react'
import Link from 'next/link'

export default class UrlPropChange extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      previousUrl: {},
      url: props.url
    }
  }

  // eslint-disable-next-line camelcase
  componentDidUpdate (prevProps) {
    if (prevProps.url !== this.props.url) {
      this.setState(() => {
        return {
          previousUrl: prevProps.url,
          url: this.props.url
        }
      })
    }
  }

  render () {
    const { previousUrl, url } = this.state
    return (
      <div>
        Current:
        <div id='url-result'>{JSON.stringify(url)}</div>
        <br />
        <br />
        Previous:
        <div id='previous-url-result'>{JSON.stringify(previousUrl)}</div>
        <Link href='/nav/url-prop-change?added=yes'>
          <a id='add-query'>Add querystring</a>
        </Link>
      </div>
    )
  }
}