['search' page] bugfix for 'total', 'prev/next' & etc.

frontend/src/pages/search/main-panel.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import SearchResults from './search-results';
@@ -52,17 +51,19 @@ class SearchViewPanel extends React.Component {
     });
     const stateHistory = _.cloneDeep(this.state);
     seafileAPI.searchFiles(params, null).then(res => {
+      const { results, has_more, total } = res.data;
       this.setState({
         isLoading: false,
         isResultGot: true,
-        resultItems: res.data.results,
+        resultItems: results,
-        hasMore: res.data.has_more,
+        hasMore: has_more,
+        total: total,
         page: params.page,
         isShowSearchFilter: true,
       });
       this.stateHistory = stateHistory;
-      this.stateHistory.resultItems = res.data.results;
+      this.stateHistory.resultItems = results;
-      this.stateHistory.hasMore = res.data.has_more;
+      this.stateHistory.hasMore = has_more;
       this.stateHistory.page = params.page;
     }).catch((error) => {
       this.setState({ isLoading: false });
@@ -145,7 +146,8 @@ class SearchViewPanel extends React.Component {
     });
   }
 
-  handlePrevious = () => {
+  handlePrevious = (e) => {
+    e.preventDefault();
     if (this.stateHistory && this.state.page > 1) {
       this.setState(this.stateHistory,() => {
         const params = this.handleSearchParams(this.state.page - 1);
@@ -156,7 +158,8 @@ class SearchViewPanel extends React.Component {
     }
   };
 
-  handleNext = () => {
+  handleNext = (e) => {
+    e.preventDefault();
     if (this.stateHistory && this.state.hasMore) {
       this.setState(this.stateHistory,() => {
         const params = this.handleSearchParams(this.state.page + 1);
@@ -321,12 +324,17 @@ class SearchViewPanel extends React.Component {
           />
         </div>
         {this.state.isLoading && <Loading/>}
-        {(!this.state.isLoading && this.state.isResultGot) && <SearchResults resultItems={this.state.resultItems}/>}
+        {(!this.state.isLoading && this.state.isResultGot) &&
+        <SearchResults
+          resultItems={this.state.resultItems}
+          total={this.state.total}
+        />
+        }
         {(!this.state.isLoading && this.state.isResultGot) &&
           <div className="paginator">
-            {this.state.page !== 1 && <a href="#" onClick={() => this.handlePrevious()}>{gettext('Previous')}</a>}
+            {this.state.page !== 1 && <a href="#" onClick={this.handlePrevious}>{gettext('Previous')}</a>}
             {(this.state.page !== 1 && this.state.hasMore) && <span> | </span>}
-            {this.state.hasMore && <a href="#" onClick={() => this.handleNext()}>{gettext('Next')}</a>}
+            {this.state.hasMore && <a href="#" onClick={this.handleNext}>{gettext('Next')}</a>}
           </div>
         }
       </div>

frontend/src/pages/search/search-results.js

@@ -39,10 +39,10 @@ class ResultsItem extends React.Component {
         <img className={linkContent ? 'item-img' : 'lib-item-img'} src={fileIconUrl} alt=""/>
         <div className="item-content">
           <div className="item-name ellipsis">
-            <a href={this.handlerFileURL(item)} target="_blank" title={item.name}>{item.name}</a>
+            <a href={this.handlerFileURL(item)} target="_blank" title={item.name} rel="noreferrer">{item.name}</a>
           </div>
           <div className="item-link ellipsis">
-            <a href={this.handlerParentDirURL(item)} target="_blank" >{item.repo_name}{this.handlerParentDirPath(item)}</a>
+            <a href={this.handlerParentDirURL(item)} target="_blank" rel="noreferrer" >{item.repo_name}{this.handlerParentDirPath(item)}</a>
           </div>
           <div className="item-link ellipsis">
             {Utils.bytesToSize(item.size) + ' ' + moment(item.last_modified * 1000).format('YYYY-MM-DD')}
@@ -67,12 +67,11 @@ class SearchResults extends React.Component {
   }
 
   render() {
-    const { resultItems } = this.props;
+    const { resultItems, total } = this.props;
-    const total = resultItems.length;
     return (
       <div className="search-result-container position-static">
+        <p className="tip">{total > 0 ? (total + ' ' + (total === 1 ? gettext('result') : gettext('results'))) : gettext('No result')}</p>
         <ul className="search-result-list">
-          <p className="tip">{total > 0 ? (total + ' ' + (total === 1 ? gettext('result') : gettext('results'))) : gettext('No result')}</p>
           {resultItems.map((item, index) => {
             return <ResultsItem key={index} item={item}/>;
           })}
@@ -84,6 +83,7 @@ class SearchResults extends React.Component {
 
 const searchResultsPropTypes = {
   resultItems: PropTypes.array.isRequired,
+  total: PropTypes.number.isRequired
 };
 
 SearchResults.propTypes = searchResultsPropTypes;