fix(compat): upgrade React Router v3 example lifecycles (#2314)

algolia · Jun 27, 2019 · 3647154 · 3647154
1 parent ab828b0
commit 3647154
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/examples/react-router-v3/package.json b/examples/react-router-v3/package.json
@@ -21,7 +21,7 @@
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "react-instantsearch-dom": "5.7.0",
-    "react-router": "3.0.5"
+    "react-router": "3.2.1"
   },
   "browserslist": [
     ">0.2%",

diff --git a/examples/react-router-v3/src/App.js b/examples/react-router-v3/src/App.js
@@ -22,41 +22,41 @@ const searchClient = algoliasearch(
   '6be0576ff61c053d5f9a3225e2a90f76'
 );
 
+const THRESHOLD = 700;
+const createURL = state => `?${qs.stringify(state)}`;
+
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { searchState: { ...qs.parse(props.router.location.query) } };
-    this.onSearchStateChange = this.onSearchStateChange.bind(this);
-    this.createURL = this.createURL.bind(this);
-  }
+  state = {
+    searchState: qs.parse(this.props.router.location.query),
+  };
 
-  componentWillReceiveProps() {
-    // @TODO: derived state
-    this.setState({ searchState: qs.parse(this.props.router.location.query) });
-  }
+  static getDerivedStateFromProps(props, state) {
+    const newSearchState = qs.parse(props.router.location.query);
+
+    if (!isEqual(newSearchState, state.searchState)) {
+      return {
+        searchState: newSearchState,
+      };
+    }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return !isEqual(this.state.searchState, nextState.searchState);
+    return null;
   }
 
-  onSearchStateChange(nextSearchState) {
-    const THRESHOLD = 700;
+  onSearchStateChange = nextSearchState => {
     const newPush = Date.now();
-    this.setState({ lastPush: newPush, searchState: nextSearchState });
-    if (this.state.lastPush && newPush - this.state.lastPush <= THRESHOLD) {
-      this.props.router.replace(
-        nextSearchState ? `?${qs.stringify(nextSearchState)}` : ''
-      );
-    } else {
-      this.props.router.push(
-        nextSearchState ? `?${qs.stringify(nextSearchState)}` : ''
-      );
-    }
-  }
 
-  createURL(state) {
-    return `?${qs.stringify(state)}`;
-  }
+    this.setState({ lastPush: newPush, searchState: nextSearchState }, () => {
+      if (this.state.lastPush && newPush - this.state.lastPush <= THRESHOLD) {
+        this.props.router.replace(
+          nextSearchState ? `?${qs.stringify(nextSearchState)}` : ''
+        );
+      } else {
+        this.props.router.push(
+          nextSearchState ? `?${qs.stringify(nextSearchState)}` : ''
+        );
+      }
+    });
+  };
 
   render() {
     return (
@@ -65,7 +65,7 @@ class App extends Component {
         indexName="instant_search"
         searchState={this.state.searchState}
         onSearchStateChange={this.onSearchStateChange}
-        createURL={this.createURL}
+        createURL={createURL}
       >
         <div>
           <div
@@ -80,6 +80,7 @@ class App extends Component {
             <SearchBox />
             <PoweredBy />
           </div>
+
           <div style={{ display: 'flex' }}>
             <div style={{ padding: '0px 20px' }}>
               <p>Hierarchical Menu</p>
@@ -98,6 +99,7 @@ class App extends Component {
               <p>Range Ratings</p>
               <RatingMenu attribute="rating" max={6} />
             </div>
+
             <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
               <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                 <ClearRefinements />

diff --git a/examples/react-router-v3/yarn.lock b/examples/react-router-v3/yarn.lock
@@ -5083,10 +5083,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
   integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
 
-hoist-non-react-statics@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
-  integrity sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
 hosted-git-info@^2.1.4:
   version "2.5.0"
@@ -8854,14 +8854,14 @@ react-is@^16.8.4, react-is@^16.8.6:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-react-router@3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.5.tgz#c3b7873758045a8bbc9562aef4ff4bc8cce7c136"
-  integrity sha1-w7eHN1gEWou8lWKu9P9LyMznwTY=
+react-router@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.1.tgz#b9a3279962bdfbe684c8bd0482b81ef288f0f244"
+  integrity sha512-SXkhC0nr3G0ltzVU07IN8jYl0bB6FsrDIqlLC9dK3SITXqyTJyM7yhXlUqs89w3Nqi5OkXsfRUeHX+P874HQrg==
   dependencies:
     create-react-class "^15.5.1"
     history "^3.0.0"
-    hoist-non-react-statics "^1.2.0"
+    hoist-non-react-statics "^2.3.1"
     invariant "^2.2.1"
     loose-envify "^1.2.0"
     prop-types "^15.5.6"