Handle page hash

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/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});
     }
   }
 
@@ -44,7 +45,7 @@ export default class SearchPage extends React.Component {
   changeURL(keyword, refreshHash) {
     let hash = location.hash || '';
     // TODO 整理する
-    if (refreshHash) {
+    if (refreshHash || this.state.searchedKeyword !== '') {
         hash = '';
     }
     if (window.history && window.history.pushState){
@@ -54,7 +55,6 @@ export default class SearchPage extends React.Component {
 
   search(data) {
     const keyword = data.keyword;
-    const lastSearchedKeyword = this.state.searhingKeyword;
     if (keyword === '') {
       this.setState({
         searchingKeyword: '',
@@ -71,16 +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,
         });
       }
 
 
-      // if lastSearchedKeyword is empty, refresh hash
-      this.changeURL(keyword, lastSearchedKeyword !== undefined);
       // TODO error
     })
     .catch((res) => {