This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(compat): upgrade Next.js example lifecycles (#2379)
* fix(compat): update Next example * fix(compat): use last Next router
- Loading branch information
Showing
4 changed files
with
149 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,80 @@ | ||
| import { isEqual } from 'lodash'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Router from 'next/router'; | ||
| import { withRouter } from 'next/router'; | ||
| import qs from 'qs'; | ||
| import { Head, App, findResultsState } from '../components'; | ||
|
|
||
| const updateAfter = 700; | ||
|
|
||
| const createURL = state => `?${qs.stringify(state)}`; | ||
|
|
||
| const searchStateToUrl = searchState => | ||
| const pathToSearchState = path => | ||
| path.includes('?') ? qs.parse(path.substring(path.indexOf('?') + 1)) : {}; | ||
|
|
||
| const searchStateToURL = searchState => | ||
| searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''; | ||
|
|
||
| export default class extends React.Component { | ||
| class Page extends React.Component { | ||
| static propTypes = { | ||
| router: PropTypes.object.isRequired, | ||
| resultsState: PropTypes.object, | ||
| searchState: PropTypes.object, | ||
| }; | ||
|
|
||
| state = { | ||
| searchState: this.props.searchState, | ||
| lastRouter: this.props.router, | ||
| }; | ||
|
|
||
| /* | ||
| nextjs params.query doesn't handle nested objects | ||
| once it does, params.query could be used directly here, but also inside the constructor | ||
| to initialize the searchState. | ||
| */ | ||
| static async getInitialProps(params) { | ||
| const searchState = params.asPath.includes('?') | ||
| ? qs.parse(params.asPath.substring(params.asPath.indexOf('?') + 1)) | ||
| : {}; | ||
| static async getInitialProps({ asPath }) { | ||
| const searchState = pathToSearchState(asPath); | ||
| const resultsState = await findResultsState(App, { searchState }); | ||
| return { resultsState, searchState }; | ||
|
|
||
| return { | ||
| resultsState, | ||
| searchState, | ||
| }; | ||
| } | ||
|
|
||
| static getDerivedStateFromProps(props, state) { | ||
| if (!isEqual(state.lastRouter, props.router)) { | ||
| return { | ||
| searchState: pathToSearchState(props.router.asPath), | ||
| lastRouter: props.router, | ||
| }; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| onSearchStateChange = searchState => { | ||
| clearTimeout(this.debouncedSetState); | ||
|
|
||
| this.debouncedSetState = setTimeout(() => { | ||
| const href = searchStateToUrl(searchState); | ||
| Router.push(href, href, { | ||
| const href = searchStateToURL(searchState); | ||
|
|
||
| this.props.router.push(href, href, { | ||
| shallow: true, | ||
| }); | ||
| }, updateAfter); | ||
|
|
||
| this.setState({ searchState }); | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| this.setState({ searchState: qs.parse(window.location.search.slice(1)) }); | ||
| } | ||
|
|
||
| componentWillReceiveProps() { | ||
| // @TODO: probably derived state | ||
| this.setState({ searchState: qs.parse(window.location.search.slice(1)) }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <Head title="Home" /> | ||
| <div> | ||
| <App | ||
| searchState={this.state.searchState} | ||
| resultsState={this.props.resultsState} | ||
| onSearchStateChange={this.onSearchStateChange} | ||
| createURL={createURL} | ||
| /> | ||
| </div> | ||
| <App | ||
| searchState={this.state.searchState} | ||
| resultsState={this.props.resultsState} | ||
| onSearchStateChange={this.onSearchStateChange} | ||
| createURL={createURL} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withRouter(Page); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.