Fix search folder bug (#6346)

* 01 remove useless toolbar

* 02 change search result is dir

frontend/src/components/common/event-bus-type.js

@@ -38,4 +38,5 @@ export const EVENT_BUS_TYPE = {
 
   // library
   CURRENT_LIBRARY_CHANGED: 'current_library_changed',
+  SEARCH_LIBRARY_CONTENT: 'search_library_content',
 };

frontend/src/components/toolbar/common-toolbar.js

@@ -50,6 +50,15 @@ class CommonToolbar extends React.Component {
     this.setState({ repoID, repoName, isLibView, path, isViewFile, currentRepoInfo });
   };
 
+  onSearchedClick = (searchedItem) => {
+    // If search result is current library, use libContentView.onSearchedClick; else use app.onSearchedClick
+    if (this.state.isLibView && this.state.repoID === searchedItem.repo_id) {
+      this.props.eventBus.dispatch(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, searchedItem);
+    } else {
+      this.props.onSearchedClick(searchedItem);
+    }
+  };
+
   renderSearch = () => {
     const { repoID, repoName, isLibView, path, isViewFile, currentRepoInfo } = this.state;
     const { searchPlaceholder } = this.props;
@@ -64,7 +73,7 @@ class CommonToolbar extends React.Component {
             isViewFile={isViewFile}
             placeholder={placeholder}
             currentRepoInfo={currentRepoInfo}
-            onSearchedClick={this.props.onSearchedClick}
+            onSearchedClick={this.onSearchedClick}
             isLibView={isLibView}
           />
         );
@@ -73,7 +82,7 @@ class CommonToolbar extends React.Component {
           <Search
             repoID={repoID}
             placeholder={placeholder}
-            onSearchedClick={this.props.onSearchedClick}
+            onSearchedClick={this.onSearchedClick}
             isViewFile={isViewFile}
             isPublic={false}
             path={path}

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -1,40 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-
-const propTypes = {
-  onSideNavMenuClick: PropTypes.func.isRequired,
-  repoID: PropTypes.string.isRequired,
-  repoName: PropTypes.string.isRequired,
-  onSearchedClick: PropTypes.func.isRequired,
-  currentRepoInfo: PropTypes.object,
-  path: PropTypes.string,
-  isViewFile: PropTypes.bool,
-};
-
-class LibContentToolbar extends React.Component {
-
-  render() {
-    return (
-      <Fragment>
-        <div className="cur-view-toolbar">
-          <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
-        </div>
-        <CommonToolbar
-          isLibView={true}
-          path={this.props.path}
-          isViewFile={this.props.isViewFile}
-          repoID={this.props.repoID}
-          repoName={this.props.repoName}
-          currentRepoInfo={this.props.currentRepoInfo}
-          onSearchedClick={this.props.onSearchedClick}
-        />
-      </Fragment>
-    );
-  }
-}
-
-LibContentToolbar.propTypes = propTypes;
-
-export default LibContentToolbar;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -129,9 +129,20 @@ class LibContentView extends React.Component {
     }
   }
 
-  async componentDidMount() {
+  componentDidMount() {
+    this.calculatePara(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.repoID !== this.props.repoID) {
+      this.calculatePara(nextProps);
+    }
+  }
+
+  calculatePara = async(props) => {
+    const { repoID, eventBus } = props;
+    this.unsubscribeEvent = eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
     // eg: http://127.0.0.1:8000/library/repo_id/repo_name/**/**/\
-    let repoID = this.props.repoID;
     let location = window.location.href.split('?')[0]; // '?': to remove the effect of '?notifications=all', which is added to the URL when the 'view all notifications' dialog is open.
     location = decodeURIComponent(location);
     let path = location.slice(location.indexOf(repoID) + repoID.length + 1); // get the string after repoID
@@ -196,11 +207,12 @@ class LibContentView extends React.Component {
         });
       }
     }
-  }
+  };
 
   componentWillUnmount() {
     window.onpopstate = this.oldonpopstate;
     collabServer.unwatchRepo(this.props.repoID, this.onRepoUpdateEvent);
+    this.unsubscribeEvent();
     this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
       repoID: '',
       repoName: '',