Change hash handling

resource/js/app.js

@@ -5,30 +5,16 @@ import HeaderSearchBox  from './components/HeaderSearchBox';
 import SearchPage  from './components/SearchPage';
 //import ListPageSearch  from './components/ListPageSearch';
 
-/*
-class Crowi extends React.Component {
-  constructor(props) {
-    super(props);
-    //this.state = {count: props.initialCount};
-    //this.tick = this.tick.bind(this);
-  }
-
-  render() {
-    return (
-      <h1>Hello</h1>
-    );
-  }
-}
-*/
-
-var componentMappings = {
+const componentMappings = {
   'search-top': <HeaderSearchBox />,
   'search-page': <SearchPage />,
 };
 
 Object.keys(componentMappings).forEach((key) => {
-  var elem = document.getElementById(key);
+  const elem = document.getElementById(key);
   if (elem) {
     ReactDOM.render(componentMappings[key], elem);
   }
 });
+
+

resource/js/components/SearchPage.js

@@ -41,18 +41,20 @@ export default class SearchPage extends React.Component {
     return query;
   }
 
-  changeURL(keyword) {
+  changeURL(keyword, refreshHash) {
+    let hash = location.hash || '';
     // TODO 整理する
-    if (location && location.hash) {
-      location.hash = '';
+    if (refreshHash) {
+        hash = '';
     }
     if (window.history && window.history.pushState){
-      history.pushState('', '', `/_search?q=${keyword}`);
+      window.history.pushState('', `Search - ${keyword}`, `/_search?q=${keyword}${hash}`);
     }
   }
 
   search(data) {
     const keyword = data.keyword;
+    const lastSearchedKeyword = this.state.searhingKeyword;
     if (keyword === '') {
       this.setState({
         searchingKeyword: '',
@@ -76,7 +78,9 @@ export default class SearchPage extends React.Component {
         });
       }
 
-      this.changeURL(keyword);
+
+      // if lastSearchedKeyword is empty, refresh hash
+      this.changeURL(keyword, lastSearchedKeyword !== undefined);
       // TODO error
     })
     .catch((res) => {

resource/js/components/SearchPage/SearchResult.js

@@ -34,7 +34,7 @@ export default class SearchResult extends React.Component {
             </nav>
           </div>
           <div className="col-md-8 search-result-content" id="search-result-content">
-            <div className="search-result-meta">Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"</div>
+            <div className="search-result-meta"><i className="fa fa-lightbulb-o" /> Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"</div>
             <SearchResultList
               pages={this.props.pages}
               searchingKeyword={this.props.searchingKeyword}

resource/js/components/SearchPage/SearchResultList.js

@@ -25,8 +25,6 @@ export default class SearchResultList extends React.Component {
   render() {
     const resultList = this.props.pages.map((page) => {
       const pageBody = this.getHighlightBody(page.revision.body);
-      //console.log('resultList.page.path', page.path);
-      //console.log('resultList.pageBody', pageBody);
       return (
         <div id={page._id} key={page._id} className="search-result-page">
           <h2><a href={page.path}>{page.path}</a></h2>