Boilerplate for /search

package.json

@@ -95,6 +95,7 @@
     "react-dom": "15.1.0",
     "react-dropzone": "3.3.2",
     "react-helmet": "3.1.0",
+    "react-keydown": "^1.6.1",
     "react-router": "2.5.1",
     "rebass": "0.2.6",
     "safestart": "0.8.0",

src/components/Layout/Layout.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import Link from 'react-router/lib/Link';
+import { browserHistory, Link } from 'react-router';
 import Helmet from 'react-helmet';
 import { observer } from 'mobx-react';
+import keydown from 'react-keydown';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import Flex from 'components/Flex';
@@ -21,6 +22,17 @@ class Layout extends React.Component {
     fixed: React.PropTypes.bool,
     loading: React.PropTypes.bool,
     user: React.PropTypes.object.isRequired,
+    search: React.PropTypes.bool,
+  }
+
+  static defaultProps = {
+    search: true,
+  }
+
+  @keydown(['/', 't'])
+  search() {
+    if (!this.props.search) return;
+    browserHistory.push('/search');
   }
 
   render() {
@@ -50,11 +62,13 @@ class Layout extends React.Component {
             <Flex align="center" className={ styles.actions }>
               { this.props.actions }
             </Flex>
-            <Flex>
+            { this.props.search && (
-              <div className={ styles.search }>
+              <Flex>
-                <img src={ require('assets/icons/search.svg') } />
+                <div className={ styles.search } onClick={ this.search }>
-              </div>
+                  <img src={ require('assets/icons/search.svg') } />
-            </Flex>
+                </div>
+              </Flex>
+            ) }
             <DropdownMenu label={
               <Avatar
                 circle
@@ -75,4 +89,4 @@ class Layout extends React.Component {
   }
 }
 
-export default Layout;
+export default Layout;

src/index.js

@@ -22,6 +22,7 @@ import Dashboard from 'scenes/Dashboard';
 import Atlas from 'scenes/Atlas';
 import DocumentScene from 'scenes/DocumentScene';
 import DocumentEdit from 'scenes/DocumentEdit';
+import Search from 'scenes/Search';
 import SlackAuth from 'scenes/SlackAuth';
 
 let DevTools;
@@ -52,6 +53,8 @@ render((
           <Route path="/documents/:id/edit" component={ DocumentEdit } onEnter={ requireAuth } />
           <Route path="/documents/:id/new" component={ DocumentEdit } onEnter={ requireAuth } newChildDocument={ true } />
 
+          <Route path="/search" component={ Search } onEnter={ requireAuth } />
+
           <Route path="/auth/slack" component={SlackAuth} />
         </Route>
       </Router>

src/scenes/DocumentEdit/DocumentEdit.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { browserHistory, withRouter } from 'react-router';
+import keydown from 'react-keydown';
 
 import DocumentEditStore, {
   DOCUMENT_EDIT_SETTINGS,
@@ -132,6 +133,7 @@ class DocumentEdit extends Component {
         titleText={ titleText }
         fixed
         loading={ this.store.isSaving }
+        search={ false }
       >
         { (this.store.isFetching || !('Editor' in this.state)) ? (
           <CenteredContent>

src/scenes/Search/Search.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+
+import Flex from 'components/Flex';
+import Layout from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
+
+@observer
+class Search extends React.Component {
+  render() {
+    return (
+      <Layout
+        title="Search"
+        titleText="Search"
+        search={ false }
+      >
+        <CenteredContent>
+          <Flex direction="column" flex={ true }>
+            TBA
+          </Flex>
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+
+export default Search;

src/scenes/Search/index.js

@@ -0,0 +1,2 @@
+import Search from './Search';
+export default Search;