feat: a param to always refetch nodes data

Author: ariser

src/components/NavigationTree/NavigationTree.tsx

@@ -13,6 +13,7 @@ export function NavigationTree({
     getActions,
     activePath,
     onActivePathUpdate,
+    cache,
 }: NavigationTreeProps) {
     const [state, dispatch] = React.useReducer(reducer, {
         [partialRootState.path]: {
@@ -39,6 +40,7 @@ export function NavigationTree({
                 activePath={activePath}
                 onItemActivate={onActivePathUpdate}
                 getActions={getActions}
+                cache={cache}
             />
         </NavigationTreeNode>
     );

src/components/NavigationTree/NavigationTreeDirectory.tsx

@@ -15,6 +15,7 @@ export interface NavigationTreeDirectoryProps {
     activePath?: string;
     onItemActivate?: (itemPath: string) => void;
     getActions?: NavigationTreeProps['getActions'];
+    cache?: boolean;
 }
 
 export function NavigationTreeDirectory({
@@ -25,30 +26,33 @@ export function NavigationTreeDirectory({
     activePath,
     onItemActivate,
     getActions,
+    cache = true,
 }: NavigationTreeDirectoryProps) {
     const nodeState = state[path];
 
     React.useEffect(() => {
-        if (!nodeState.loaded && !nodeState.loading) {
-            dispatch({
-                type: NavigationTreeActionType.StartLoading,
-                payload: {path},
-            });
+        if ((nodeState.loaded && cache) || nodeState.loading) {
+            return;
+        }
+
+        dispatch({
+            type: NavigationTreeActionType.StartLoading,
+            payload: {path},
+        });
 
-            fetchPath(path)
-                .then((data) => {
-                    dispatch({
-                        type: NavigationTreeActionType.FinishLoading,
-                        payload: {path, data},
-                    });
-                })
-                .catch((error) => {
-                    dispatch({
-                        type: NavigationTreeActionType.FinishLoading,
-                        payload: {path, error},
-                    });
+        fetchPath(path)
+            .then((data) => {
+                dispatch({
+                    type: NavigationTreeActionType.FinishLoading,
+                    payload: {path, data},
                 });
-        }
+            })
+            .catch((error) => {
+                dispatch({
+                    type: NavigationTreeActionType.FinishLoading,
+                    payload: {path, error},
+                });
+            });
     }, []);
 
     if (nodeState.loading) {
@@ -76,6 +80,7 @@ export function NavigationTreeDirectory({
                                 activePath={activePath}
                                 onItemActivate={onItemActivate}
                                 getActions={getActions}
+                                cache={cache}
                             />
                         );
                     }

src/components/NavigationTree/state.ts

@@ -39,6 +39,7 @@ export function reducer(state: NavigationTreeState = {}, action: NavigationTreeA
                     loading: true,
                     loaded: false,
                     error: false,
+                    children: [],
                 },
             };
         case NavigationTreeActionType.FinishLoading: {

src/components/NavigationTree/types.ts

@@ -28,4 +28,5 @@ export interface NavigationTreeProps<D = any> {
     getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
     activePath?: string;
     onActivePathUpdate?: (activePath: string) => void;
+    cache?: boolean;
 }