diff --git a/packages/react-instantsearch/examples/react-router-v4/package.json b/packages/react-instantsearch/examples/react-router-v4/package.json index 5e66d3a8fc..5680379c7e 100644 --- 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 index 837478ca3a..5f8aafa0d6 100644 --- 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 ( `?${qs.stringify(state)}`} + createURL={this.createURL} >
@@ -46,7 +50,7 @@ export default class App extends Component { alignItems: 'center', marginBottom: 10, }}> - +
@@ -61,22 +65,22 @@ export default class App extends Component { ]} />

Menu

- +

Refinement List

- +

Range Ratings

- +
- +
- +
@@ -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 index 082d12d4d7..ba43b81918 100644 --- 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( - - - , + + + , document.getElementById('root') );