From dc7480218c1d87a56f9321d749b7cf4936c6e3d3 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Thu, 9 Feb 2017 19:57:35 -0800
Subject: [PATCH] auto find on 404

---
 frontend/index.js                     |  5 ++---
 frontend/scenes/Error404/Error404.js  |  2 +-
 frontend/scenes/Search/Search.js      | 29 +++++++++++++++++++++++++--
 frontend/scenes/Search/SearchStore.js |  4 +---
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/index.js b/frontend/index.js
index 14e309675..a811af1b7 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -4,7 +4,6 @@ import { Provider } from 'mobx-react';
 import Router from 'react-router/lib/Router';
 import Route from 'react-router/lib/Route';
 import IndexRoute from 'react-router/lib/IndexRoute';
-import Redirect from 'react-router/lib/Redirect';
 import History from 'utils/History';
 import { Offline } from 'components/Offline';
 
@@ -28,8 +27,8 @@ import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import SlackAuth from 'scenes/SlackAuth';
 import Flatpage from 'scenes/Flatpage';
-import Error404 from 'scenes/Error404';
 import ErrorAuth from 'scenes/ErrorAuth';
+import Error404 from 'scenes/Error404';
 
 import flatpages from 'static/flatpages';
 
@@ -99,7 +98,7 @@ render((
 
 
             <Route path="/404" component={ Error404 } />
-            <Redirect from="*" to="/404" />
+            <Route path="*" component={ Search } sceneType="notFound" />
           </Route>
         </Router>
       </Offline>
diff --git a/frontend/scenes/Error404/Error404.js b/frontend/scenes/Error404/Error404.js
index 8fbe583ef..462a066ba 100644
--- a/frontend/scenes/Error404/Error404.js
+++ b/frontend/scenes/Error404/Error404.js
@@ -13,7 +13,7 @@ class Error404 extends React.Component {
         <CenteredContent>
           <h1>Not Found</h1>
 
-          <p>We're unable to find the page you're trying to find the page you're accessing.</p>
+          <p>We're unable to find the page you're accessing.</p>
 
           <p>Maybe you want to try <Link to="/search">search</Link> instead?</p>
         </CenteredContent>
diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js
index f27b40c0f..e2c653820 100644
--- a/frontend/scenes/Search/Search.js
+++ b/frontend/scenes/Search/Search.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
 import _ from 'lodash';
 
@@ -14,13 +14,30 @@ import SearchStore from './SearchStore';
 
 @observer
 class Search extends React.Component {
-  static store;
+  static propTypes = {
+    route: PropTypes.object.isRequired,
+    routeParams: PropTypes.object.isRequired,
+  }
 
   constructor(props) {
     super(props);
     this.store = new SearchStore();
   }
 
+  componentDidMount = () => {
+    const { splat } = this.props.routeParams;
+    if (this.viewNotFound) {
+      let searchTerm = _.last(splat.split('/'));
+      searchTerm = searchTerm.split(/[\s-]+/gi).join(' ');
+      this.store.search(searchTerm);
+    }
+  }
+
+  get viewNotFound() {
+    const { sceneType } = this.props.route;
+    return sceneType === 'notFound';
+  }
+
   render() {
     const search = _.debounce((searchTerm) => {
       this.store.search(searchTerm);
@@ -39,6 +56,14 @@ class Search extends React.Component {
         loading={ this.store.isFetching }
       >
         <CenteredContent>
+          { this.viewNotFound && (
+            <div>
+              <h1>Not Found</h1>
+              <p>We're unable to find the page you're accessing.</p>
+              <hr />
+            </div>
+          ) }
+
           <Flex column auto>
             <Flex auto>
               <img
diff --git a/frontend/scenes/Search/SearchStore.js b/frontend/scenes/Search/SearchStore.js
index 0414a4b42..7f3aa250c 100644
--- a/frontend/scenes/Search/SearchStore.js
+++ b/frontend/scenes/Search/SearchStore.js
@@ -1,6 +1,5 @@
 import { observable, action, runInAction } from 'mobx';
 import { client } from 'utils/ApiClient';
-import { browserHistory } from 'react-router';
 
 class SearchStore {
   @observable documents;
@@ -33,7 +32,6 @@ class SearchStore {
 
     this.isFetching = false;
   }
-
-};
+}
 
 export default SearchStore;