Finish search from header

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) {
-    super(...args);
+  constructor(props, ...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,41 +1,52 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }) {
-  const closable = typeof onClose === 'function';
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
-  const handleClose = (e) => {
-    e.preventDefault();
-    onClose();
+class Search extends React.Component {
+  focus() {
+    this.input.focus();
   }
 
-  return (
-    <form className={classNames('search', { 'search--closable': closable })} onSubmit={handleSubmit}>
-      <input
-        value={value}
-        type="text"
-        onChange={(e) => { onChange(e.target.value); }}
-        className="search__field"
-        placeholder="What are you looking for?"
-      />
-      <span className={classNames('search__button', { 'is-open': open })}>
-        <button type="submit" className="button">
-          <span className="icon icon--search button__icon" />
-          Search
-        </button>
-      </span>
-      {
-        closable && (
-          <a href="#" className={classNames('search__close', { 'is-open': open })} onClick={handleClose}>
-            <span className="icon icon--close" />
-          </a>
-        )
-      }
-    </form>
-  );
+  render() {
+    const { value, onChange, onClose, open = false, onSubmit = () => {} } = this.props;
+
+    const closable = typeof onClose === 'function';
+
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      onSubmit();
+    };
+
+    const handleClose = (e) => {
+      e.preventDefault();
+      onClose();
+    }
+
+    return (
+      <form className={classNames('search', { 'search--closable': closable })} onSubmit={handleSubmit}>
+        <input
+          value={value}
+          type="text"
+          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">
+            <span className="icon icon--search button__icon" />
+            Search
+          </button>
+        </span>
+        {
+          closable && (
+            <a href="#" className={classNames('search__close', { 'is-open': open })} onClick={handleClose}>
+              <span className="icon icon--close" />
+            </a>
+          )
+        }
+      </form>
+    );
+  }
 }
+
+export default Search;