IBX-7030: moved activeLocationId outside grid view so that it is save…

…d on entering and exiting cotf
ibexa · Mar 12, 2024 · 28794d0 · 28794d0
1 parent 52d8f58
commit 28794d0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 69 deletions.
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js
@@ -3,8 +3,7 @@ import React, { useContext, useState, useMemo, useEffect, useCallback } from 're
 import Icon from '../../../common/icon/icon';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
-import { LoadedLocationsMapContext, MarkedLocationIdContext } from '../../universal.discovery.module';
-import { ActiveLocationIdContext } from '../grid-view/grid.view';
+import { LoadedLocationsMapContext, MarkedLocationIdContext, GridActiveLocationIdContext } from '../../universal.discovery.module';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId) => {
@@ -16,9 +15,9 @@ const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId)
 const Breadcrumbs = () => {
     const Translator = getTranslator();
     const [, setMarkedLocationId] = useContext(MarkedLocationIdContext);
-    const [activeLocationId, setActiveLocationId] = useContext(ActiveLocationIdContext);
+    const [gridActiveLocationId, setGridActiveLocationId] = useContext(GridActiveLocationIdContext);
     const [loadedLocationsFullMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
-    const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, activeLocationId);
+    const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, gridActiveLocationId);
     const [hiddenListVisible, setHiddenListVisible] = useState(false);
     const { visibleItems, hiddenItems } = useMemo(() => {
         return loadedLocationsMap.reduce(
@@ -42,7 +41,7 @@ const Breadcrumbs = () => {
 
         dispatchLoadedLocationsAction({ type: 'SET_LOCATIONS', data: updatedLoadedLocations });
         setMarkedLocationId(locationId);
-        setActiveLocationId(locationId);
+        setGridActiveLocationId(locationId);
     };
     const toggleHiddenListVisible = useCallback(() => {
         setHiddenListVisible(!hiddenListVisible);

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
@@ -13,15 +13,15 @@ import {
     MultipleConfigContext,
     ContainersOnlyContext,
     AllowedContentTypesContext,
+    GridActiveLocationIdContext,
 } from '../../universal.discovery.module';
-import { ActiveLocationIdContext } from './grid.view';
 
 const isSelectionButtonClicked = (event) => {
     return event.target.closest('.c-udw-toggle-selection');
 };
 
 const GridViewItem = ({ location, version }) => {
-    const [, setActiveLocationId] = useContext(ActiveLocationIdContext);
+    const [, setGridActiveLocationId] = useContext(GridActiveLocationIdContext);
     const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
     const [, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const contentTypesMap = useContext(ContentTypesMapContext);
@@ -63,7 +63,7 @@ const GridViewItem = ({ location, version }) => {
         }
 
         dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
-        setActiveLocationId(location.id);
+        setGridActiveLocationId(location.id);
     };
     const renderToggleSelection = () => {
         return (

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js
@@ -10,22 +10,19 @@ import {
     LoadedLocationsMapContext,
     SortingContext,
     SortOrderContext,
-    MarkedLocationIdContext,
+    GridActiveLocationIdContext
 } from '../../universal.discovery.module';
 
-export const ActiveLocationIdContext = createContext();
-
 const SCROLL_OFFSET = 200;
 
 const GridView = ({ itemsPerPage }) => {
     const [offset, setOffset] = useState(0);
-    const [markedLocationId] = useContext(MarkedLocationIdContext);
     const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const [sorting] = useContext(SortingContext);
     const [sortOrder] = useContext(SortOrderContext);
-    const [activeLocationId, setActiveLocationId] = useState(markedLocationId ?? loadedLocationsMap[0]?.parentLocationId);
+    const [gridActiveLocationId] = useContext(GridActiveLocationIdContext);
     const sortingOptions = SORTING_OPTIONS.find((option) => option.sortClause === sorting);
-    const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === activeLocationId);
+    const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === gridActiveLocationId);
     const locationDataToLoad = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] };
     const [loadedLocations, isLoading] = useFindLocationsByParentLocationIdFetch(
         locationDataToLoad,
@@ -64,14 +61,12 @@ const GridView = ({ itemsPerPage }) => {
     }, [loadedLocations, dispatchLoadedLocationsAction, isLoading]);
 
     return (
-        <ActiveLocationIdContext.Provider value={[activeLocationId, setActiveLocationId]}>
-            <div className="c-grid">
-                <Breadcrumbs />
-                <div className="ibexa-grid-view c-grid__items-wrapper" onScroll={loadMore}>
-                    {locationData.subitems.map(renderItem)}
-                </div>
+        <div className="c-grid">
+            <Breadcrumbs />
+            <div className="ibexa-grid-view c-grid__items-wrapper" onScroll={loadMore}>
+                {locationData?.subitems.map(renderItem)}
             </div>
-        </ActiveLocationIdContext.Provider>
+        </div>
     );
 };