Relocate file structure

resource/js/app.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import SearchBox  from './components/Header/SearchBox';
-import SearchPage  from './components/Search/SearchPage';
+import HeaderSearchBox  from './components/HeaderSearchBox';
+import SearchPage  from './components/SearchPage';
 
 /*
 class Crowi extends React.Component {
@@ -21,7 +21,7 @@ class Crowi extends React.Component {
 */
 
 var componentMappings = {
-  'search-top': <SearchBox />,
+  'search-top': <HeaderSearchBox />,
   'search-page': <SearchPage />,
 };
 

resource/js/components/Header/SearchBox.js → resource/js/components/HeaderSearchBox.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import SearchForm from './SearchForm';
-import SearchSuggest from './SearchSuggest';
+import SearchForm from './HeaderSearchBox/SearchForm';
+import SearchSuggest from './HeaderSearchBox/SearchSuggest';
 import axios from 'axios'
 
 export default class SearchBox extends React.Component {
@@ -20,9 +20,11 @@ export default class SearchBox extends React.Component {
     }
 
     this.search = this.search.bind(this);
+    this.isShown = this.isShown.bind(this);
   }
 
-  focusToggle(focused) {
+  isShown(focused) {
+    this.setState({focused: !!focused});
   }
 
   search(data) {
@@ -48,6 +50,12 @@ export default class SearchBox extends React.Component {
           searchingKeyword: keyword,
           searchedPages: res.data.data,
           searching: false,
+          searchError: null,
+        });
+      } else {
+        this.setState({
+          searchError: res,
+          searching: false,
         });
       }
       // TODO error
@@ -63,7 +71,10 @@ export default class SearchBox extends React.Component {
   render() {
     return (
       <div className="search-box">
-        <SearchForm onSearchFormChanged={this.search} />
+        <SearchForm
+          onSearchFormChanged={this.search}
+          isShown={this.isShown}
+          />
         <SearchSuggest
           searchingKeyword={this.state.searchingKeyword}
           searchedPages={this.state.searchedPages}

resource/js/components/Header/SearchForm.js → resource/js/components/HeaderSearchBox/SearchForm.js

@@ -12,6 +12,8 @@ export default class SearchForm extends React.Component {
     };
 
     this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
     this.ticker = null;
   }
 
@@ -34,6 +36,14 @@ export default class SearchForm extends React.Component {
     this.search();
   }
 
+  handleFocus(event) {
+    this.props.isShown(true);
+  }
+
+  handleBlur(event) {
+    //this.props.isShown(false);
+  }
+
   handleChange(event) {
     const keyword = event.target.value;
     this.setState({keyword});
@@ -52,6 +62,8 @@ export default class SearchForm extends React.Component {
           placeholder="Search ..."
           name="q"
           value={this.state.keyword}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
           onChange={this.handleChange}
         />
         <span className="input-group-btn">
@@ -66,6 +78,7 @@ export default class SearchForm extends React.Component {
 
 SearchForm.propTypes = {
   onSearchFormChanged: React.PropTypes.func.isRequired,
+  isShown: React.PropTypes.func.isRequired,
   pollInterval: React.PropTypes.number,
 };
 SearchForm.defaultProps = {

resource/js/components/Header/SearchSuggest.js → resource/js/components/HeaderSearchBox/SearchSuggest.js

@@ -17,6 +17,14 @@ export default class SearchSuggest extends React.Component {
       );
     }
 
+    if (this.props.searchError !== null) {
+      return (
+        <div className="search-suggest" id="search-suggest">
+          <i className="searcing fa fa-warning"></i> Error on searching.
+        </div>
+      );
+    }
+
     if (this.props.searchedPages.length < 1) {
       if (this.props.searchingKeyword !== '') {
         return (

resource/js/components/Search/SearchPage.js → resource/js/components/SearchPage.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import SearchForm from './SearchForm';
-import SearchResult from './SearchResult';
+import SearchForm from './SearchPage/SearchForm';
+import SearchResult from './SearchPage/SearchResult';
 import axios from 'axios'
 
 export default class SearchPage extends React.Component {