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 = {}) => {