1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/test/integration/with-router/components/header-nav.js
Tim Neutkens f3f939dde4
Run method sorting codemod (#4909)
react-codemod recommended way of having methods defined
2018-08-06 20:53:06 -07:00

69 lines
1.8 KiB
JavaScript

import * as React from 'react'
import Router, { withRouter } from 'next/router'
import Link from 'next/link'
const pages = {
'/a': 'Foo',
'/b': 'Bar'
}
class HeaderNav extends React.Component {
constructor ({ router }) {
super()
this.state = {
activeURL: router.asPath,
activeURLTopLevelRouterDeprecatedBehavior: router.asPath,
activeURLTopLevelRouter: router.asPath
}
}
componentDidMount () {
Router.onRouteChangeComplete = this.handleRouteChangeTopLevelRouterDeprecatedBehavior
Router.events.on('routeChangeComplete', this.handleRouteChangeTopLevelRouter)
this.props.router.events.on('routeChangeComplete', this.handleRouteChange)
}
componentWillUnmount () {
Router.onRouteChangeComplete = null
Router.events.on('routeChangeComplete', this.handleRouteChangeTopLevelRouter)
this.props.router.events.off('routeChangeComplete', this.handleRouteChange)
}
handleRouteChange = url => {
this.setState({
activeURL: url
})
};
handleRouteChangeTopLevelRouter = url => {
this.setState({
activeURLTopLevelRouter: url
})
};
handleRouteChangeTopLevelRouterDeprecatedBehavior = url => {
this.setState({
activeURLTopLevelRouterDeprecatedBehavior: url
})
};
render () {
return (
<nav>
{
Object.keys(pages).map(url => (
<Link href={url} key={url} prefetch>
<a className={`${this.state.activeURL === url ? 'active' : ''} ${this.state.activeURLTopLevelRouter === url ? 'active-top-level-router' : ''} ${this.state.activeURLTopLevelRouterDeprecatedBehavior === url ? 'active-top-level-router-deprecated-behavior' : ''}`}>
{ pages[url] }
</a>
</Link>
))
}
</nav>
)
}
}
export default withRouter(HeaderNav)