Finish search from header

js/actions.js

@@ -1,10 +1,11 @@
 export const NAVIGATE = 'navigate';
 
 const actions = {
-  navigate: (pageName, pushToHistory = true) => {
+  navigate: (pageName, pushToHistory = true, pageState = {}) => {
     return {
       type: NAVIGATE,
       pageName,
+      pageState,
       pushToHistory,
     };
   },

js/components/App.js

@@ -26,6 +26,6 @@ function App(props) {
 }
 
 export default connect(
-  ({ items, releases, pageName }) => ({ items, releases, pageName }),
+  ({ items, releases, pageName, pageState }) => ({ items, releases, pageName, pageState }),
   actions
 )(App);

js/components/Header.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import classNames from 'classnames';
+import { connect } from 'react-redux';
+
 import Branding from './Branding';
 import Link from './Link';
 import LogoLink from './LogoLink';
 import Search from './Search';
 import { getItemPageNames } from '../../common/config';
+import actions from '../actions';
 
 class Header extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
       searchOpen: false,
+      search: '',
     };
   }
 
@@ -26,9 +30,29 @@ class Header extends React.Component {
     });
   }
 
+  handleSearchChange = (search) => {
+    this.setState({
+      search,
+    });
+  }
+
+  handleSearchSubmit = () => {
+    this.props.navigate('overview', true, {
+      search: this.state.search,
+    });
+
+    this.setState({
+      searchOpen: false,
+      search: '',
+    });
+  }
+
   handleOpenClick = (e) => {
     e.preventDefault();
     this.openSearch();
+    setTimeout(() => {
+      this.search.focus();
+    }, 0);
   }
 
   render() {
@@ -56,7 +80,14 @@ class Header extends React.Component {
               <span className="icon icon--search icon-link__icon"></span>Search
             </a>
             <div className={classNames('nav__search', { 'is-open': searchOpen })}>
-              <Search onClose={this.closeSearch} open={searchOpen} />
+              <Search
+                value={this.state.search}
+                onClose={this.closeSearch}
+                onSubmit={this.handleSearchSubmit}
+                onChange={this.handleSearchChange}
+                open={searchOpen}
+                ref={(s) => { this.search = s; }}
+              />
             </div>
           </div>
         </div>
@@ -65,4 +96,8 @@ class Header extends React.Component {
   }
 }
 
-export default Header;
+
+export default connect(
+  undefined,
+  actions
+)(Header);

js/components/PageOverview.js

@@ -18,14 +18,23 @@ const containsSearchTerm = (text = '', term = '') => {
 
 class PageOverview extends React.Component {
 
-  constructor(...args) {
+  constructor(props, ...args) {
-    super(...args);
+    super(props, ...args);
     this.state = {
       ring: rings[0],
-      search: '',
+      search: props.pageState.search || '',
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.search !== nextProps.pageState.search) {
+      this.setState({
+        ring: rings[0],
+        search: nextProps.pageState.search,
+      });
+    }
+  }
+
   handleRingClick = (ring) => (e) => {
     e.preventDefault();
 

js/components/Search.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }) {
+class Search extends React.Component {
+  focus() {
+    this.input.focus();
+  }
+
+  render() {
+    const { value, onChange, onClose, open = false, onSubmit = () => {} } = this.props;
+
     const closable = typeof onClose === 'function';
 
     const handleSubmit = (e) => {
@@ -22,6 +29,7 @@ export default function Search({ value, onChange, onClose, open = false, onSubmi
           onChange={(e) => { onChange(e.target.value); }}
           className="search__field"
           placeholder="What are you looking for?"
+          ref={(input) => { this.input = input; }}
         />
         <span className={classNames('search__button', { 'is-open': open })}>
           <button type="submit" className="button">
@@ -38,4 +46,7 @@ export default function Search({ value, onChange, onClose, open = false, onSubmi
         }
       </form>
     );
+  }
 }
+
+export default Search;

js/reducer.js

@@ -2,6 +2,7 @@ import { NAVIGATE } from './actions';
 
 const initialState = {
   pageName: 'index',
+  pageState: {},
   items: [],
   releases: [],
 };
@@ -12,6 +13,7 @@ const appReducer = (state = initialState, action = {}) => {
       return {
         ...state,
         pageName: action.pageName,
+        pageState: action.pageState,
       }
       break;
     default:

js/server.js

@@ -10,7 +10,8 @@ export const renderPage = (radar, pageName) => {
   // Create a new Redux store instance
   const store = createStore(appReducer, {
     ...radar,
-    pageName
+    pageName,
+    pageState: {},
   });
 
   // Render the component to a string