Handle on no results

Author: sotarok

resource/js/components/Header/SearchBox.js

@@ -24,17 +24,23 @@ export default class SearchBox extends React.Component {
     const keyword = data.keyword;
     if (keyword === '') {
       this.setState({
+        searchingKeyword: '',
         searchedPages: [],
       });
 
       return true;
     }
 
+    this.setState({
+      searchingKeyword: keyword,
+    });
+
     axios.get('/_api/search', {params: {q: keyword}})
     .then((res) => {
       if (res.data.ok) {
         this.setState({
-          searchedPages: res.data.data
+          searchingKeyword: keyword,
+          searchedPages: res.data.data,
         });
       }
       // TODO error
@@ -48,7 +54,10 @@ export default class SearchBox extends React.Component {
     return (
       <div className="search-box">
         <SearchForm onSearchFormChanged={this.search} />
-        <SearchSuggest searchedPages={this.state.searchedPages} />
+        <SearchSuggest
+          searchingKeyword={this.state.searchingKeyword}
+          searchedPages={this.state.searchedPages}
+          />
       </div>
     );
   }

resource/js/components/Header/SearchSuggest.js

@@ -6,6 +6,13 @@ export default class SearchSuggest extends React.Component {
 
   render() {
     if (this.props.searchedPages.length < 1) {
+      if (this.props.searchingKeyword !== '') {
+        return (
+          <div className="search-suggest" id="search-suggest">
+            No results for "{this.props.searchingKeyword}".
+          </div>
+        );
+      }
       return <div></div>;
     }
 
@@ -20,8 +27,10 @@ export default class SearchSuggest extends React.Component {
 
 SearchSuggest.propTypes = {
   searchedPages: React.PropTypes.array.isRequired,
+  searchingKeyword: React.PropTypes.string.isRequired,
 };
 
 SearchSuggest.defaultProps = {
   searchedPages: [],
+  searchingKeyword: '',
 };