use defferent key between create and delete modals

packages/app/src/components/Page/PageManagement.jsx

@@ -146,26 +146,28 @@ const LegacyPageManagemenet = (props) => {
     );
   }
 
+  function generatePageObjectToDelete() {
+    return { pageId, revisionId, path };
+  }
+  const pageToDelete = generatePageObjectToDelete();
+
   function renderDropdownItemForDeletablePage() {
     return (
       <>
         <div className="dropdown-divider"></div>
-        <button className="dropdown-item text-danger" type="button" onClick={openDeleteModal}>
+        <button className="dropdown-item text-danger" type="button" onClick={() => openDeleteModal({ pages: pageToDelete })}>
           <i className="icon-fw icon-fire"></i> { t('Delete') }
         </button>
       </>
     );
   }
 
-  function generatePageObjectToDelete() {
-    return { pageId, revisionId, path };
-  }
 
   function renderModals() {
     if (currentUser == null) {
       return null;
     }
-    const pageToDelete = generatePageObjectToDelete();
+    // const pageToDelete = generatePageObjectToDelete();
 
     return (
       <>

packages/app/src/components/PageDeleteModal.tsx

@@ -40,13 +40,13 @@ type Props = {
 const PageDeleteModal: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
   const {
-    /* isOpen, onClose, */ isDeleteCompletelyModal, pages, isAbleToDeleteCompletely,
+    /* isOpen, onClose, */ isDeleteCompletelyModal, /* pages , */ isAbleToDeleteCompletely,
   } = props;
 
 
   const { close: closeDeleteModal } = useDeleteModalStatus();
   const { data: isOpened } = useDeleteModalOpened();
-  const { data: path } = useDeleteModalPath();
+  const { data: pages } = useDeleteModalPath();
 
   const [isDeleteRecursively, setIsDeleteRecursively] = useState(true);
   const [isDeleteCompletely, setIsDeleteCompletely] = useState(isDeleteCompletelyModal && isAbleToDeleteCompletely);
@@ -160,9 +160,9 @@ const PageDeleteModal: FC<Props> = (props: Props) => {
           <label>{ t('modal_delete.deleting_page') }:</label><br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {/* https://redmine.weseek.co.jp/issues/82787 */}
-          {pages.map((page) => {
+          {/* {pages?.map((page) => {
             return <div key={page.pageId}><code>{ page.path }</code></div>;
-          })}
+          })} */}
         </div>
         {renderDeleteRecursivelyForm()}
         {!isDeleteCompletelyModal && renderDeleteCompletelyForm()}

packages/app/src/stores/ui.tsx

@@ -17,6 +17,8 @@ import {
 import { IFocusable } from '~/client/interfaces/focusable';
 import { isSharedPage } from '^/../core/src/utils/page-path-utils';
 
+import IPageForPageDeleteModal from '~/components/PageDeleteModal';
+
 const logger = loggerFactory('growi:stores:ui');
 
 const isServer = typeof window === 'undefined';
@@ -265,7 +267,7 @@ type CreateModalStatusUtils = {
 
 export const useCreateModalStatus = (status?: CreateModalStatus): SWRResponse<CreateModalStatus, Error> & CreateModalStatusUtils => {
   const initialData: CreateModalStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<CreateModalStatus, Error>('modalStatus', status, { fallbackData: initialData });
+  const swrResponse = useStaticSWR<CreateModalStatus, Error>('createModalStatus', status, { fallbackData: initialData });
 
   return {
     ...swrResponse,
@@ -277,14 +279,14 @@ export const useCreateModalStatus = (status?: CreateModalStatus): SWRResponse<Cr
 export const useCreateModalOpened = (): SWRResponse<boolean, Error> => {
   const { data } = useCreateModalStatus();
   return useSWR(
-    data != null ? ['isModalOpened', data] : null,
+    data != null ? ['isCreaateModalOpened', data] : null,
     () => {
       return data != null ? data.isOpened : false;
     },
   );
 };
 
-export const useCreateModalPath = (): SWRResponse<string | null | undefined, Error> => {
+export const useCreateModalPath = (): SWRResponse<any | null | undefined, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: status } = useCreateModalStatus();
 
@@ -298,43 +300,44 @@ export const useCreateModalPath = (): SWRResponse<string | null | undefined, Err
 // PageDeleteModal
 type DeleteModalStatus = {
   isOpened: boolean,
-  path?: string,
+  pages?: typeof IPageForPageDeleteModal[],
 }
 
 type DeleteModalStatusUtils = {
-  open(path?: string): Promise<DeleteModalStatus | undefined>
+  open(pages?: typeof IPageForPageDeleteModal[]): Promise<DeleteModalStatus | undefined>
   close(): Promise<DeleteModalStatus | undefined>
 }
 
 export const useDeleteModalStatus = (status?: DeleteModalStatus): SWRResponse<DeleteModalStatus, Error> & DeleteModalStatusUtils => {
   const initialData: DeleteModalStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<DeleteModalStatus, Error>('modalStatus', status, { fallbackData: initialData });
+  const swrResponse = useStaticSWR<DeleteModalStatus, Error>('deleteModalStatus', status, { fallbackData: initialData });
 
   return {
     ...swrResponse,
-    open: (path?: string) => swrResponse.mutate({ isOpened: true, path }),
+    open: (pages?: typeof IPageForPageDeleteModal[]) => swrResponse.mutate({ isOpened: true, pages }),
     close: () => swrResponse.mutate({ isOpened: false }),
   };
 };
 
 export const useDeleteModalOpened = (): SWRResponse<boolean, Error> => {
-  const { data } = useCreateModalStatus();
+  const { data } = useDeleteModalStatus();
+  console.log('data', data);
   return useSWR(
-    data != null ? ['isModalOpened', data] : null,
+    data != null ? ['isDeleteModalOpened', data] : null,
     () => {
       return data != null ? data.isOpened : false;
     },
   );
 };
 
-export const useDeleteModalPath = (): SWRResponse<string | null | undefined, Error> => {
+export const useDeleteModalPath = (): SWRResponse<any | null | undefined, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: status } = useCreateModalStatus();
+  const { data: status } = useDeleteModalStatus();
 
   return useSWR(
     currentPagePath != null && status != null ? [currentPagePath, status] : null,
     (currentPagePath, status) => {
-      return status?.path || currentPagePath;
+      return status?.pages || currentPagePath;
     },
   );
 };