Finish search from header

PaperCutSoftware · Mar 21, 2017 · ad2b0e3 · ad2b0e3
1 parent fd029da
commit ad2b0e3
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 42 deletions.
diff --git a/js/actions.js b/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,
     };
   },

diff --git a/js/components/App.js b/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);
diff --git a/js/components/Header.js b/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);
diff --git a/js/components/PageOverview.js b/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();
 

diff --git a/js/components/Search.js b/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';
+class Search extends React.Component {
+  focus() {
+    this.input.focus();
+  }
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit();
-  };
+  render() {
+    const { value, onChange, onClose, open = false, onSubmit = () => {} } = this.props;
 
-  const handleClose = (e) => {
-    e.preventDefault();
-    onClose();
-  }
+    const closable = typeof onClose === 'function';
+
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      onSubmit();
+    };
 
-  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>
-  );
+    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;
diff --git a/js/reducer.js b/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:

diff --git a/js/server.js b/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