From 45939bc96b6afad93ba1708a2653dbbf46f5b629 Mon Sep 17 00:00:00 2001 From: Samuel Vaillant Date: Mon, 29 Apr 2019 11:23:19 +0200 Subject: [PATCH] fix(compat): upgrade Next.js example lifecycles (#2379) * fix(compat): update Next example * fix(compat): use last Next router --- examples/next/pages/index.js | 72 ++++--- .../tests/__snapshots__/index.test.js.snap | 188 +++++++++--------- examples/next/tests/index.test.js | 2 +- examples/next/yarn.lock | 47 ++--- 4 files changed, 149 insertions(+), 160 deletions(-) diff --git a/examples/next/pages/index.js b/examples/next/pages/index.js index 994061d623..6014154579 100644 --- a/examples/next/pages/index.js +++ b/examples/next/pages/index.js @@ -1,6 +1,7 @@ +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'; @@ -8,65 +9,72 @@ 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 (
-
- -
+
); } } + +export default withRouter(Page); diff --git a/examples/next/tests/__snapshots__/index.test.js.snap b/examples/next/tests/__snapshots__/index.test.js.snap index d1de00ebcf..2f5d83ffa5 100644 --- a/examples/next/tests/__snapshots__/index.test.js.snap +++ b/examples/next/tests/__snapshots__/index.test.js.snap @@ -2,107 +2,105 @@ exports[`Next app recipes App renders without crashing 1`] = `
-
-
-
-

- React InstantSearch + Next.Js -

-
+
+

+ React InstantSearch + Next.Js +

+
+
- + - + -
-
-
- - -
+ + + +
+
+ + +
+
+ +
+
+ + +
`; diff --git a/examples/next/tests/index.test.js b/examples/next/tests/index.test.js index 3e9400018f..95de76ea6c 100644 --- a/examples/next/tests/index.test.js +++ b/examples/next/tests/index.test.js @@ -4,7 +4,7 @@ import App from '../pages/index'; describe('Next app recipes', () => { it('App renders without crashing', () => { - const component = renderer.create(); + const component = renderer.create(); expect(component.toJSON()).toMatchSnapshot(); }); diff --git a/examples/next/yarn.lock b/examples/next/yarn.lock index a26ed98702..a15bddbfc9 100644 --- a/examples/next/yarn.lock +++ b/examples/next/yarn.lock @@ -965,12 +965,12 @@ amdefine@>=0.0.4: version "1.0.1" resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" -amp-toolbox-core@^0.1.5: - version "0.1.5" - resolved "https://registry.yarnpkg.com/amp-toolbox-core/-/amp-toolbox-core-0.1.5.tgz#28d67a0942c953060adbfce5a215a75fc9fe410b" - integrity sha512-5KJlmhJ0lySadyAomLFk2l5yyUlw4zszWNuyyCj2AM9o1M9cP400Bl0bnaz7zTWZGPEHJOYkKG9uVs1cEmYFhg== +amp-toolbox-core@^0.1.5, amp-toolbox-core@^0.1.6: + version "0.1.6" + resolved "https://registry.yarnpkg.com/amp-toolbox-core/-/amp-toolbox-core-0.1.6.tgz#4dda6c1658e1f26f011ca0f41cd4832af8476af7" + integrity sha512-diJOA8/+bnh/8OLjGjb/E+FCT7H0iKzelqZfOeujyCRxbNE2t5J13gWuGva106yS2QEiXttLHwy+nrAkBoAgiw== dependencies: - axios "0.18.0" + node-fetch "2.3.0" amp-toolbox-optimizer@0.5.2-beta.6: version "0.5.2-beta.6" @@ -984,12 +984,11 @@ amp-toolbox-optimizer@0.5.2-beta.6: parse5-htmlparser2-tree-adapter "^5.1.0" amp-toolbox-runtime-version@^0.2.6: - version "0.2.6" - resolved "https://registry.yarnpkg.com/amp-toolbox-runtime-version/-/amp-toolbox-runtime-version-0.2.6.tgz#8d403ef396c25dd5d21b1b0ea7fdcaf66ba616c6" - integrity sha512-RZjB2TJpSIhKESrXYss4S1+D7qautS6sl3RLQeBhI/RpsypRCePFC8F2tzQauV+0XfgobUcHGU8h9nR7RmaacA== + version "0.2.7" + resolved "https://registry.yarnpkg.com/amp-toolbox-runtime-version/-/amp-toolbox-runtime-version-0.2.7.tgz#09cbe73a8929cfbae702348bbf7537b180783e9e" + integrity sha512-5hUIKtFOrhb5gM1fDlqJ2YDKqSDS8kCWtykt7a4Dvrjr9CPD7L/OK+cKk+u1QLvUKO24ADOE9j2PS28B/TMaiQ== dependencies: - amp-toolbox-core "^0.1.5" - axios "^0.18.0" + amp-toolbox-core "^0.1.6" amphtml-validator@1.0.23: version "1.0.23" @@ -1229,14 +1228,6 @@ aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" -axios@0.18.0, axios@^0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" - integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI= - dependencies: - follow-redirects "^1.3.0" - is-buffer "^1.1.5" - babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -2060,13 +2051,6 @@ debug@^3.1.0: dependencies: ms "2.0.0" -debug@^3.2.6: - version "3.2.6" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" - integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ== - dependencies: - ms "^2.1.1" - debug@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87" @@ -2579,13 +2563,6 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" -follow-redirects@^1.3.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76" - integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ== - dependencies: - debug "^3.2.6" - for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -3921,6 +3898,7 @@ lodash@^4.13.1, lodash@^4.14.0: lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5: version "4.17.11" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" + integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== longest@^1.0.1: version "1.0.1" @@ -4277,6 +4255,11 @@ next@8.1.0: webpack-sources "1.3.0" worker-farm "1.5.2" +node-fetch@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.3.0.tgz#1a1d940bbfb916a1d3e0219f037e89e71f8c5fa5" + integrity sha512-MOd8pV3fxENbryESLgVIeaGKrdl+uaYhCSSVkjeOb/31/njTpcis5aWfdqgNlHIrKOLRbMnfPINPOML2CIFeXA== + node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"