From 04e108df111aeb4816d2088409cfeeb92476eac5 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Thu, 27 Jun 2024 11:35:26 +0300 Subject: [PATCH] Refactor location naming --- .../src/components/select/PickSchema.tsx | 2 +- .../frontend/src/context/LibraryContext.tsx | 4 +- .../frontend/src/models/miscellaneous.ts | 5 +-- .../src/pages/LibraryPage/LibraryPage.tsx | 43 ++++++++++--------- .../pages/LibraryPage/TableLibraryItems.tsx | 2 +- ...ewSideFolders.tsx => ViewSideLocation.tsx} | 20 ++++----- rsconcept/frontend/src/utils/constants.ts | 2 +- 7 files changed, 40 insertions(+), 38 deletions(-) rename rsconcept/frontend/src/pages/LibraryPage/{ViewSideFolders.tsx => ViewSideLocation.tsx} (83%) diff --git a/rsconcept/frontend/src/components/select/PickSchema.tsx b/rsconcept/frontend/src/components/select/PickSchema.tsx index 9162b731..24b2e521 100644 --- a/rsconcept/frontend/src/components/select/PickSchema.tsx +++ b/rsconcept/frontend/src/components/select/PickSchema.tsx @@ -3,8 +3,8 @@ import { useIntl } from 'react-intl'; import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable'; import SearchBar from '@/components/ui/SearchBar'; -import { useLibrary } from '@/context/LibraryContext'; import { useConceptOptions } from '@/context/ConceptOptionsContext'; +import { useLibrary } from '@/context/LibraryContext'; import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library'; import { ILibraryFilter } from '@/models/miscellaneous'; diff --git a/rsconcept/frontend/src/context/LibraryContext.tsx b/rsconcept/frontend/src/context/LibraryContext.tsx index 850f7c26..3561ecd0 100644 --- a/rsconcept/frontend/src/context/LibraryContext.tsx +++ b/rsconcept/frontend/src/context/LibraryContext.tsx @@ -92,8 +92,8 @@ export const LibraryState = ({ children }: LibraryStateProps) => { if (!filter.folderMode && filter.head) { result = result.filter(item => item.location.startsWith(filter.head!)); } - if (filter.folderMode && filter.folder) { - result = result.filter(item => item.location == filter.folder); + if (filter.folderMode && filter.location) { + result = result.filter(item => item.location == filter.location); } if (filter.type) { result = result.filter(item => item.item_type === filter.type); diff --git a/rsconcept/frontend/src/models/miscellaneous.ts b/rsconcept/frontend/src/models/miscellaneous.ts index 4ea90958..7cda6856 100644 --- a/rsconcept/frontend/src/models/miscellaneous.ts +++ b/rsconcept/frontend/src/models/miscellaneous.ts @@ -144,11 +144,10 @@ export interface ILibraryFilter { type?: LibraryItemType; query?: string; + folderMode?: boolean; path?: string; head?: LocationHead; - - folderMode?: boolean; - folder?: string; + location?: string; isVisible?: boolean; isOwned?: boolean; diff --git a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx index a9f2c950..b1809b26 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx @@ -14,7 +14,7 @@ import { toggleTristateFlag } from '@/utils/utils'; import TableLibraryItems from './TableLibraryItems'; import ToolbarSearch from './ToolbarSearch'; -import ViewSideFolders from './ViewSideFolders'; +import ViewSideLocation from './ViewSideLocation'; function LibraryPage() { const library = useLibrary(); @@ -26,7 +26,7 @@ function LibraryPage() { const [head, setHead] = useLocalStorage(storage.librarySearchHead, undefined); const [folderMode, setFolderMode] = useLocalStorage(storage.librarySearchFolderMode, true); - const [folder, setFolder] = useLocalStorage(storage.librarySearchFolder, ''); + const [location, setLocation] = useLocalStorage(storage.librarySearchLocation, ''); const [isVisible, setIsVisible] = useLocalStorage(storage.librarySearchVisible, true); const [isSubscribed, setIsSubscribed] = useLocalStorage( storage.librarySearchSubscribed, @@ -45,9 +45,9 @@ function LibraryPage() { isSubscribed: user ? isSubscribed : undefined, isVisible: user ? isVisible : true, folderMode: folderMode, - folder: folder + location: location }), - [head, path, query, isEditor, isOwned, isSubscribed, isVisible, user, folderMode, folder] + [head, path, query, isEditor, isOwned, isSubscribed, isVisible, user, folderMode, location] ); const hasCustomFilter = useMemo( @@ -59,7 +59,7 @@ function LibraryPage() { filter.isOwned !== undefined || filter.isSubscribed !== undefined || filter.isVisible !== true || - !!filter.folder, + !!filter.location, [filter] ); @@ -81,13 +81,13 @@ function LibraryPage() { setIsSubscribed(undefined); setIsOwned(undefined); setIsEditor(undefined); - setFolder(''); - }, [setHead, setIsVisible, setIsSubscribed, setIsOwned, setIsEditor, setFolder]); + setLocation(''); + }, [setHead, setIsVisible, setIsSubscribed, setIsOwned, setIsEditor, setLocation]); - const view = useMemo( + const viewLibrary = useMemo( () => ( ( + + ), + [location, library.folders, setLocation, toggleFolderMode] + ); + return (
- - {folderMode ? ( - - ) : null} - - {view} + {folderMode ? viewLocations : null} + {viewLibrary}
); diff --git a/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx b/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx index d71d0b20..4dd86b03 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx @@ -161,7 +161,7 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }: columns={columns} data={items} headPosition='0' - className={clsx('text-xs sm:text-sm cc-scroll-y', { 'border-l border-b': folderMode })} + className={clsx('text-xs sm:text-sm cc-scroll-y h-fit', { 'border-l border-b': folderMode })} style={{ maxHeight: tableHeight }} noDataComponent={ diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewSideFolders.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx similarity index 83% rename from rsconcept/frontend/src/pages/LibraryPage/ViewSideFolders.tsx rename to rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx index 63ef9fa1..56c7420e 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/ViewSideFolders.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx @@ -14,14 +14,14 @@ import { animateSideView } from '@/styling/animations'; import { PARAMETER, prefixes } from '@/utils/constants'; import { information } from '@/utils/labels'; -interface ViewSideFoldersProps { - folders: FolderTree; - currentFolder: string; - setFolder: React.Dispatch>; +interface ViewSideLocationProps { + folderTree: FolderTree; + active: string; + setActive: React.Dispatch>; toggleFolderMode: () => void; } -function ViewSideFolders({ folders, currentFolder, setFolder, toggleFolderMode }: ViewSideFoldersProps) { +function ViewSideLocation({ folderTree, active, setActive: setActive, toggleFolderMode }: ViewSideLocationProps) { const handleClickFolder = useCallback( (event: CProps.EventMouse, target: FolderNode) => { event.preventDefault(); @@ -32,10 +32,10 @@ function ViewSideFolders({ folders, currentFolder, setFolder, toggleFolderMode } .then(() => toast.success(information.pathReady)) .catch(console.error); } else { - setFolder(target.getPath()); + setActive(target.getPath()); } }, - [setFolder] + [setActive] ); return ( @@ -59,8 +59,8 @@ function ViewSideFolders({ folders, currentFolder, setFolder, toggleFolderMode } /> @@ -68,4 +68,4 @@ function ViewSideFolders({ folders, currentFolder, setFolder, toggleFolderMode } ); } -export default ViewSideFolders; +export default ViewSideLocation; diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts index 038531ca..f1c6870e 100644 --- a/rsconcept/frontend/src/utils/constants.ts +++ b/rsconcept/frontend/src/utils/constants.ts @@ -95,7 +95,7 @@ export const storage = { librarySearchHead: 'library.search.head', librarySearchFolderMode: 'library.search.folder_mode', - librarySearchFolder: 'library.search.folder', + librarySearchLocation: 'library.search.location', librarySearchVisible: 'library.search.visible', librarySearchOwned: 'library.search.owned', librarySearchSubscribed: 'library.search.subscribed',