diff --git a/frontend/src/components/file-chooser/recently-used-list-item.js b/frontend/src/components/file-chooser/recently-used-list-item.js
index bccffac67b..5d6299bf83 100644
--- a/frontend/src/components/file-chooser/recently-used-list-item.js
+++ b/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 (
-
+
diff --git a/frontend/src/components/file-chooser/recently-used-list-view.js b/frontend/src/components/file-chooser/recently-used-list-view.js
index 74d77ad20b..b75fc62e85 100644
--- a/frontend/src/components/file-chooser/recently-used-list-view.js
+++ b/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) => {
- setSelectedItem(path);
- onDirentItemClick(repo, path);
+ const onItemClick = (item) => {
+ setSelectedItem(item);
+ onDirentItemClick(item.repo, item.path);
};
+ const isItemSelected = (item) => selectedItem && selectedItem.path === item.path && selectedItem.repo.repo_id === item.repo.repo_id;
+
return (
-
+
{recentlyUsedList.length > 0 && recentlyUsedList.map((item, index) => {
return (
);
diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
index 29699bb605..6bf8b3e6c1 100644
--- a/frontend/src/constants/index.js
+++ b/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';
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index f66ff4f22f..6e5e55504c 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/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 = {}) => {