Merge pull request #98 from crowi/feature-search-hash

Feature search hash

lib/views/page_list.html

@@ -15,6 +15,7 @@
     {% endif %}
     <h1 class="title">
       <span class="" id="revision-path">{{ path|insertSpaceToEachSlashes }}</span>
+      {#
       {% if searchConfigured() && path != '/' %}
       <div class="form-group form-group-sm has-feedback search-input-group" data-toggle="tooltip" data-placement="bottom" title="{{ path }} 以下から検索">
         <label class="control-label sr-only" for="inputSuccess5">Search</label>
@@ -24,6 +25,7 @@
         <i class="form-control-feedback search-listpage-icon fa fa-search"></i>
       </div>
       {% endif %}
+      #}
     </h1>
   </header>
 </div>

resource/css/_search.scss

@@ -70,6 +70,8 @@
   }
 
   .search-result-content {
+    padding-bottom: 32px;
+
     .search-result-meta {
       margin-bottom: 16px;
       font-weight: bold;

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

@@ -13,6 +13,7 @@ export default class SearchPage extends React.Component {
     this.state = {
       location: location,
       searchingKeyword: this.props.query.q || '',
+      searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
       searchError: null,
@@ -23,9 +24,9 @@ export default class SearchPage extends React.Component {
   }
 
   componentDidMount() {
-    if (this.state.searchingKeyword !== '')  {
-      this.search({keyword: this.state.searchingKeyword});
-      this.setState({searchedKeyword: this.state.keyword});
+    const keyword = this.state.searchingKeyword;
+    if (keyword !== '')  {
+      this.search({keyword});
     }
   }
 
@@ -41,13 +42,14 @@ 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 || this.state.searchedKeyword !== '') {
+        hash = '';
     }
     if (window.history && window.history.pushState){
-      history.pushState('', '', `/_search?q=${keyword}`);
+      window.history.pushState('', `Search - ${keyword}`, `/_search?q=${keyword}${hash}`);
     }
   }
 
@@ -69,14 +71,16 @@ export default class SearchPage extends React.Component {
     axios.get('/_api/search', {params: {q: keyword}})
     .then((res) => {
       if (res.data.ok) {
+        this.changeURL(keyword);
+
         this.setState({
-          searchingKeyword: keyword,
+          searchedKeyword: keyword,
           searchedPages: res.data.data,
           searchResultMeta: res.data.meta,
         });
       }
 
-      this.changeURL(keyword);
+
       // 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>

webpack.config.js

@@ -33,7 +33,7 @@ var config = {
   plugins: []
 };
 
-if (process.env && process.env.NODE_ENV == 'production') {
+if (process.env && process.env.NODE_ENV !== 'development') {
   config.plugins = [
     new webpack.DefinePlugin({
       'process.env':{