docs(examples): add react router v4 example

* Add React Router v4 example * Linted * fix linter
algolia · Jan 18, 2017 · 9b4c602 · 9b4c602
1 parent 89f8323
commit 9b4c602
Show file tree

Hide file tree

Showing 7 changed files with 5,662 additions and 1 deletion.
diff --git a/packages/react-instantsearch/examples/react-router-v4/README.md b/packages/react-instantsearch/examples/react-router-v4/README.md
@@ -0,0 +1,11 @@
+This example shows how to synchronize your instantsearch url
+if you are using react-router.
+
+To start the example:
+
+```sh
+yarn
+yarn start
+```
+
+Read more about react-instantsearch [in our documentation](https://community.algolia.com/instantsearch.js/react/).
diff --git a/packages/react-instantsearch/examples/react-router-v4/package.json b/packages/react-instantsearch/examples/react-router-v4/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "^0.8.5"
+  },
+  "dependencies": {
+    "lodash": "^4.16.6",
+    "qs": "^6.3.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-instantsearch": "latest",
+    "react-instantsearch-theme-algolia": "latest",
+    "react-router": "4.0.0-alpha.6"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "main": "index.js",
+  "license": "MIT"
+}
diff --git a/packages/react-instantsearch/examples/react-router-v4/public/index.html b/packages/react-instantsearch/examples/react-router-v4/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>react-router feat react-instantsearch</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/react-instantsearch/examples/react-router-v4/src/App.js b/packages/react-instantsearch/examples/react-router-v4/src/App.js
@@ -0,0 +1,95 @@
+import React, {Component} from 'react';
+import {
+  InstantSearch, HierarchicalMenu,
+  Hits, Menu, Pagination, PoweredBy, StarRating,
+  RefinementList, SearchBox, ClearAll,
+} from 'react-instantsearch/dom';
+import 'react-instantsearch-theme-algolia/style.css';
+import qs from 'qs';
+
+export default class App extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {};
+  }
+
+  onSearchStateChange (nextSearchState) {
+    const THRESHOLD = 700;
+    const newPush = Date.now();
+    const {router} = this.context;
+    this.setState({lastPush: newPush});
+
+    if (this.state.lastPush && newPush - this.state.lastPush <= THRESHOLD) {
+      router.replaceWith(nextSearchState ? `?${qs.stringify(nextSearchState)}` : '');
+    } else {
+      router.transitionTo(nextSearchState ? `?${qs.stringify(nextSearchState)}` : '');
+    }
+  }
+
+  render() {
+    const {location} = this.props;
+    return (
+      <InstantSearch
+        appId="latency"
+        apiKey="6be0576ff61c053d5f9a3225e2a90f76"
+        indexName="ikea"
+        searchState={qs.parse(location.query)}
+        onSearchStateChange={this.onSearchStateChange.bind(this)}
+        createURL={state => `?${qs.stringify(state)}`}
+      >
+
+        <div>
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginBottom: 10,
+          }}>
+            <SearchBox/>
+            <PoweredBy />
+          </div>
+          <div style={{display: 'flex'}}>
+            <div style={{padding: '0px 20px'}}>
+              <p>Hierarchical Menu</p>
+              <HierarchicalMenu
+                id="categories"
+                attributes={[
+                  'category',
+                  'sub_category',
+                  'sub_sub_category',
+                ]}
+              />
+              <p>Menu</p>
+              <Menu attributeName="type"/>
+              <p>Refinement List</p>
+              <RefinementList attributeName="colors"/>
+              <p>Range Ratings</p>
+              <StarRating attributeName="rating" max={6}/>
+
+            </div>
+            <div style={{display: 'flex', flexDirection: 'column', flex: 1}}>
+              <div style={{display: 'flex', justifyContent: 'space-around'}}>
+                <ClearAll/>
+              </div>
+              <div>
+                <Hits />
+              </div>
+              <div style={{alignSelf: 'center'}}>
+                <Pagination showLast={true}/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </InstantSearch>
+    );
+  }
+}
+
+App.propTypes = {
+  location: React.PropTypes.object,
+};
+
+App.contextTypes = {
+  router: React.PropTypes.object,
+};
diff --git a/packages/react-instantsearch/examples/react-router-v4/src/index.js b/packages/react-instantsearch/examples/react-router-v4/src/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import {BrowserRouter, Match} from 'react-router';
+
+ReactDOM.render(
+  <BrowserRouter>
+    <Match
+      pattern="/"
+      component={App}
+    />
+  </BrowserRouter>,
+  document.getElementById('root')
+);