create some callback functions

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

@@ -11,12 +11,13 @@ import { useRouter } from 'next/router';
 import { debounce } from 'throttle-debounce';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { AncestorsChildrenResult, RootPageResult, TargetAndAncestors } from '~/interfaces/page-listing-results';
-import { OnDuplicatedFunction, OnDeletedFunction } from '~/interfaces/ui';
-import { SocketEventName, UpdateDescCountData, UpdateDescCountRawData } from '~/interfaces/websocket';
-import {
-  IPageForPageDuplicateModal, usePageDuplicateModal, usePageDeleteModal,
-} from '~/stores/modal';
+import type { IPageForItem } from '~/interfaces/page';
+import type { AncestorsChildrenResult, RootPageResult, TargetAndAncestors } from '~/interfaces/page-listing-results';
+import type { OnDuplicatedFunction, OnDeletedFunction } from '~/interfaces/ui';
+import type { UpdateDescCountData, UpdateDescCountRawData } from '~/interfaces/websocket';
+import { SocketEventName } from '~/interfaces/websocket';
+import type { IPageForPageDuplicateModal } from '~/stores/modal';
+import { usePageDuplicateModal, usePageDeleteModal } from '~/stores/modal';
 import { mutateAllPageInfo, useCurrentPagePath, useSWRMUTxCurrentPage } from '~/stores/page';
 import {
   useSWRxPageAncestorsChildren, useSWRxRootPage, mutatePageTree, mutatePageList,
@@ -31,6 +32,7 @@ import ItemsTreeContentSkeleton from './ItemsTreeContentSkeleton';
 
 import styles from './ItemsTree.module.scss';
 
+
 const logger = loggerFactory('growi:cli:ItemsTree');
 
 /*
@@ -93,6 +95,7 @@ type ItemsTreeProps = {
   targetPathOrId?: Nullable<string>
   targetAndAncestorsData?: TargetAndAncestors
   CustomTreeItem: React.FunctionComponent<TreeItemProps>
+  onClickTreeItem?: (page: IPageForItem) => void;
 }
 
 /*
@@ -100,7 +103,7 @@ type ItemsTreeProps = {
  */
 export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
   const {
-    targetPath, targetPathOrId, targetAndAncestorsData, isEnableActions, isReadOnlyUser, CustomTreeItem,
+    targetPath, targetPathOrId, targetAndAncestorsData, isEnableActions, isReadOnlyUser, CustomTreeItem, onClickTreeItem,
   } = props;
 
   const { t } = useTranslation();
@@ -282,6 +285,7 @@ export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
           onRenamed={onRenamed}
           onClickDuplicateMenuItem={onClickDuplicateMenuItem}
           onClickDeleteMenuItem={onClickDeleteMenuItem}
+          onClick={onClickTreeItem}
         />
       </ul>
     );

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

@@ -1,16 +1,20 @@
 import type { FC } from 'react';
-import React from 'react';
+import { useState } from 'react';
+
+import nodePath from 'path';
 
 import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
 
+import type { IPageForItem } from '~/interfaces/page';
 import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
 import { usePageSelectModal } from '~/stores/modal';
-import { useCurrentPagePath, useCurrentPageId } from '~/stores/page';
+import { useCurrentPagePath, useCurrentPageId, useSWRxCurrentPage } from '~/stores/page';
 
 import { ItemsTree } from '../ItemsTree';
+import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 
 import { TreeItemForModal } from './TreeItemForModal';
 
@@ -23,6 +27,8 @@ export const PageSelectModal: FC = () => {
 
   const isOpened = PageSelectModalData?.isOpened ?? false;
 
+  const [clickedParentPagePath, setClickedParentPagePath] = useState('');
+
   const { t } = useTranslation();
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -30,6 +36,9 @@ export const PageSelectModal: FC = () => {
   const { data: currentPath } = useCurrentPagePath();
   const { data: targetId } = useCurrentPageId();
   const { data: targetAndAncestorsData } = useTargetAndAncestors();
+  const { data: currentPage } = useSWRxCurrentPage();
+
+  const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
   const targetPathOrId = targetId || currentPath;
 
@@ -39,6 +48,30 @@ export const PageSelectModal: FC = () => {
 
   const path = currentPath || '/';
 
+  const onClickTreeItem = (page: IPageForItem) => {
+    const parentPagePath = page.path;
+
+    if (parentPagePath == null) {
+      return;
+    }
+
+    setClickedParentPagePath(parentPagePath);
+  };
+
+  const onClickCancel = () => {
+    setClickedParentPagePath('');
+    closeModal();
+  };
+
+  const onClickDone = () => {
+    const currentPageTitle = nodePath.basename(currentPage?.path ?? '') || '/';
+    const newPagePath = nodePath.resolve(clickedParentPagePath, currentPageTitle);
+
+    pagePathRenameHandler(newPagePath);
+
+    closeModal();
+  };
+
   return (
     <Modal
       isOpen={isOpened}
@@ -55,11 +88,12 @@ export const PageSelectModal: FC = () => {
           targetPath={path}
           targetPathOrId={targetPathOrId}
           targetAndAncestorsData={targetAndAncestorsData}
+          onClickTreeItem={onClickTreeItem}
         />
       </ModalBody>
       <ModalFooter>
-        <Button color="secondary" onClick={closeModal}>{t('Cancel')}</Button>{' '}
-        <Button color="primary" onClick={closeModal}>{t('Done')}</Button>{' '}
+        <Button color="secondary" onClick={onClickCancel}>{t('Cancel')}</Button>{' '}
+        <Button color="primary" onClick={onClickDone}>{t('Done')}</Button>{' '}
       </ModalFooter>
     </Modal>
   );