Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Commit

Permalink
fix(compat): upgrade React Router v3 example lifecycles (#2314)
Browse files Browse the repository at this point in the history
  • Loading branch information
francoischalifour authored and Haroenv committed May 23, 2019
1 parent ce717d7 commit a4d996b
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 39 deletions.
2 changes: 1 addition & 1 deletion examples/react-router-v3/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"react": "16.8.6",
"react-dom": "16.8.6",
"react-instantsearch-dom": "5.4.0",
"react-router": "3.0.5"
"react-router": "3.2.1"
},
"browserslist": [
">0.2%",
Expand Down
60 changes: 31 additions & 29 deletions examples/react-router-v3/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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
Expand All @@ -80,6 +80,7 @@ class App extends Component {
<SearchBox />
<PoweredBy />
</div>

<div style={{ display: 'flex' }}>
<div style={{ padding: '0px 20px' }}>
<p>Hierarchical Menu</p>
Expand All @@ -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 />
Expand Down
18 changes: 9 additions & 9 deletions examples/react-router-v3/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4683,10 +4683,10 @@ hoek@4.x.x:
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
integrity sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ==

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==

home-or-tmp@^2.0.0:
version "2.0.0"
Expand Down Expand Up @@ -8456,14 +8456,14 @@ 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"
Expand Down

0 comments on commit a4d996b

Please sign in to comment.