change targetPath used in PageSelectModal

apps/app/src/components/ItemsTree/ItemsTree.tsx

@@ -97,7 +97,7 @@ type ItemsTreeProps = {
   targetAndAncestorsData?: TargetAndAncestors
   CustomTreeItem: React.FunctionComponent<TreeItemProps>
   onClickTreeItem?: (page: IPageForItem) => void;
-  markTarget: (children: ItemNode[], targetPathOrId?: Nullable<string>) => void;
+  // markTarget: (children: ItemNode[], targetPathOrId?: Nullable<string>) => void;
 }
 
 /*

apps/app/src/components/PageSelectModal/PageSelectModal.tsx

@@ -5,6 +5,7 @@ import nodePath from 'path';
 
 import type { Nullable } from '@growi/core';
 import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
@@ -14,13 +15,17 @@ import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stor
 import { usePageSelectModal } from '~/stores/modal';
 import { useCurrentPagePath, useCurrentPageId, useSWRxCurrentPage } from '~/stores/page';
 
-import { ItemsTree } from '../ItemsTree';
+// import { ItemsTree } from '../ItemsTree';
 import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 import type { ItemNode } from '../TreeItem';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
+const ItemsTree = dynamic(
+  () => import('../ItemsTree').then(mod => mod.ItemsTree),
+  { ssr: false, loading: ItemsTreeContentSkeleton },
+);
 
 export const PageSelectModal: FC = () => {
   const {
@@ -69,29 +74,29 @@ export const PageSelectModal: FC = () => {
     closeModal();
   }, [clickedParentPagePath, closeModal, currentPage?.path, pagePathRenameHandler]);
 
-  const targetPathOrId = targetId || currentPath;
+  const targetPathOrId = clickedParentPagePath;
 
-  const path = currentPath || '/';
+  const targetPath = clickedParentPagePath || '/';
 
   if (isGuestUser == null) {
     return null;
   }
 
-  const markTarget = (children: ItemNode[], targetPathOrId?: Nullable<string>): void => {
-    if (targetPathOrId == null) {
-      return;
-    }
-
-    children.forEach((node) => {
-      if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
-        node.page.isTarget = true;
-      }
-      else {
-        node.page.isTarget = false;
-      }
-      return node;
-    });
-  };
+  // const markTarget = (children: ItemNode[], targetPathOrId?: Nullable<string>): void => {
+  //   if (targetPathOrId == null) {
+  //     return;
+  //   }
+
+  //   children.forEach((node) => {
+  //     if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
+  //       node.page.isTarget = true;
+  //     }
+  //     else {
+  //       node.page.isTarget = false;
+  //     }
+  //     return node;
+  //   });
+  // };
 
   return (
     <Modal
@@ -107,7 +112,7 @@ export const PageSelectModal: FC = () => {
             CustomTreeItem={TreeItemForModal}
             isEnableActions={!isGuestUser}
             isReadOnlyUser={!!isReadOnlyUser}
-            targetPath={path}
+            targetPath={targetPath}
             targetPathOrId={targetPathOrId}
             targetAndAncestorsData={targetAndAncestorsData}
             onClickTreeItem={onClickTreeItem}

apps/app/src/components/PageSelectModal/TreeItemForModal.tsx

@@ -33,7 +33,7 @@ export const TreeItemForModal: FC<PageTreeItemProps> = (props) => {
       itemClass={TreeItemForModal}
       customEndComponents={[NewPageCreateButton]}
       onClick={onClick}
-      markTarget={markTarget}
+      // markTarget={markTarget}
     />
   );
 };

apps/app/src/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -171,7 +171,6 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
     return null;
   }
 
-
   return (
     <div ref={rootElemRef}>
       <ItemsTree

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -189,7 +189,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       mainClassName={mainClassName}
       customEndComponents={[Ellipsis, NewPageCreateButton]}
       customNextComponents={[NewPageInput]}
-      markTarget={markTarget}
+      // markTarget={markTarget}
     />
   );
 };

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

@@ -23,21 +23,24 @@ import type { TreeItemProps, TreeItemToolProps } from './interfaces';
 
 
 // Utility to mark target
-// const markTarget = (children: ItemNode[], targetPathOrId?: Nullable<string>): void => {
-//   if (targetPathOrId == null) {
-//     return;
-//   }
-
-//   children.forEach((node) => {
-//     if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
-//       node.page.isTarget = true;
-//     }
-//     else {
-//       node.page.isTarget = false;
-//     }
-//     return node;
-//   });
-// };
+const markTarget = (page: IPageForItem, children: ItemNode[], targetPathOrId?: Nullable<string>): void => {
+
+  if (targetPathOrId == null) {
+    return;
+  }
+
+  page.isTarget = page.path === targetPathOrId;
+
+  children.forEach((node) => {
+    if (node.page._id === targetPathOrId || node.page.path === targetPathOrId) {
+      node.page.isTarget = true;
+    }
+    else {
+      node.page.isTarget = false;
+    }
+    return node;
+  });
+};
 
 
 const SimpleItemContent = ({ page }: { page: IPageForItem }) => {
@@ -101,7 +104,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
   const {
     itemNode, targetPathOrId, isOpen: _isOpen = false,
     onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, isEnableActions, isReadOnlyUser, isWipPageShown = true,
-    itemRef, itemClass, mainClassName, markTarget,
+    itemRef, itemClass, mainClassName,
   } = props;
 
   const { page, children } = itemNode;
@@ -151,10 +154,10 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
    */
   useEffect(() => {
     if (children.length > currentChildren.length) {
-      markTarget(children, targetPathOrId);
+      markTarget(page, children, targetPathOrId);
       setCurrentChildren(children);
     }
-  }, [children, currentChildren.length, markTarget, targetPathOrId]);
+  }, [children, currentChildren.length, page, targetPathOrId]);
 
   /*
    * When swr fetch succeeded
@@ -162,10 +165,10 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
   useEffect(() => {
     if (isOpen && data != null) {
       const newChildren = ItemNode.generateNodesFromPages(data.children);
-      markTarget(newChildren, targetPathOrId);
+      markTarget(page, newChildren, targetPathOrId);
       setCurrentChildren(newChildren);
     }
-  }, [data, isOpen, markTarget, targetPathOrId]);
+  }, [data, isOpen, page, targetPathOrId]);
 
   const ItemClassFixed = itemClass ?? SimpleItem;