Update URL with search query, select text

Author: mstriemer

src/search/components/SearchForm.js

@@ -19,6 +19,10 @@ export class SearchFormBase extends React.Component {
     router: PropTypes.object,
   }
 
+  componentDidMount() {
+    this.refs.query.select();
+  }
+
   goToSearch(query) {
     const { pathname } = this.props;
     this.context.router.push(`${pathname}?q=${query}`);

src/search/components/SearchPage.js

@@ -9,6 +9,7 @@ import SearchResults from './SearchResults';
 export default class SearchPage extends React.Component {
   static propTypes = {
     count: PropTypes.number,
+    location: PropTypes.object.isRequired,
     loading: PropTypes.bool.isRequired,
     page: PropTypes.number,
     results: PropTypes.arrayOf(PropTypes.shape({
@@ -18,6 +19,22 @@ export default class SearchPage extends React.Component {
     query: PropTypes.string,
   }
 
+  static contextTypes = {
+    router: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    const { location, query } = this.props;
+    const { router } = this.context;
+    const url = {
+      ...location,
+      query: { ...location.query, q: query },
+    };
+    if (query && !router.isActive(url)) {
+      router.replace(url);
+    }
+  }
+
   render() {
     const { count, loading, page, query, results } = this.props;
     const pathname = '/search/';