fix create new folder (#7016)

* optimize code

* optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/dialog/move-dirent-dialog.js

@@ -6,11 +6,19 @@ import SelectDirentBody from './select-dirent-body';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Searcher from '../file-chooser/searcher';
-import { MODE_TYPE_MAP } from '../file-chooser/repo-list-wrapper';
 import { RepoInfo } from '../../models';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
 
+export const MODE_TYPE_MAP = {
+  CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
+  ONLY_CURRENT_LIBRARY: 'only_current_library',
+  ONLY_ALL_REPOS: 'only_all_repos',
+  ONLY_OTHER_LIBRARIES: 'only_other_libraries',
+  RECENTLY_USED: 'recently_used',
+  SEARCH_RESULTS: 'search_results',
+};
+
 const propTypes = {
   path: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
@@ -29,17 +37,53 @@ class MoveDirent extends React.Component {
     super(props);
     this.state = {
       mode: MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
-      repo: { repo_id: this.props.repoID },
+      currentRepo: { repo_id: this.props.repoID },
+      selectedRepo: { repo_id: this.props.repoID },
+      repoList: [],
       selectedPath: this.props.path,
-      selectedSearchedItem: null,
       selectedSearchedRepo: null,
+      selectedSearchedItem: { repoID: '', filePath: '' },
       searchStatus: '',
       searchResults: [],
       showSearchBar: false,
       errMessage: '',
+      initToShowChildren: false,
     };
+    this.lastMode = MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY;
   }
 
+  componentDidMount() {
+    seafileAPI.getRepoInfo(this.props.repoID).then(res => {
+      const repo = new RepoInfo(res.data);
+      this.setState({ currentRepo: repo });
+      this.fetchRepoList();
+    });
+  }
+
+  fetchRepoList = async () => {
+    try {
+      const res = await seafileAPI.listRepos();
+      const repos = res.data.repos;
+      const repoList = [];
+      const uniqueRepoIds = new Set();
+      for (const repo of repos) {
+        if (repo.permission === 'rw' && repo.repo_id !== this.props.repoID && !uniqueRepoIds.has(repo.repo_id)) {
+          uniqueRepoIds.add(repo.repo_id);
+          repoList.push(repo);
+        }
+      }
+      const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
+      const selectedRepo = sortedRepoList.find((repo) => repo.repo_id === this.props.repoID);
+      this.setState({
+        repoList: sortedRepoList,
+        repo: selectedRepo,
+      });
+    } catch (error) {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    }
+  };
+
   handleSubmit = () => {
     if (this.props.isMultipleOperation) {
       this.moveItems();
@@ -140,7 +184,11 @@ class MoveDirent extends React.Component {
   };
 
   selectRepo = (repo) => {
-    this.setState({ repo });
+    this.setState({ selectedRepo: repo });
+  };
+
+  selectSearchedRepo = (repo) => {
+    this.setState({ selectedSearchedRepo: repo });
   };
 
   setSelectedPath = (selectedPath) => {
@@ -151,30 +199,36 @@ class MoveDirent extends React.Component {
     this.setState({ errMessage: message });
   };
 
-  onUpdateMode = (mode) => {
+  updateMode = (mode) => {
     if (mode === this.state.mode) return;
 
+    if (mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
+      this.lastMode = mode;
+    }
+
+    const isShowChildren = mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY || mode === MODE_TYPE_MAP.SEARCH_RESULTS;
+    this.setState({
+      mode,
+      initToShowChildren: isShowChildren,
+    });
+
     if (this.state.mode === MODE_TYPE_MAP.SEARCH_RESULTS) {
       this.setState({
         selectedSearchedRepo: null,
-        selectedSearchedItem: null,
         searchResults: [],
         showSearchBar: false,
       });
     }
 
-    if (this.state.selectedSearchedRepo) {
+    if (this.state.selectedSearchedRepo && mode !== MODE_TYPE_MAP.SEARCH_RESULTS) {
       this.setState({
         selectedSearchedRepo: null,
-        selectedSearchedItem: null,
         searchResults: [],
         showSearchBar: false,
       });
     }
 
-    this.setState({
+    this.setState({ selectedSearchedItem: { repoID: '', filePath: '' } });
-      mode,
-    });
   };
 
   onUpdateSearchStatus = (status) => {
@@ -200,15 +254,14 @@ class MoveDirent extends React.Component {
   };
 
   onCloseSearchBar = () => {
-    const { selectedSearchedRepo } = this.state;
+    const mode = this.lastMode;
-    const mode = (!selectedSearchedRepo || selectedSearchedRepo.repo_id === this.props.repoID) ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
-
     this.setState({
       mode,
       searchStatus: '',
       searchResults: [],
       selectedSearchedRepo: null,
-      showSearchBar: false
+      showSearchBar: false,
+      initToShowChildren: mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY,
     });
   };
 
@@ -221,23 +274,19 @@ class MoveDirent extends React.Component {
   onSearchedItemDoubleClick = (item) => {
     if (item.type !== 'dir') return;
 
-    const selectedItemInfo = {
-      repoID: item.repo_id,
-      filePath: item.path,
-    };
-
-    this.setState({ selectedSearchedItem: selectedItemInfo });
-
     seafileAPI.getRepoInfo(item.repo_id).then(res => {
       const repoInfo = new RepoInfo(res.data);
       const path = item.path.substring(0, item.path.length - 1);
       const mode = item.repo_id === this.props.repoID ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
+      this.lastMode = mode;
       this.setState({
         mode,
-        searchResults: [],
+        selectedRepo: repoInfo,
         selectedSearchedRepo: repoInfo,
         selectedPath: path,
+        selectedSearchedItem: { repoID: item.repo_id, filePath: path },
         showSearchBar: mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES,
+        initToShowChildren: true,
       });
     }).catch(err => {
       const errMessage = Utils.getErrorMsg(err);
@@ -245,6 +294,10 @@ class MoveDirent extends React.Component {
     });
   };
 
+  selectSearchedItem = (item) => {
+    this.setState({ selectedSearchedItem: item });
+  };
+
   renderTitle = () => {
     const { dirent, isMultipleOperation } = this.props;
     let title = gettext('Move {placeholder} to');
@@ -257,8 +310,8 @@ class MoveDirent extends React.Component {
   };
 
   render() {
-    const { dirent, selectedDirentList, isMultipleOperation, path, repoID } = this.props;
+    const { dirent, selectedDirentList, isMultipleOperation, path } = this.props;
-    const { mode, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo, errMessage } = this.state;
+    const { mode, currentRepo, selectedRepo, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo } = this.state;
     const movedDirent = dirent || selectedDirentList[0];
     const { permission } = movedDirent;
     const { isCustomPermission } = Utils.getUserPermission(permission);
@@ -274,7 +327,7 @@ class MoveDirent extends React.Component {
           {isPro && (
             showSearchBar ? (
               <Searcher
-                onUpdateMode={this.onUpdateMode}
+                onUpdateMode={this.updateMode}
                 onUpdateSearchStatus={this.onUpdateSearchStatus}
                 onUpdateSearchResults={this.onUpdateSearchResults}
                 onClose={this.onCloseSearchBar}
@@ -293,24 +346,30 @@ class MoveDirent extends React.Component {
           )}
         </ModalHeader>
         <SelectDirentBody
-          path={path}
+          mode={mode}
+          currentRepo={currentRepo}
+          selectedRepo={selectedRepo}
+          currentPath={path}
+          repoList={this.state.repoList}
           selectedPath={selectedPath}
-          repoID={repoID}
           isSupportOtherLibraries={!isCustomPermission}
-          errMessage={errMessage}
           onCancel={this.toggle}
           selectRepo={this.selectRepo}
           setSelectedPath={this.setSelectedPath}
           setErrMessage={this.setErrMessage}
           handleSubmit={this.handleSubmit}
-          mode={mode}
+          onUpdateMode={this.updateMode}
-          onUpdateMode={this.onUpdateMode}
           searchStatus={searchStatus}
           searchResults={searchResults}
+          selectedSearchedItem={this.state.selectedSearchedItem}
+          onSelectedSearchedItem={this.selectSearchedItem}
           onSearchedItemClick={this.onSearchedItemClick}
           onSearchedItemDoubleClick={this.onSearchedItemDoubleClick}
           selectedSearchedRepo={selectedSearchedRepo}
+          onSelectSearchedRepo={this.selectSearchedRepo}
           onAddFolder={this.props.onAddFolder}
+          initToShowChildren={this.state.initToShowChildren}
+          fetchRepoInfo={this.fetchRepoInfo}
         />
       </Modal>
     );

frontend/src/components/dialog/select-dirent-body.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, ModalFooter, ModalBody, Alert, Row, Col } from 'reactstrap';
-import toaster from '../toast';
+import RepoListWrapper from '../file-chooser/repo-list-wrapper';
-import RepoListWrapper, { MODE_TYPE_MAP } from '../file-chooser/repo-list-wrapper';
+import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
 import { RepoInfo } from '../../models';
 import { ModalPortal } from '@seafile/sf-metadata-ui-component';
 import CreateFolder from '../dialog/create-folder-dialog';
@@ -23,74 +22,19 @@ class SelectDirentBody extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentRepoInfo: null,
-      repoList: [],
-      selectedRepo: null,
       errMessage: '',
       showCreateFolderDialog: false,
+      folderListOfSelectedRepo: [],
     };
     this.newFolderName = '';
   }
 
-  componentDidMount() {
+  fetchSelectedRepoInfo = (repoId) => {
-    this.fetchRepoInfo();
+    seafileAPI.getRepoInfo(repoId).then((res) => {
-    this.fetchRepoList();
-  }
-
-  fetchRepoInfo = async () => {
-    try {
-      const res = await seafileAPI.getRepoInfo(this.props.repoID);
       const repoInfo = new RepoInfo(res.data);
-      this.setState({
+      this.props.selectRepo(repoInfo);
-        currentRepoInfo: repoInfo,
+      this.props.onSelectSearchedRepo(repoInfo);
-        selectedRepo: repoInfo,
     });
-    } catch (err) {
-      const errMessage = Utils.getErrorMsg(err);
-      toaster.danger(errMessage);
-    }
-  };
-
-  fetchSelectedRepoInfo = async (repoId) => {
-    try {
-      const res = await seafileAPI.getRepoInfo(repoId);
-      const repoInfo = new RepoInfo(res.data);
-      this.setState({
-        selectedRepo: repoInfo,
-        selectedSearchedRepo: repoInfo,
-      });
-    } catch (err) {
-      const errMessage = Utils.getErrorMsg(err);
-      toaster.danger(errMessage);
-    }
-  };
-
-  fetchRepoList = async () => {
-    try {
-      const res = await seafileAPI.listRepos();
-      const repos = res.data.repos;
-      const repoList = [];
-      const uniqueRepoIds = new Set();
-      for (const repo of repos) {
-        if (repo.permission === 'rw' && repo.repo_id !== this.props.repoID && !uniqueRepoIds.has(repo.repo_id)) {
-          uniqueRepoIds.add(repo.repo_id);
-          repoList.push(repo);
-        }
-      }
-      const sortedRepoList = Utils.sortRepos(repoList, 'name', 'asc');
-      const selectedRepo = sortedRepoList.find((repo) => repo.repo_id === this.props.repoID);
-      this.setState({
-        repoList: sortedRepoList,
-        selectedRepo: selectedRepo || this.state.selectedRepo,
-      });
-    } catch (error) {
-      const errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    }
-  };
-
-  onUpdateRepoList = (repoList) => {
-    this.setState({ repoList: repoList });
   };
 
   handleSubmit = () => {
@@ -109,35 +53,17 @@ class SelectDirentBody extends React.Component {
     this.props.selectRepo(repo);
     this.props.setSelectedPath(selectedPath);
     this.props.setErrMessage('');
-    this.setState({ selectedRepo: repo });
   };
 
   onRepoItemClick = (repo) => {
     this.props.selectRepo(repo);
     this.props.setSelectedPath('/');
     this.props.setErrMessage('');
-    this.setState({ selectedRepo: repo });
   };
 
-  onUpdateMode = (mode) => {
+  loadRepoDirentList = async (repo, path) => {
-    const { path } = this.props;
-    const { repoList } = this.state;
-    if (mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES) {
-      this.setState({
-        selectedRepo: repoList[0],
-      });
-      this.props.setSelectedPath('/');
-    } else {
-      this.setState({ selectedRepo: this.state.currentRepoInfo });
-      this.props.setSelectedPath(path);
-    }
-
-    this.props.onUpdateMode(mode);
-  };
-
-  loadRepoDirentList = (repo) => {
     try {
-      const { data } = seafileAPI.listDir(repo.repo_id, '/');
+      const { data } = await seafileAPI.listDir(repo.repo_id, path);
       return data.dirent_list.filter(item => item.type === 'dir');
     } catch (error) {
       return [];
@@ -145,34 +71,59 @@ class SelectDirentBody extends React.Component {
   };
 
   createFolder = (fullPath) => {
+    if (!this.props.selectedRepo) {
+      this.setState({ errMessage: gettext('Please select a library or folder first.') });
+      return;
+    }
     this.newFolderName = fullPath.split('/').pop();
-    const selectedRepoId = this.state.selectedRepo.repo_id;
+    const selectedRepoId = this.props.selectedRepo.repo_id;
 
-    if (selectedRepoId === this.props.repoID) {
+    if (selectedRepoId === this.props.currentRepo.repo_id) {
-      this.props.onAddFolder(fullPath, { successCallback: this.fetchRepoInfo });
+      this.props.onAddFolder(fullPath, {
+        successCallback: () => {
+          seafileAPI.getRepoInfo(selectedRepoId).then((res) => {
+            const repoInfo = new RepoInfo(res.data);
+            this.props.selectRepo(repoInfo);
+            this.props.setSelectedPath(fullPath);
+          });
+        }
+      });
     } else {
       seafileAPI.createDir(selectedRepoId, fullPath).then(() => {
         this.fetchSelectedRepoInfo(selectedRepoId);
-      }).catch((error) => {
-        let errMessage = Utils.getErrorMsg(error);
-        this.props.setErrMessage(errMessage);
       });
     }
     this.setState({ showCreateFolderDialog: false });
   };
 
-  onToggleCreateFolder = () => {
+  onToggleCreateFolder = async () => {
-    this.setState({ showCreateFolderDialog: !this.state.showCreateFolderDialog });
+    if (!this.state.showCreateFolderDialog) {
+      const folderList = await this.loadRepoDirentList(this.props.selectedRepo, this.props.selectedPath);
+      this.setState({ folderListOfSelectedRepo: folderList });
+    } else {
+      this.setState({ folderListOfSelectedRepo: [] });
+    }
+    this.setState({ showCreateFolderDialog: !this.state.showCreateFolderDialog, errMessage: '' });
   };
 
   checkDuplicatedName = (newName) => {
-    const folderList = this.loadRepoDirentList(this.state.selectedRepo);
+    return this.state.folderListOfSelectedRepo.some(folder => folder.name === newName);
-    return folderList.some(folder => folder.name === newName);
+  };
+
+  selectMode = (mode) => {
+    this.props.onUpdateMode(mode);
+    if (mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY) {
+      this.props.selectRepo(this.props.currentRepo);
+    } else if (mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES) {
+      this.props.selectRepo(this.props.repoList[0]);
+    } else if (mode === MODE_TYPE_MAP.RECENTLY_USED) {
+      this.props.selectRepo(null);
+    }
+    this.props.setSelectedPath('/');
   };
 
   render() {
-    const { mode, path, selectedPath, isSupportOtherLibraries, errMessage, searchStatus, searchResults, selectedSearchedRepo } = this.props;
+    const { mode, repoList, currentRepo, selectedRepo, currentPath, selectedPath, isSupportOtherLibraries, errMessage, searchStatus, searchResults, selectedSearchedRepo, selectedSearchedItem } = this.props;
-    const { selectedSearchedItem, selectedRepo, repoList, currentRepoInfo } = this.state;
     let repoListWrapperKey = 'repo-list-wrapper';
     if (selectedSearchedItem && selectedSearchedItem.repoID) {
       repoListWrapperKey = `${repoListWrapperKey}-${selectedSearchedItem.repoID}`;
@@ -185,21 +136,21 @@ class SelectDirentBody extends React.Component {
             mode={MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY}
             label={gettext('Current Library')}
             currentMode={mode}
-            onUpdateMode={this.onUpdateMode}
+            onUpdateMode={this.selectMode}
           />
           {isSupportOtherLibraries && (
             <LibraryOption
               mode={MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES}
               label={gettext('Other Libraries')}
               currentMode={mode}
-              onUpdateMode={this.onUpdateMode}
+              onUpdateMode={this.selectMode}
             />
           )}
           <LibraryOption
             mode={MODE_TYPE_MAP.RECENTLY_USED}
             label={gettext('Recently Used')}
             currentMode={mode}
-            onUpdateMode={this.onUpdateMode}
+            onUpdateMode={this.selectMode}
           />
         </Col>
         <Col className='file-list-col'>
@@ -207,9 +158,9 @@ class SelectDirentBody extends React.Component {
             <RepoListWrapper
               key={repoListWrapperKey}
               mode={mode}
-              currentPath={path}
+              currentPath={currentPath}
               selectedItemInfo={selectedSearchedItem}
-              currentRepoInfo={currentRepoInfo}
+              currentRepoInfo={currentRepo}
               selectedRepo={selectedRepo}
               selectedPath={selectedPath}
               repoList={repoList}
@@ -221,6 +172,7 @@ class SelectDirentBody extends React.Component {
               onSearchedItemDoubleClick={this.props.onSearchedItemDoubleClick}
               selectedSearchedRepo={selectedSearchedRepo}
               newFolderName={this.newFolderName}
+              initToShowChildren={this.props.initToShowChildren}
             />
             {errMessage && <Alert color="danger" className="alert-message">{errMessage}</Alert>}
           </ModalBody>
@@ -229,7 +181,7 @@ class SelectDirentBody extends React.Component {
               className="footer-left-btn"
               color="secondary"
               onClick={this.onToggleCreateFolder}
-              disabled={mode === MODE_TYPE_MAP.SEARCH_RESULTS}
+              disabled={mode === MODE_TYPE_MAP.SEARCH_RESULTS || mode === MODE_TYPE_MAP.RECENTLY_USED}
             >
               <i className='sf3-font-new sf3-font mr-2'></i>
               <span>{gettext('New folder')}</span>
@@ -256,13 +208,15 @@ class SelectDirentBody extends React.Component {
 }
 
 SelectDirentBody.propTypes = {
-  path: PropTypes.string,
+  repoList: PropTypes.array.isRequired,
-  selectedPath: PropTypes.string,
+  currentRepo: PropTypes.object.isRequired,
-  repoID: PropTypes.string,
+  selectedRepo: PropTypes.object,
+  currentPath: PropTypes.string.isRequired,
+  selectedPath: PropTypes.string.isRequired,
   isSupportOtherLibraries: PropTypes.bool,
   onCancel: PropTypes.func,
   handleSubmit: PropTypes.func,
-  selectRepo: PropTypes.func,
+  selectRepo: PropTypes.func.isRequired,
   setSelectedPath: PropTypes.func,
   setErrMessage: PropTypes.func,
   mode: PropTypes.string,
@@ -272,7 +226,11 @@ SelectDirentBody.propTypes = {
   onSearchedItemClick: PropTypes.func,
   onSearchedItemDoubleClick: PropTypes.func,
   selectedSearchedRepo: PropTypes.object,
+  onSelectSearchedRepo: PropTypes.func,
   onAddFolder: PropTypes.func,
+  initToShowChildren: PropTypes.bool,
+  fetchRepoInfo: PropTypes.func,
+  selectedSearchedItem: PropTypes.object,
 };
 
 SelectDirentBody.defaultProps = {

frontend/src/components/file-chooser/repo-list-item.js

@@ -32,13 +32,13 @@ class RepoListItem extends React.Component {
       isShowChildren: this.props.initToShowChildren,
       treeData: treeHelper.buildTree(),
       hasLoaded: false,
-      isMounted: false,
     };
     this.loadRepoTimer = null;
+    this.isComponentMounted = false;
   }
 
   componentDidMount() {
-    this.setState({ isMounted: true });
+    this.isComponentMounted = true;
     const { isCurrentRepo, currentPath, repo, selectedItemInfo } = this.props;
 
     // render search result
@@ -46,13 +46,15 @@ class RepoListItem extends React.Component {
     if (repoID && repoID === repo.repo_id) {
       this.loadRepoDirentList(repo);
       this.loadRepoTimer = setTimeout(() => {
+        if (this.isComponentMounted) {
           this.setState({ isShowChildren: true });
           this.loadNodeAndParentsByPath(repoID, filePath);
+        }
       }, 0);
       return;
     }
 
-    if (repo.repo_id === this.props.selectedRepo.repo_id || isCurrentRepo) {
+    if (repo && repo.repo_id === this.props.selectedRepo.repo_id || isCurrentRepo) {
       this.loadRepoDirentList(repo);
       this.loadRepoTimer = setTimeout(() => {
         const repoID = repo.repo_id;
@@ -66,9 +68,10 @@ class RepoListItem extends React.Component {
 
   componentDidUpdate(prevProps) {
     const { repo, selectedRepo, selectedPath, newFolderName } = this.props;
+    // create new folder in selected repo or folder
     if (repo.repo_id === selectedRepo.repo_id && prevProps.selectedRepo !== selectedRepo) {
       seafileAPI.listDir(repo.repo_id, selectedPath).then(res => {
-        if (!this.state.isMounted) return;
+        if (!this.isComponentMounted) return;
         const direntData = res.data.dirent_list.find(item => item.type === 'dir' && item.name === newFolderName);
         if (direntData) {
           const object = new Dirent(direntData);
@@ -77,7 +80,7 @@ class RepoListItem extends React.Component {
           this.setState({ treeData: newTreeData });
         }
       }).catch(error => {
-        if (!this.state.isMounted) return;
+        if (!this.isComponentMounted) return;
         const errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
@@ -85,8 +88,9 @@ class RepoListItem extends React.Component {
   }
 
   componentWillUnmount() {
+    this.isComponentMounted = false;
     this.clearLoadRepoTimer();
-    this.setState({ isMounted: false, hasLoaded: false });
+    this.setState({ hasLoaded: false });
   }
 
   clearLoadRepoTimer = () => {
@@ -102,7 +106,7 @@ class RepoListItem extends React.Component {
 
     try {
       const res = await seafileAPI.listDir(repoID, '/');
-      if (!this.state.isMounted) return;
+      if (!this.isComponentMounted) return;
 
       let tree = this.state.treeData.clone();
       let direntList = this.props.isShowFile ? res.data.dirent_list : res.data.dirent_list.filter(item => item.type === 'dir');
@@ -110,7 +114,7 @@ class RepoListItem extends React.Component {
       this.addResponseListToNode(direntList, tree.root);
       this.setState({ treeData: tree, hasLoaded: true });
     } catch (error) {
-      if (!this.state.isMounted) return;
+      if (!this.isComponentMounted) return;
 
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);

frontend/src/components/file-chooser/repo-list-view.js

@@ -8,7 +8,7 @@ const propTypes = {
   repo: PropTypes.object,
   repoList: PropTypes.array,
   selectedRepo: PropTypes.object,
-  initToShowChildren: PropTypes.bool.isRequired,
+  initToShowChildren: PropTypes.bool,
   selectedPath: PropTypes.string,
   onDirentItemClick: PropTypes.func.isRequired,
   onRepoItemClick: PropTypes.func.isRequired,
@@ -34,7 +34,7 @@ const defaultProps = {
 class RepoListView extends React.Component {
 
   render() {
-    let { currentRepoInfo, currentPath, repoList, selectedSearchedRepo } = this.props;
+    let { currentRepoInfo, currentPath, repoList, selectedSearchedRepo, initToShowChildren } = this.props;
     if (currentRepoInfo) {
       repoList = [];
       repoList.push(currentRepoInfo);
@@ -54,7 +54,7 @@ class RepoListView extends React.Component {
               isCurrentRepo={currentRepoInfo ? true : false}
               currentPath={currentPath}
               repo={repoItem}
-              initToShowChildren={this.props.initToShowChildren}
+              initToShowChildren={initToShowChildren}
               selectedRepo={this.props.selectedRepo}
               selectedPath={this.props.selectedPath}
               onRepoItemClick={this.props.onRepoItemClick}

frontend/src/components/file-chooser/repo-list-wrapper.js

@@ -5,22 +5,14 @@ import RecentlyUsedListView from './recently-used-list-view';
 import { gettext } from '../../utils/constants';
 import SearchedListView from './searched-list-view';
 import { SearchStatus } from './searcher';
+import { MODE_TYPE_MAP } from '../dialog/move-dirent-dialog';
 import Loading from '../loading';
 
-export const MODE_TYPE_MAP = {
-  CURRENT_AND_OTHER_REPOS: 'current_repo_and_other_repos',
-  ONLY_CURRENT_LIBRARY: 'only_current_library',
-  ONLY_ALL_REPOS: 'only_all_repos',
-  ONLY_OTHER_LIBRARIES: 'only_other_libraries',
-  RECENTLY_USED: 'recently_used',
-  SEARCH_RESULTS: 'search_results',
-};
-
 const RepoListWrapper = (props) => {
   const {
     mode, isShowFile, fileSuffixes, currentPath, isCurrentRepoShow, currentRepoInfo, selectedRepo,
     selectedPath, isOtherRepoShow, selectedItemInfo, repoList,
-    searchStatus, searchResults, onSearchedItemClick, onSearchedItemDoubleClick, selectedSearchedRepo, newFolderName
+    searchStatus, searchResults, onSearchedItemClick, onSearchedItemDoubleClick, selectedSearchedRepo, newFolderName, initToShowChildren
   } = props;
 
   const onScroll = (event) => {
@@ -99,7 +91,7 @@ const RepoListWrapper = (props) => {
         {mode === MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY && (
           <div className="list-view">
             <RepoListView
-              initToShowChildren
+              initToShowChildren={true}
               currentRepoInfo={currentRepoInfo}
               currentPath={currentPath}
               selectedRepo={selectedRepo}
@@ -138,7 +130,7 @@ const RepoListWrapper = (props) => {
         {mode === MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES && (
           <div className="list-view">
             <RepoListView
-              initToShowChildren={false}
+              initToShowChildren={initToShowChildren}
               repoList={repoList}
               selectedRepo={selectedRepo}
               selectedPath={selectedPath}
@@ -193,6 +185,7 @@ RepoListWrapper.propTypes = {
   onSearchedItemDoubleClick: PropTypes.func,
   selectedSearchedRepo: PropTypes.object,
   newFolderName: PropTypes.string,
+  initToShowChildren: PropTypes.bool,
 };
 
 RepoListWrapper.defaultProps = {

frontend/src/components/file-chooser/searched-list-view.js

@@ -73,6 +73,7 @@ class SearchedListView extends React.Component {
                 currentItem={this.state.currentItem}
                 onItemClick={() => this.onItemClick(item, index)}
                 onSearchedItemDoubleClick={this.props.onSearchedItemDoubleClick}
+                initToShowChildren={false}
               />
             );
           })}

frontend/src/components/file-chooser/searcher/index.js

@@ -4,7 +4,7 @@ import { Input } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { SEARCH_CONTAINER } from '../../../constants/zIndexes';
-import { MODE_TYPE_MAP } from '../repo-list-wrapper';
+import { MODE_TYPE_MAP } from '../../dialog/move-dirent-dialog';
 
 import './index.css';
 

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

@@ -956,7 +956,7 @@ class LibContentView extends React.Component {
   removeFromRecentlyUsed = (repoID, path) => {
     const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
     const updatedRecentlyUsed = recentlyUsed.filter(item =>
-      !(item.repo.repo_id === repoID && item.path === path)
+      !(item.repo_id === repoID && item.path === path)
     );
     localStorage.setItem('recently-used-list', JSON.stringify(updatedRecentlyUsed));
   };