Add URL state for search

I was using this example sandbox to implement it(!)
https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/packages/react-instantsearch/examples/react-router

Author: Ives van Hoorne

package.json

@@ -100,6 +100,7 @@
     "moment": "^2.18.1",
     "normalize.css": "^5.0.0",
     "normalizr": "^3.2.3",
+    "qs": "^6.5.0",
     "rc-slider": "^8.2.0",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",

src/app/pages/Search/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { InstantSearch, SearchBox, PoweredBy } from 'react-instantsearch/dom';
+import qs from 'qs';
 
 import Title from 'app/components/text/Title';
 import MaxWidth from 'app/components/flex/MaxWidth';
@@ -38,37 +39,65 @@ const SEARCHABLE_THINGS = [
   'github repository',
 ];
 
+const updateAfter = 700;
+
 const getRandomSearch = () =>
   SEARCHABLE_THINGS[Math.floor(Math.random() * SEARCHABLE_THINGS.length)];
 
-export default () => {
-  document.title = 'Search - CodeSandbox';
-  return (
-    <MaxWidth>
-      <Margin vertical={1.5} horizontal={1.5}>
-        <Navigation title="Search" />
-        <Content>
-          <MaxWidth width={1024}>
-            <InstantSearch
-              appId={ALGOLIA_APPLICATION_ID}
-              apiKey={ALGOLIA_API_KEY}
-              indexName={ALGOLIA_DEFAULT_INDEX}
-            >
-              <StyledTitle>Sandbox Search</StyledTitle>
-              <PoweredBy />
-              <SearchBox
-                translations={{
-                  placeholder: `Search for a ${getRandomSearch()}...`,
-                }}
-              />
-              <Row alignItems="flex-start">
-                <Results />
-                <Filters />
-              </Row>
-            </InstantSearch>
-          </MaxWidth>
-        </Content>
-      </Margin>
-    </MaxWidth>
-  );
-};
+const createURL = state => `?${qs.stringify(state)}`;
+
+const searchStateToUrl = (props, searchState) =>
+  searchState ? `${props.location.pathname}${createURL(searchState)}` : '';
+
+export default class Search extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { searchState: qs.parse(props.location.search.slice(1)) };
+  }
+
+  onSearchStateChange = searchState => {
+    clearTimeout(this.debouncedSetState);
+    this.debouncedSetState = setTimeout(() => {
+      this.props.history.push(
+        searchStateToUrl(this.props, searchState),
+        searchState,
+      );
+    }, updateAfter);
+    this.setState({ searchState });
+  };
+
+  render() {
+    document.title = 'Search - CodeSandbox';
+    return (
+      <MaxWidth>
+        <Margin vertical={1.5} horizontal={1.5}>
+          <Navigation title="Search" />
+          <Content>
+            <MaxWidth width={1024}>
+              <InstantSearch
+                appId={ALGOLIA_APPLICATION_ID}
+                apiKey={ALGOLIA_API_KEY}
+                indexName={ALGOLIA_DEFAULT_INDEX}
+                searchState={this.state.searchState}
+                onSearchStateChange={this.onSearchStateChange.bind(this)}
+                createURL={createURL}
+              >
+                <StyledTitle>Sandbox Search</StyledTitle>
+                <PoweredBy />
+                <SearchBox
+                  translations={{
+                    placeholder: `Search for a ${getRandomSearch()}...`,
+                  }}
+                />
+                <Row alignItems="flex-start">
+                  <Results />
+                  <Filters />
+                </Row>
+              </InstantSearch>
+            </MaxWidth>
+          </Content>
+        </Margin>
+      </MaxWidth>
+    );
+  }
+}

yarn.lock

@@ -6249,6 +6249,10 @@ [email protected], qs@^6.2.1, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+qs@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"