improve markTarget function to accept both ItemNode and ItemNode[] as an argument

apps/app/src/components/TreeItem/TreeItemLayout.tsx

@@ -20,25 +20,26 @@ const moduleClass = styles['tree-item-layout'] ?? '';
 
 
 // Utility to mark target
-const markTarget = (itemNode: ItemNode, targetPathOrId?: Nullable<string>): void => {
+const markTarget = (itemNode: ItemNode | ItemNode[], targetPathOrId?: Nullable<string>): void => {
   if (targetPathOrId == null) {
     return;
   }
 
-  const { page, children } = itemNode;
-
-  page.isTarget = page.path === targetPathOrId;
+  if (Array.isArray(itemNode)) {
+    itemNode.forEach((node) => {
+      if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
+        node.page.isTarget = true;
+      }
+      else {
+        node.page.isTarget = false;
+      }
+      return node;
+    });
+  }
+  else {
+    itemNode.page.isTarget = itemNode.page.path === targetPathOrId;
+  }
 
-  children.forEach((node) => {
-    if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
-      node.page.isTarget = true;
-      console.log(node.page.path);
-    }
-    else {
-      node.page.isTarget = false;
-    }
-    return node;
-  });
 };
 
 
@@ -99,15 +100,21 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
     if (hasChildren()) setIsOpen(true);
   }, [hasChildren]);
 
+  useEffect(() => {
+    if (page.path === '/') {
+      markTarget(itemNode, targetPathOrId);
+    }
+  }, [itemNode, page.path, targetPathOrId]);
+
   /*
    * Make sure itemNode.children and currentChildren are synced
    */
   useEffect(() => {
     if (children.length > currentChildren.length) {
-      markTarget(itemNode, targetPathOrId);
+      markTarget(children, targetPathOrId);
       setCurrentChildren(children);
     }
-  }, [children, currentChildren.length, itemNode, page, targetPathOrId]);
+  }, [children, currentChildren.length, targetPathOrId]);
 
   /*
    * When swr fetch succeeded
@@ -115,10 +122,10 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
   useEffect(() => {
     if (isOpen && data != null) {
       const newChildren = ItemNode.generateNodesFromPages(data.children);
-      markTarget(itemNode, targetPathOrId);
+      markTarget(newChildren, targetPathOrId);
       setCurrentChildren(newChildren);
     }
-  }, [data, isOpen, itemNode, page, targetPathOrId]);
+  }, [data, isOpen, targetPathOrId]);
 
   const ItemClassFixed = itemClass ?? TreeItemLayout;