show repos who are used in dialog recently (#7001)

* show repos who are used in dialog recently

* optimize code

* update RecentlyUsedListView props

---------

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

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

@@ -95,7 +95,7 @@ class MoveDirent extends React.Component {
       return;
     }
 
-    this.props.onItemsMove(repo, selectedPath);
+    this.props.onItemsMove(repo, selectedPath, true);
     this.toggle();
   };
 
@@ -131,7 +131,7 @@ class MoveDirent extends React.Component {
       return;
     }
 
-    this.props.onItemMove(repo, this.props.dirent, selectedPath, this.props.path);
+    this.props.onItemMove(repo, this.props.dirent, selectedPath, this.props.path, true);
     this.toggle();
   };
 

frontend/src/components/file-chooser/recently-used-list-item.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import { Utils } from '../../utils/utils';
 
 const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
-  const title = item.path === '/' ? item.path : item.path.split('/').pop();
+  if (!item || typeof item.path !== 'string') {
+    return '';
+  }
+
+  const title = Utils.getFileName(item.path);
 
   const handleItemClick = () => {
     onItemClick(item.repo, item.path);

frontend/src/components/file-chooser/recently-used-list-view.js

@@ -1,9 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
 import RecentlyUsedListItem from './recently-used-list-item';
 
-const RecentlyUsedListView = ({ recentlyUsedList, onDirentItemClick }) => {
+const RecentlyUsedListView = ({ currentRepoInfo, repoList, onDirentItemClick }) => {
   const [selectedItem, setSelectedItem] = useState(null);
 
+  const recentlyUsedList = useMemo(() => {
+    const list = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+    const allRepos = [...repoList, currentRepoInfo];
+
+    // list: [{repo_id: 'xxx', path: 'xxx'}, ...], replace repo_id with repo object
+    return list
+      .map(item => {
+        const repo = allRepos.find(repo => repo.repo_id === item.repo_id);
+        if (repo) {
+          return { path: item.path, repo: repo };
+        }
+        return null;
+      })
+      .filter(item => item !== null);
+  }, [currentRepoInfo, repoList]);
+
   const onItemClick = (repo, path) => {
     setSelectedItem(path);
     onDirentItemClick(repo, path);
@@ -25,4 +42,10 @@ const RecentlyUsedListView = ({ recentlyUsedList, onDirentItemClick }) => {
   );
 };
 
+RecentlyUsedListView.propTypes = {
+  currentRepoInfo: PropTypes.object.isRequired,
+  repoList: PropTypes.array.isRequired,
+  onDirentItemClick: PropTypes.func.isRequired,
+};
+
 export default RecentlyUsedListView;

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

@@ -23,18 +23,6 @@ const RepoListWrapper = (props) => {
     searchStatus, searchResults, onSearchedItemClick, onSearchedItemDoubleClick, selectedSearchedRepo, newFolderName
   } = props;
 
-  const renderRecentlyUsed = () => {
-    const recentlyUsedList = JSON.parse(localStorage.getItem('recently-used-list')) || [];
-    return (
-      <div className="list-view">
-        <RecentlyUsedListView
-          recentlyUsedList={recentlyUsedList}
-          onDirentItemClick={props.handleClickDirent}
-        />
-      </div>
-    );
-  };
-
   const onScroll = (event) => {
     event.stopPropagation();
   };
@@ -164,7 +152,15 @@ const RepoListWrapper = (props) => {
             />
           </div>
         )}
-        {mode === MODE_TYPE_MAP.RECENTLY_USED && renderRecentlyUsed()}
+        {mode === MODE_TYPE_MAP.RECENTLY_USED && (
+          <div className="list-view">
+            <RecentlyUsedListView
+              currentRepoInfo={currentRepoInfo}
+              repoList={repoList}
+              onDirentItemClick={props.handleClickDirent}
+            />
+          </div>
+        )}
         {mode === MODE_TYPE_MAP.SEARCH_RESULTS && (
           <div className="list-view">
             {renderSearchResults()}

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

@@ -740,7 +740,7 @@ class LibContentView extends React.Component {
 
   updateRecentlyUsedRepos = (repo, destPath) => {
     const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
-    const updatedRecentlyUsed = [{ repo: repo, path: destPath }, ...recentlyUsed.filter(item => item.path !== destPath)];
+    const updatedRecentlyUsed = [{ repo_id: repo.repo_id, path: destPath }, ...recentlyUsed.filter(item => item.path !== destPath)];
 
     const seen = new Set();
     const filteredRecentlyUsed = updatedRecentlyUsed.filter(item => {
@@ -760,7 +760,7 @@ class LibContentView extends React.Component {
   };
 
   // toolbar operations
-  onMoveItems = (destRepo, destDirentPath) => {
+  onMoveItems = (destRepo, destDirentPath, moveByDialog = false) => {
     let repoID = this.props.repoID;
     let selectedDirentList = this.state.selectedDirentList;
 
@@ -798,7 +798,9 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      this.updateRecentlyUsedRepos(destRepo, destDirentPath);
+      if (moveByDialog) {
+        this.updateRecentlyUsedRepos(destRepo, destDirentPath);
+      }
 
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {
@@ -1242,7 +1244,7 @@ class LibContentView extends React.Component {
   };
 
   // list operations
-  onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath) => {
+  onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath, moveByDialog = false) => {
     this.updateCurrentNotExistDirent(dirent);
     let repoID = this.props.repoID;
     // just for view list state
@@ -1287,7 +1289,9 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      this.updateRecentlyUsedRepos(destRepo, moveToDirentPath);
+      if (moveByDialog) {
+        this.updateRecentlyUsedRepos(destRepo, moveToDirentPath);
+      }
 
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {