Optimized search module (#2397)

* updating fileRecord api and adding more component

* modify search module

* add translate

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reach/router": "^1.1.1",
+    "@reach/router": "^1.2.0",
     "@seafile/seafile-editor": "^0.1.20",
     "autoprefixer": "7.1.6",
     "chalk": "1.1.3",
@@ -45,7 +45,7 @@
     "remark-parse": "^5.0.0",
     "remark-rehype": "^3.0.0",
     "remark-slug": "^5.0.0",
-    "seafile-js": "^0.2.15",
+    "seafile-js": "^0.2.18",
     "seafile-ui": "^0.1.10",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^6.1.6",

frontend/src/components/more.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from './constants';
+
+const propTypes = {
+  onShowMore: PropTypes.func.isRequired
+};
+
+class More extends React.Component {
+
+  render() {
+    return (
+      <li className="list-show-more" onClick={this.props.onShowMore}>
+        <span className="more-message">{gettext('show more')}</span>
+      </li>
+    )
+  }
+}
+
+More.propTypes = propTypes;
+
+export default More;

frontend/src/components/search/search.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { gettext, repoID } from '../constants';
+import { gettext, repoID, serviceUrl } from '../constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
+import More from '../more';
 
 class Search extends Component {
 
@@ -155,6 +156,22 @@ class Search extends Component {
     })
   }
 
+  onShowMore = () => {
+    let newValue = this.state.value;
+    let queryData = {
+      q: newValue,
+      search_repo: repoID ? repoID : 'all',
+      search_ftypes: repoID ? 'custom' : 'all',
+      ftype: repoID ? 'Markdown' : '',
+      input_fexts: repoID ? 'md' : ''
+    };
+    let params = '';
+    for (let key in queryData) {
+      params += key + '=' + queryData[key] + '&';
+    }
+    window.location = serviceUrl + '/search/?' + params.slice(0, params.length - 1);
+  }
+
   renderSearchResult() {
     var _this = this;
     if (!this.state.isResultShow) {
@@ -170,6 +187,7 @@ class Search extends Component {
         <div className="search-result-none">No results matching.</div>
       )
     }
+    let isShowMore = this.state.resultItems.length >= 5 ? true : false;
     return (
       <ul className="search-result-list">
         {this.state.resultItems.map(item => {
@@ -181,6 +199,7 @@ class Search extends Component {
             />
           )
         })}
+        {isShowMore && <More onShowMore={this.onShowMore}/>}
       </ul>
     )
   }

frontend/src/css/common.css

@@ -148,3 +148,22 @@
   text-align: center;
 }
 /* end tip */
+
+/* begin more component */
+.list-show-more {
+  padding: 0.25rem 0.75rem;
+  line-height: 2rem;
+  text-align: center;
+  color: #eb8205;
+  cursor: pointer;
+}
+.list-show-more:hover {
+  background-color: #eee;
+}
+
+.list-show-more .more-message {
+  font-size: 0.875rem;
+  color: #888;
+  text-decoration: underline;
+}
+/* end more component */

frontend/src/css/search.css

@@ -47,12 +47,10 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  margin-bottom: 0.5rem;
 }
 
 .search-result-container .search-result-item {
-  padding: 0 0.75rem;
-  margin-top: 0.5rem;
+  padding: 0.25rem 0.75rem;
   border-left: 2px solid #fff;
   cursor: pointer;
   font-size: 0.8125rem;

frontend/src/pages/file-history/side-panel.js

@@ -31,7 +31,7 @@ class SidePanel extends React.Component {
   }
 
   componentDidMount() {
-    editUtilties.getFileHistoryRecord(filePath, 1, PER_PAGE).then(res => {
+    editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       this.initResultState(res.data);
       document.addEventListener('click', this.onHideContextMenu);
     });
@@ -42,7 +42,7 @@ class SidePanel extends React.Component {
   }
   
   refershFileList() {
-    editUtilties.getFileHistoryRecord(filePath, 1, PER_PAGE).then(res => {
+    editUtilties.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       this.initResultState(res.data);
     });
   }
@@ -100,7 +100,7 @@ class SidePanel extends React.Component {
         currentPage: currentPage,
         isReloadingData: true,
       });
-      editUtilties.getFileHistoryRecord(filePath, currentPage, PER_PAGE).then(res => {
+      editUtilties.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
         this.updateResultState(res.data);
         this.setState({
           isReloadingData: false

frontend/src/utils/editor-utilties.js

@@ -85,8 +85,8 @@ class EditorUtilities {
     return seafileAPI.getFileContent(filePath);
   }
 
-  getFileHistoryRecord(filePath, page, per_page) {
-    return seafileAPI.getFileHistoryRecord(historyRepoID, filePath, page, per_page);
+  listFileHistoryRecords(filePath, page, per_page) {
+    return seafileAPI.listFileHistoryRecords(historyRepoID, filePath, page, per_page);
   }
   
   revertFile(filePath, commitID) {