Search improves (#67)

* ESC should go back from search
using direct onKeyDown here as react-keydown does not trigger within an input

* Addressable search urls

frontend/scenes/Search/Search.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import _ from 'lodash';
 import { Flex } from 'reflexbox';
+import { withRouter } from 'react-router';
+import { searchUrl } from 'utils/routeHelpers';
 
 import SearchField from './components/SearchField';
 import styles from './Search.scss';
@@ -13,6 +15,8 @@ import CenteredContent from 'components/CenteredContent';
 import DocumentPreview from 'components/DocumentPreview';
 
 type Props = {
+  history: Object,
+  match: Object,
   notFound: ?boolean,
 };
 
@@ -23,12 +27,31 @@ type Props = {
   constructor(props: Props) {
     super(props);
     this.store = new SearchStore();
+    this.updateSearchResults();
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.query !== this.props.match.params.query) {
+      this.updateSearchResults();
+    }
+  }
+
+  handleKeyDown = ev => {
+    if (ev.which === 27) {
+      ev.preventDefault();
+      this.props.history.goBack();
+    }
+  };
+
+  updateSearchResults = _.debounce(() => {
+    this.store.search(this.props.match.params.query);
+  }, 250);
+
+  updateQuery = query => {
+    this.props.history.replace(searchUrl(query));
+  };
+
   render() {
-    const search = _.debounce(searchTerm => {
-      this.store.search(searchTerm);
-    }, 250);
     const title = <Title content="Search" />;
 
     return (
@@ -55,15 +78,13 @@ type Props = {
               />
               <SearchField
                 searchTerm={this.store.searchTerm}
-                onChange={search}
+                onKeyDown={this.handleKeyDown}
+                onChange={this.updateQuery}
               />
             </Flex>
-            {this.store.documents &&
-              this.store.documents.map(document => {
-                return (
-                  <DocumentPreview key={document.id} document={document} />
-                );
-              })}
+            {this.store.documents.map(document => (
+              <DocumentPreview key={document.id} document={document} />
+            ))}
           </Flex>
         </CenteredContent>
       </Layout>
@@ -71,4 +92,4 @@ type Props = {
   }
 }
 
-export default Search;
+export default withRouter(Search);