fix create new folder (#7016)

* optimize code * optimize code --------- Co-authored-by: zhouwenxuan <aries@Mac.local>
2025-09-01 07:01:12 +00:00 · 2024-11-11 15:26:56 +08:00
parent 15857ac567
commit 20d6828d00
8 changed files with 179 additions and 164 deletions
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/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({
-      mode,
-    });
+    this.setState({ selectedSearchedItem: { repoID: '', filePath: '' } });
  };

  onUpdateSearchStatus = (status) => {
@@ -200,15 +254,14 @@ class MoveDirent extends React.Component {
  };

  onCloseSearchBar = () => {
-    const { selectedSearchedRepo } = this.state;
-    const mode = (!selectedSearchedRepo || selectedSearchedRepo.repo_id === this.props.repoID) ? MODE_TYPE_MAP.ONLY_CURRENT_LIBRARY : MODE_TYPE_MAP.ONLY_OTHER_LIBRARIES;
-
+    const mode = this.lastMode;
    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 { mode, selectedPath, showSearchBar, searchStatus, searchResults, selectedSearchedRepo, errMessage } = this.state;
+    const { dirent, selectedDirentList, isMultipleOperation, path } = this.props;
+    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.onUpdateMode}
+          onUpdateMode={this.updateMode}
          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>
    );
--- a/frontend/src/components/dialog/select-dirent-body.js
+++ b/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, { MODE_TYPE_MAP } from '../file-chooser/repo-list-wrapper';
+import RepoListWrapper 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() {
-    this.fetchRepoInfo();
-    this.fetchRepoList();
-  }
-
-  fetchRepoInfo = async () => {
-    try {
-      const res = await seafileAPI.getRepoInfo(this.props.repoID);
+  fetchSelectedRepoInfo = (repoId) => {
+    seafileAPI.getRepoInfo(repoId).then((res) => {
      const repoInfo = new RepoInfo(res.data);
-      this.setState({
-        currentRepoInfo: 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 });
+      this.props.selectRepo(repoInfo);
+      this.props.onSelectSearchedRepo(repoInfo);
+    });
  };

  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) => {
-    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) => {
+  loadRepoDirentList = async (repo, path) => {
    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) {
-      this.props.onAddFolder(fullPath, { successCallback: this.fetchRepoInfo });
+    if (selectedRepoId === this.props.currentRepo.repo_id) {
+      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 = () => {
-    this.setState({ showCreateFolderDialog: !this.state.showCreateFolderDialog });
+  onToggleCreateFolder = async () => {
+    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 folderList.some(folder => folder.name === newName);
+    return this.state.folderListOfSelectedRepo.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 { selectedSearchedItem, selectedRepo, repoList, currentRepoInfo } = this.state;
+    const { mode, repoList, currentRepo, selectedRepo, currentPath, selectedPath, isSupportOtherLibraries, errMessage, searchStatus, searchResults, selectedSearchedRepo, selectedSearchedItem } = this.props;
    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,
-  selectedPath: PropTypes.string,
-  repoID: PropTypes.string,
+  repoList: PropTypes.array.isRequired,
+  currentRepo: PropTypes.object.isRequired,
+  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 = {
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/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(() => {
-        this.setState({ isShowChildren: true });
-        this.loadNodeAndParentsByPath(repoID, filePath);
+        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);
--- a/frontend/src/components/file-chooser/repo-list-view.js
+++ b/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}
--- a/frontend/src/components/file-chooser/repo-list-wrapper.js
+++ b/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 = {
--- a/frontend/src/components/file-chooser/searched-list-view.js
+++ b/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}
              />
            );
          })}
--- a/frontend/src/components/file-chooser/searcher/index.js
+++ b/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';

--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/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));
  };