fix selected item match error in recently used list (#7524)

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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Utils } from '../../utils/utils';
 
 const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
@@ -9,12 +10,12 @@ const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
   const title = Utils.getFileName(item.path) || item.repo.repo_name;
 
   const handleItemClick = () => {
-    onItemClick(item.repo, item.path);
+    onItemClick(item);
   };
 
   return (
     <li>
-      <div className={`${isSelected ? 'item-active' : ''} item-info recently-used`} onClick={handleItemClick}>
+      <div className={classNames('item-info recently-used', { 'item-active': isSelected })} onClick={handleItemClick}>
         <div className="item-left-icon">
           <i className="tree-node-icon">
             <span className="icon sf3-font sf3-font-folder tree-node-icon"></span>

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

@@ -1,12 +1,13 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import RecentlyUsedListItem from './recently-used-list-item';
+import { RECENTLY_USED_LIST_KEY } from '../../constants';
 
 const RecentlyUsedListView = ({ currentRepoInfo, repoList, onDirentItemClick }) => {
   const [selectedItem, setSelectedItem] = useState(null);
 
   const recentlyUsedList = useMemo(() => {
-    const list = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+    const list = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
     const allRepos = [...repoList, currentRepoInfo];
 
     // list: [{repo_id: 'xxx', path: 'xxx'}, ...], replace repo_id with repo object
@@ -21,19 +22,21 @@ const RecentlyUsedListView = ({ currentRepoInfo, repoList, onDirentItemClick })
       .filter(item => item !== null);
   }, [currentRepoInfo, repoList]);
 
-  const onItemClick = (repo, path) => {
+  const onItemClick = (item) => {
-    setSelectedItem(path);
+    setSelectedItem(item);
-    onDirentItemClick(repo, path);
+    onDirentItemClick(item.repo, item.path);
   };
 
+  const isItemSelected = (item) => selectedItem && selectedItem.path === item.path && selectedItem.repo.repo_id === item.repo.repo_id;
+
   return (
-    <ul className="list-view-content file-chooser-item" >
+    <ul className="list-view-content file-chooser-item">
       {recentlyUsedList.length > 0 && recentlyUsedList.map((item, index) => {
         return (
           <RecentlyUsedListItem
             key={index}
             item={item}
-            isSelected={selectedItem === item.path}
+            isSelected={isItemSelected(item)}
             onItemClick={onItemClick}
           />
         );

frontend/src/constants/index.js

@@ -51,3 +51,5 @@ export const CAPTURE_INFO_SHOW_KEY = 'sf_capture_info_show';
 export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
 
 export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';
+
+export const RECENTLY_USED_LIST_KEY = 'recently_used_list';

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

@@ -20,7 +20,7 @@ import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
 import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
-import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY } from '../../constants';
+import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY, RECENTLY_USED_LIST_KEY } from '../../constants';
 import { MetadataStatusProvider } from '../../hooks';
 import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
 import { TagsProvider } from '../../tag/hooks';
@@ -739,7 +739,7 @@ class LibContentView extends React.Component {
   };
 
   updateRecentlyUsedList = (repo, destPath) => {
-    const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+    const recentlyUsed = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
     const updatedRecentlyUsed = [{ repo_id: repo.repo_id, path: destPath }, ...recentlyUsed];
 
     const filteredRecentlyUsed = updatedRecentlyUsed.filter((item, index, self) =>
@@ -752,7 +752,7 @@ class LibContentView extends React.Component {
       filteredRecentlyUsed.pop(); // Limit to 10 recent directories
     }
 
-    localStorage.setItem('recently-used-list', JSON.stringify(filteredRecentlyUsed));
+    localStorage.setItem(RECENTLY_USED_LIST_KEY, JSON.stringify(filteredRecentlyUsed));
   };
 
   // toolbar operations
@@ -955,11 +955,11 @@ class LibContentView extends React.Component {
   };
 
   removeFromRecentlyUsed = (repoID, path) => {
-    const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
+    const recentlyUsed = JSON.parse(localStorage.getItem(RECENTLY_USED_LIST_KEY)) || [];
     const updatedRecentlyUsed = recentlyUsed.filter(item =>
       !(item.repo_id === repoID && item.path === path)
     );
-    localStorage.setItem('recently-used-list', JSON.stringify(updatedRecentlyUsed));
+    localStorage.setItem(RECENTLY_USED_LIST_KEY, JSON.stringify(updatedRecentlyUsed));
   };
 
   onAddFolder = (dirPath, options = {}) => {