Merge pull request #2523 from epam/fix/async-ds-deps-change-v2

[useAsyncTree]: fixed problem with refetching data on deps change.
epam · Sep 26, 2024 · d612cb2 · d612cb2
2 parents 53e13cb + 6c00c3f
commit d612cb2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/uui-core/src/data/processing/views/tree/ItemsStorage.ts b/uui-core/src/data/processing/views/tree/ItemsStorage.ts
@@ -49,7 +49,7 @@ export class ItemsStorage<TItem, TId> {
         return this._itemsMap;
     };
 
-    public getItemsMap() {
+    public getItemsMap = () => {
         return this._itemsMap;
-    }
+    };
 }
diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useAsyncTree.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useAsyncTree.ts
@@ -6,6 +6,7 @@ import { usePrevious } from '../../../../../../../hooks/usePrevious';
 import {
     useItemsStorage, useDataSourceStateWithDefaults, useFilterTree, useSortTree,
     useSearchTree, useSelectedOnlyTree, usePatchTree,
+    useActualItemsMap,
 } from '../../common';
 import { UseTreeResult } from '../../types';
 
@@ -54,9 +55,12 @@ export function useAsyncTree<TItem, TId, TFilter = any>(
 
     const [incommingTree, setIncommingTree] = useState(baseTree);
 
+    useEffect(() => {
+        setIncommingTree(TreeState.blank({ getId, getParentId, complexIds }, itemsMap, setItems));
+    }, [...deps]);
+
     const prevIsForceReload = usePrevious(isForceReload);
     const dataSourceState = useDataSourceStateWithDefaults({ dataSourceState: props.dataSourceState });
-
     const { tree: treeWithData, itemsStatusCollector, isLoaded: isTreeLoaded, isLoading, isFetching } = useLoadData({
         getId,
         complexIds,
@@ -118,8 +122,13 @@ export function useAsyncTree<TItem, TId, TFilter = any>(
         isLoading: isTreeLoading,
     }, [searchTree, isTreeLoading]);
 
-    const { tree, applyPatch } = usePatchTree({
+    const treeWithNewItemsMap = useActualItemsMap({
         tree: treeWithSelectedOnly,
+        itemsMap,
+    });
+
+    const { tree, applyPatch } = usePatchTree({
+        tree: treeWithNewItemsMap,
         patch: showSelectedOnly ? null : patch,
         isDeleted,
         getNewItemPosition,
@@ -137,7 +146,7 @@ export function useAsyncTree<TItem, TId, TFilter = any>(
 
     return {
         tree: showSelectedOnly ? tree.selectedOnly : tree.visible,
-        treeWithoutPatch: treeWithSelectedOnly.visible,
+        treeWithoutPatch: treeWithNewItemsMap.visible,
         selectionTree: tree.full,
         reload,
         totalCount,

diff --git a/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useLoadData.ts b/uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/useLoadData.ts
@@ -4,7 +4,6 @@ import { TreeState } from '../../../treeState';
 import { usePrevious } from '../../../../../../../hooks/usePrevious';
 import { isQueryChanged } from '../lazyTree/helpers';
 import { useItemsStatusCollector } from '../../common';
-import { useDepsChanged } from '../../common/useDepsChanged';
 import { getSelectedAndChecked } from '../../../treeStructure';
 import { NOT_FOUND_RECORD } from '../../../constants';
 import { ItemsStatuses } from '../types';
@@ -95,8 +94,6 @@ export function useLoadData<TItem, TId, TFilter = any>(
         }
     }, [api]);
 
-    const depsChanged = useDepsChanged(deps);
-
     const shouldForceReload = prevForceReload !== forceReload && forceReload;
 
     const shouldLoad = (
@@ -111,6 +108,12 @@ export function useLoadData<TItem, TId, TFilter = any>(
         }
     }, [shouldForceReload]);
 
+    useEffect(() => {
+        if (isLoaded) {
+            setIsLoaded(false);
+        }
+    }, [...deps]);
+
     useEffect(() => {
         if (shouldLoad) {
             setIsFetching(true);
@@ -140,7 +143,7 @@ export function useLoadData<TItem, TId, TFilter = any>(
                     setIsLoading(false);
                 });
         }
-    }, [shouldLoad, depsChanged, shouldForceReload]);
+    }, [...deps, shouldLoad, shouldForceReload]);
 
     return { tree: loadedTree, isLoading, isFetching, isLoaded, itemsStatusCollector };
 }
diff --git a/uui-core/src/data/processing/views/tree/treeState/TreeState.ts b/uui-core/src/data/processing/views/tree/treeState/TreeState.ts
@@ -390,7 +390,7 @@ export class TreeState<TItem, TId> {
     ) {
         const itemsAccessor = ItemsAccessor.toItemsAccessor(itemsMap);
         const treeStructure = TreeStructure.createFromItems({ params, items: itemsMap, itemsAccessor });
-        return new TreeState(
+        return this.create(
             treeStructure,
             treeStructure,
             TreeStructure.create(params, ItemsAccessor.toItemsAccessor(itemsMap)),