docs(react-router-v4): update API

algolia · Mar 3, 2017 · 4350bc1 · 4350bc1
1 parent 01c93e8
commit 4350bc1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 35 deletions.
diff --git a/packages/react-instantsearch/examples/react-router-v4/package.json b/packages/react-instantsearch/examples/react-router-v4/package.json
@@ -10,7 +10,7 @@
     "react-dom": "^15.3.2",
     "react-instantsearch": "latest",
     "react-instantsearch-theme-algolia": "latest",
-    "react-router": "4.0.0-alpha.6"
+    "react-router-dom": "next"
   },
   "scripts": {
     "start": "react-scripts start"

diff --git a/packages/react-instantsearch/examples/react-router-v4/src/App.js b/packages/react-instantsearch/examples/react-router-v4/src/App.js
@@ -7,35 +7,39 @@ import {
 import 'react-instantsearch-theme-algolia/style.css';
 import qs from 'qs';
 
-export default class App extends Component {
-  constructor (props) {
+const updateAfter = 700;
+const searchStateToUrl =
+  (props, searchState) =>
+    searchState ? `${props.location.pathname}?${qs.stringify(searchState)}` : '';
+
+class App extends Component {
+  constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {searchState: qs.parse(props.location.search.slice(1))};
   }
 
-  onSearchStateChange (nextSearchState) {
-    const THRESHOLD = 700;
-    const newPush = Date.now();
-    const {router} = this.context;
-    this.setState({lastPush: newPush});
+  onSearchStateChange = searchState => {
+    clearTimeout(this.debouncedSetState);
+    this.debouncedSetState = setTimeout(() => {
+      this.props.push(
+      searchStateToUrl(this.props, searchState),
+      searchState
+      );
+    }, updateAfter);
+    this.setState({searchState});
+  };
 
-    if (this.state.lastPush && newPush - this.state.lastPush <= THRESHOLD) {
-      router.replaceWith(nextSearchState ? `?${qs.stringify(nextSearchState)}` : '');
-    } else {
-      router.transitionTo(nextSearchState ? `?${qs.stringify(nextSearchState)}` : '');
-    }
-  }
+  createURL = state => `?${qs.stringify(state)}`;
 
   render() {
-    const {location} = this.props;
     return (
       <InstantSearch
         appId="latency"
         apiKey="6be0576ff61c053d5f9a3225e2a90f76"
         indexName="ikea"
-        searchState={qs.parse(location.query)}
+        searchState={this.state.searchState}
         onSearchStateChange={this.onSearchStateChange.bind(this)}
-        createURL={state => `?${qs.stringify(state)}`}
+        createURL={this.createURL}
       >
 
         <div>
@@ -46,7 +50,7 @@ export default class App extends Component {
             alignItems: 'center',
             marginBottom: 10,
           }}>
-            <SearchBox/>
+            <SearchBox />
             <PoweredBy />
           </div>
           <div style={{display: 'flex'}}>
@@ -61,22 +65,22 @@ export default class App extends Component {
                 ]}
               />
               <p>Menu</p>
-              <Menu attributeName="type"/>
+              <Menu attributeName="type" />
               <p>Refinement List</p>
-              <RefinementList attributeName="colors"/>
+              <RefinementList attributeName="colors" />
               <p>Range Ratings</p>
-              <StarRating attributeName="rating" max={6}/>
+              <StarRating attributeName="rating" max={6} />
 
             </div>
             <div style={{display: 'flex', flexDirection: 'column', flex: 1}}>
               <div style={{display: 'flex', justifyContent: 'space-around'}}>
-                <ClearAll/>
+                <ClearAll />
               </div>
               <div>
                 <Hits />
               </div>
               <div style={{alignSelf: 'center'}}>
-                <Pagination showLast={true}/>
+                <Pagination showLast={true} />
               </div>
             </div>
           </div>
@@ -87,9 +91,8 @@ export default class App extends Component {
 }
 
 App.propTypes = {
-  location: React.PropTypes.object,
+  push: React.PropTypes.func.isRequired,
+  location: React.PropTypes.object.isRequired,
 };
 
-App.contextTypes = {
-  router: React.PropTypes.object,
-};
+export default App;
diff --git a/packages/react-instantsearch/examples/react-router-v4/src/index.js b/packages/react-instantsearch/examples/react-router-v4/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import {BrowserRouter, Match} from 'react-router';
+import {
+  BrowserRouter as Router,
+  Route,
+} from 'react-router-dom';
 
 ReactDOM.render(
-  <BrowserRouter>
-    <Match
-      pattern="/"
-      component={App}
-    />
-  </BrowserRouter>,
+  <Router>
+    <Route path="/" component={App}/>
+  </Router>,
   document.getElementById('root')
 );