Refactor location naming

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';
 

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) {
+      if (filter.folderMode && filter.location) {
-        result = result.filter(item => item.location == filter.folder);
+        result = result.filter(item => item.location == filter.location);
       }
       if (filter.type) {
         result = result.filter(item => item.item_type === filter.type);

rsconcept/frontend/src/models/miscellaneous.ts

@@ -144,11 +144,10 @@ export interface ILibraryFilter {
   type?: LibraryItemType;
   query?: string;
 
+  folderMode?: boolean;
   path?: string;
   head?: LocationHead;
-
+  location?: string;
-  folderMode?: boolean;
-  folder?: string;
 
   isVisible?: boolean;
   isOwned?: boolean;

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<LocationHead | undefined>(storage.librarySearchHead, undefined);
   const [folderMode, setFolderMode] = useLocalStorage<boolean>(storage.librarySearchFolderMode, true);
-  const [folder, setFolder] = useLocalStorage<string>(storage.librarySearchFolder, '');
+  const [location, setLocation] = useLocalStorage<string>(storage.librarySearchLocation, '');
   const [isVisible, setIsVisible] = useLocalStorage<boolean | undefined>(storage.librarySearchVisible, true);
   const [isSubscribed, setIsSubscribed] = useLocalStorage<boolean | undefined>(
     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('');
+    setLocation('');
-  }, [setHead, setIsVisible, setIsSubscribed, setIsOwned, setIsEditor, setFolder]);
+  }, [setHead, setIsVisible, setIsSubscribed, setIsOwned, setIsEditor, setLocation]);
 
-  const view = useMemo(
+  const viewLibrary = useMemo(
     () => (
       <TableLibraryItems
-        resetQuery={resetFilter} // prettier: split lines
+        resetQuery={resetFilter}
         items={items}
         folderMode={folderMode}
         toggleFolderMode={toggleFolderMode}
@@ -96,6 +96,18 @@ function LibraryPage() {
     [resetFilter, items, folderMode, toggleFolderMode]
   );
 
+  const viewLocations = useMemo(
+    () => (
+      <ViewSideLocation
+        active={location}
+        setActive={setLocation}
+        folderTree={library.folders}
+        toggleFolderMode={toggleFolderMode}
+      />
+    ),
+    [location, library.folders, setLocation, toggleFolderMode]
+  );
+
   return (
     <DataLoader
       id='library-page' // prettier: split lines
@@ -127,17 +139,8 @@ function LibraryPage() {
       />
 
       <div className='flex'>
-        <AnimatePresence initial={false}>
+        <AnimatePresence initial={false}>{folderMode ? viewLocations : null}</AnimatePresence>
-          {folderMode ? (
+        {viewLibrary}
-            <ViewSideFolders
-              currentFolder={folder} // prettier: split-lines
-              setFolder={setFolder}
-              folders={library.folders}
-              toggleFolderMode={toggleFolderMode}
-            />
-          ) : null}
-        </AnimatePresence>
-        {view}
       </div>
     </DataLoader>
   );

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={
         <FlexColumn className='dense p-3 items-center min-h-[6rem]'>

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 {
+interface ViewSideLocationProps {
-  folders: FolderTree;
+  folderTree: FolderTree;
-  currentFolder: string;
+  active: string;
-  setFolder: React.Dispatch<React.SetStateAction<string>>;
+  setActive: React.Dispatch<React.SetStateAction<string>>;
   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 }
         />
       </div>
       <SelectLocation
-        value={currentFolder}
+        value={active}
-        folderTree={folders}
+        folderTree={folderTree}
         prefix={prefixes.folders_list}
         onClick={handleClickFolder}
       />
@@ -68,4 +68,4 @@ function ViewSideFolders({ folders, currentFolder, setFolder, toggleFolderMode }
   );
 }
 
-export default ViewSideFolders;
+export default ViewSideLocation;

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',