Serialize Icons catalog search into URL

docs/package.json

@@ -21,9 +21,11 @@
     "codemirror": "^5.36.0",
     "fetch-dedupe": "^3.0.0",
     "highlight.js": "^9.12.0",
+    "history": "4.7.2",
     "materialish": "0.15.0",
     "no-scroll": "2.1.1",
     "prop-types": "^15.6.1",
+    "query-string": "6.1.0",
     "react": "^16.0.0",
     "react-clipboard.js": "2.0.0",
     "react-dom": "^16.0.0",

docs/src/app.js

@@ -1,17 +1,27 @@
 import React, { Component, Fragment } from 'react';
 import { Router } from 'react-static';
 import Routes from 'react-static-routes';
+import noScroll from 'no-scroll';
+import { createBrowserHistory } from 'history';
 import './app.css';
+import queryString from 'query-string';
 import Header from './common/header';
 import Nav from './common/nav';
 import Footer from './common/footer';
-import noScroll from 'no-scroll';
+import historyWithQuery from './common/utils/history-with-query';
+
+const history = historyWithQuery(
+  createBrowserHistory(),
+  queryString.stringify,
+  queryString.parse
+);
 
 class App extends Component {
   render() {
     const { isMenuOpen } = this.state;
+
     return (
-      <Router>
+      <Router history={history}>
         <Fragment>
           <Header onToggleMenu={this.onToggleMenu} />
           <div className="app_body">

docs/src/common/utils/history-with-query.js

@@ -0,0 +1,67 @@
+// This code is from the qhistory library:
+// https://github.com/pshrmn/qhistory
+// It didn't seem like big enough code to justify a new dep
+
+/* eslint-disable */
+
+export default function historyWithQuery(history, stringify, parse) {
+  const addSearch = location => {
+    if (typeof location === 'object') {
+      location.search = location.query
+        ? stringify(location.query)
+        : location.search || '';
+    }
+  };
+
+  const addQuery = location => {
+    const { search } = location;
+    if (search) {
+      location.query = parse(
+        search.charAt(0) === '?' ? search.substring(1) : search
+      );
+    } else {
+      location.query = {};
+    }
+  };
+
+  const updateProperties = (history, queryHistory) => {
+    const properties = ['location', 'length', 'entries', 'index', 'action'];
+    properties.forEach(prop => {
+      if (history.hasOwnProperty(prop)) {
+        queryHistory[prop] = history[prop];
+      }
+    });
+  };
+
+  // make sure that the initial location has query support
+  addQuery(history.location);
+
+  const queryHistory = {
+    ...history,
+    push: (location, state) => {
+      addSearch(location);
+      history.push(location, state);
+    },
+    replace: (location, state) => {
+      addSearch(location);
+      history.replace(location, state);
+    },
+    createHref: location => {
+      addSearch(location);
+      return history.createHref(location);
+    },
+  };
+
+  // This relies on being the first listener called by
+  // the actual history instance. If you register a
+  // listener on the history instance before modifying
+  // it with qhistory, the location object will not have
+  // the query property set on it when that listener
+  // is called.
+  history.listen(location => {
+    addQuery(location);
+    updateProperties(history, queryHistory);
+  });
+
+  return queryHistory;
+}

docs/src/icons/catalog.js

@@ -13,8 +13,11 @@ import './catalog.css';
 
 export class IconsCatalog extends Component {
   render() {
-    const { query } = this.state;
-    const lowercaseQuery = query.toLowerCase();
+    const { location } = this.props.history;
+    const { query, pathname } = location;
+    const { search = '' } = query;
+
+    const lowercaseQuery = search.toLowerCase();
 
     const filteredCategories = _.mapValues(
       iconsData.categories,
@@ -56,11 +59,17 @@ export class IconsCatalog extends Component {
                     autoFocus
                     inputMode="text"
                     spellCheck="false"
+                    maxLength="50"
                     type="text"
                     placeholder="Filter icons"
-                    value={query}
+                    value={search}
                     onChange={e =>
-                      this.setState({ query: e.currentTarget.value })
+                      this.props.history.replace({
+                        pathname,
+                        query: {
+                          search: e.currentTarget.value,
+                        },
+                      })
                     }
                   />
                   <p className="iconsCatalog_count">
@@ -148,10 +157,6 @@ export class IconsCatalog extends Component {
       </Over.Provider>
     );
   }
-
-  state = {
-    query: '',
-  };
 }
 
 export default withRouteData(IconsCatalog);