fix search when change repoID (#6338)

* fix search when change repoID

* change function name

frontend/src/components/search/ai-search.js

@@ -30,7 +30,6 @@ export default class AISearch extends Component {
     path: PropTypes.string,
     placeholder: PropTypes.string,
     onSearchedClick: PropTypes.func.isRequired,
-    repoName: PropTypes.string,
     currentRepoInfo: PropTypes.object,
     isViewFile: PropTypes.bool,
     isLibView: PropTypes.bool,
@@ -64,22 +63,10 @@ export default class AISearch extends Component {
     this.inputRef = React.createRef();
     this.searchContainer = React.createRef();
     this.searchResultListRef = React.createRef();
+    this.searchResultListContainerRef = React.createRef();
     this.indexStateTimer = null;
     this.isChineseInput = false;
-    if (props.isLibView && props.currentRepoInfo) {
-      this.isRepoOwner = props.currentRepoInfo.owner_email === username;
-      this.isAdmin = props.currentRepoInfo.is_admin;
-    } else {
-      this.isRepoOwner = false;
-      this.isAdmin = false;
-    }
-    this.searchResultListContainerRef = React.createRef();
-    const { repoID } = props;
-    let storeKey = 'sfVisitedAISearchItems';
-    if (repoID) {
-      storeKey += repoID;
-    }
-    this.storeKey = storeKey;
+    this.calculateStoreKey(props);
   }
 
   componentDidMount() {
@@ -88,12 +75,45 @@ export default class AISearch extends Component {
     document.addEventListener('compositionend', this.onCompositionEnd);
     document.addEventListener('click', this.handleOutsideClick);
     if (this.props.isLibView) {
-      this.queryLibraryIndexState();
+      this.queryLibraryIndexState(this.props.repoID);
     }
   }
 
-  queryLibraryIndexState() {
-    seafileAPI.queryLibraryIndexState(this.props.repoID).then(res => {
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.calculateStoreKey(nextProps);
+    if (nextProps.isLibView) {
+      if (this.props.repoID !== nextProps.repoID) {
+        this.queryLibraryIndexState(nextProps.repoID);
+      }
+    } else {
+      if (this.indexStateTimer) {
+        clearInterval(this.indexStateTimer);
+        this.indexStateTimer = null;
+      }
+      this.isChineseInput = false;
+      this.setState({
+        indexState: '',
+      });
+    }
+  }
+
+  calculateStoreKey = (props) => {
+    if (props.isLibView && props.currentRepoInfo) {
+      this.isRepoOwner = props.currentRepoInfo.owner_email === username;
+      this.isAdmin = props.currentRepoInfo.is_admin;
+    } else {
+      this.isRepoOwner = false;
+      this.isAdmin = false;
+    }
+    let storeKey = 'sfVisitedAISearchItems';
+    if (props.repoID) {
+      storeKey += props.repoID;
+    }
+    this.storeKey = storeKey;
+  };
+
+  queryLibraryIndexState(repoID) {
+    seafileAPI.queryLibraryIndexState(repoID).then(res => {
       const { state: indexState, task_id: taskId } = res.data;
       this.setState({ indexState }, () => {
         if (indexState === INDEX_STATE.RUNNING) {

frontend/src/components/search/search.js

@@ -58,12 +58,7 @@ class Search extends Component {
     this.searchResultListRef = React.createRef();
     this.isChineseInput = false;
     this.searchResultListContainerRef = React.createRef();
-    const { repoID } = props;
-    let storeKey = 'sfVisitedSearchItems';
-    if (repoID) {
-      storeKey += repoID;
-    }
-    this.storeKey = storeKey;
+    this.calculateStoreKey(props);
   }
 
   componentDidMount() {
@@ -72,6 +67,11 @@ class Search extends Component {
     document.addEventListener('compositionend', this.onCompositionEnd);
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.calculateStoreKey(nextProps);
+    this.isChineseInput = false;
+  }
+
   componentWillUnmount() {
     document.removeEventListener('keydown', this.onDocumentKeydown);
     document.removeEventListener('compositionstart', this.onCompositionStart);
@@ -79,6 +79,15 @@ class Search extends Component {
     this.isChineseInput = false;
   }
 
+  calculateStoreKey = (props) => {
+    const { repoID } = props;
+    let storeKey = 'sfVisitedSearchItems';
+    if (repoID) {
+      storeKey += repoID;
+    }
+    this.storeKey = storeKey;
+  };
+
   onCompositionStart = () => {
     this.isChineseInput = true;
   };

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

@@ -32,6 +32,7 @@ class CommonToolbar extends React.Component {
       isLibView: props.isLibView,
       path: props.path,
       isViewFile: props.isViewFile,
+      currentRepoInfo: props.currentRepoInfo,
     };
   }
 
@@ -45,12 +46,12 @@ class CommonToolbar extends React.Component {
     this.unsubscribeLibChange && this.unsubscribeLibChange();
   }
 
-  onRepoChange = ({ repoID, repoName, isLibView, path, isViewFile }) => {
-    this.setState({ repoID, repoName, isLibView, path, isViewFile });
+  onRepoChange = ({ repoID, repoName, isLibView, path, isViewFile, currentRepoInfo }) => {
+    this.setState({ repoID, repoName, isLibView, path, isViewFile, currentRepoInfo });
   };
 
   renderSearch = () => {
-    const { repoID, repoName, isLibView, path, isViewFile } = this.state;
+    const { repoID, repoName, isLibView, path, isViewFile, currentRepoInfo } = this.state;
     const { searchPlaceholder } = this.props;
     const placeholder = searchPlaceholder || gettext('Search files');
 
@@ -62,9 +63,8 @@ class CommonToolbar extends React.Component {
             path={path}
             isViewFile={isViewFile}
             placeholder={placeholder}
+            currentRepoInfo={currentRepoInfo}
             onSearchedClick={this.props.onSearchedClick}
-            repoName={repoName}
-            currentRepoInfo={this.props.currentRepoInfo}
             isLibView={isLibView}
           />
         );