Searching

resource/css/_search.scss

@@ -36,6 +36,10 @@
   box-shadow: 0 0 1px rgba(0,0,0,.3);
   padding: 16px;
 
+
+  .searching {
+    color: #666;
+  }
 }
 
 

resource/js/components/Header/SearchBox.js

@@ -15,6 +15,7 @@ export default class SearchBox extends React.Component {
       searchingKeyword: '',
       searchedPages: [],
       searchError: null,
+      searching: false,
     }
 
     this.search = this.search.bind(this);
@@ -33,6 +34,7 @@ export default class SearchBox extends React.Component {
 
     this.setState({
       searchingKeyword: keyword,
+      searching: true,
     });
 
     axios.get('/_api/search', {params: {q: keyword}})
@@ -41,12 +43,17 @@ export default class SearchBox extends React.Component {
         this.setState({
           searchingKeyword: keyword,
           searchedPages: res.data.data,
+          searching: false,
         });
       }
       // TODO error
     })
     .catch((res) => {
       // TODO error
+      this.setState({
+        searchError: res,
+        searching: false,
+      });
     });
   }
 
@@ -57,6 +64,8 @@ export default class SearchBox extends React.Component {
         <SearchSuggest
           searchingKeyword={this.state.searchingKeyword}
           searchedPages={this.state.searchedPages}
+          searchError={this.state.searchError}
+          searching={this.state.searching}
           />
       </div>
     );

resource/js/components/Header/SearchSuggest.js

@@ -5,6 +5,14 @@ import ListView from '../PageList/ListView';
 export default class SearchSuggest extends React.Component {
 
   render() {
+    if (this.props.searching) {
+      return (
+        <div className="search-suggest" id="search-suggest">
+          <i className="searcing fa fa-circle-o-notch fa-spin fa-fw"></i> Searching ...
+        </div>
+      );
+    }
+
     if (this.props.searchedPages.length < 1) {
       if (this.props.searchingKeyword !== '') {
         return (
@@ -28,9 +36,12 @@ export default class SearchSuggest extends React.Component {
 SearchSuggest.propTypes = {
   searchedPages: React.PropTypes.array.isRequired,
   searchingKeyword: React.PropTypes.string.isRequired,
+  searching: React.PropTypes.bool.isRequired,
 };
 
 SearchSuggest.defaultProps = {
   searchedPages: [],
   searchingKeyword: '',
+  searchError: null,
+  searching: false,
 };

resource/js/components/Search/SearchPage.js

@@ -34,7 +34,7 @@ export default class SearchPage extends React.Component {
 
     search.replace(/^\?/, '').split('&').forEach(function(element) {
       let queryParts = element.split('=');
-      query[queryParts[0]] = queryParts[1];
+      query[queryParts[0]] = decodeURIComponent(queryParts[1]).replace(/\+/g, ' ');
     });
 
     console.log(query);