opening and closing delete modal with SWR

packages/app/src/client/base.jsx

@@ -7,6 +7,7 @@ import GrowiNavbar from '../components/Navbar/GrowiNavbar';
 import GrowiNavbarBottom from '../components/Navbar/GrowiNavbarBottom';
 import HotkeysManager from '../components/Hotkeys/HotkeysManager';
 import PageCreateModal from '../components/PageCreateModal';
+import PageDeleteModal from '../components/PageDeleteModal';
 
 import AppContainer from '~/client/services/AppContainer';
 import SocketIoContainer from '~/client/services/SocketIoContainer';
@@ -40,6 +41,7 @@ const componentMappings = {
   'grw-navbar-bottom-container': <GrowiNavbarBottom />,
 
   'page-create-modal': <PageCreateModal />,
+  'page-deletee-modal': <PageDeleteModal />,
 
   'grw-hotkeys-manager': <HotkeysManager />,
 

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

@@ -5,6 +5,8 @@ import { withTranslation } from 'react-i18next';
 import urljoin from 'url-join';
 
 import { pagePathUtils } from '@growi/core';
+import { useDeleteModalStatus } from '~/stores/ui';
+
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import PageDeleteModal from '../PageDeleteModal';
@@ -22,6 +24,8 @@ const LegacyPageManagemenet = (props) => {
     t, appContainer, isCompactMode, pageId, revisionId, path, isDeletable, isAbleToDeleteCompletely,
   } = props;
 
+  const { open: openDeleteModal } = useDeleteModalStatus();
+
   const { currentUser } = appContainer;
   const isTopPagePath = isTopPage(path);
   const [isPageRenameModalShown, setIsPageRenameModalShown] = useState(false);
@@ -54,13 +58,13 @@ const LegacyPageManagemenet = (props) => {
     setIsPageTempleteModalShown(false);
   }
 
-  function openPageDeleteModalHandler() {
-    setIsPageDeleteModalShown(true);
-  }
+  // function openPageDeleteModalHandler() {
+  //   setIsPageDeleteModalShown(true);
+  // }
 
-  function closePageDeleteModalHandler() {
-    setIsPageDeleteModalShown(false);
-  }
+  // function closePageDeleteModalHandler() {
+  //   setIsPageDeleteModalShown(false);
+  // }
 
   function openPagePresentationModalHandler() {
     setIsPagePresentationModalShown(true);
@@ -146,7 +150,7 @@ const LegacyPageManagemenet = (props) => {
     return (
       <>
         <div className="dropdown-divider"></div>
-        <button className="dropdown-item text-danger" type="button" onClick={openPageDeleteModalHandler}>
+        <button className="dropdown-item text-danger" type="button" onClick={openDeleteModal}>
           <i className="icon-fw icon-fire"></i> { t('Delete') }
         </button>
       </>
@@ -183,12 +187,12 @@ const LegacyPageManagemenet = (props) => {
           isOpen={isPageTemplateModalShown}
           onClose={closePageTemplateModalHandler}
         />
-        <PageDeleteModal
+        {/* <PageDeleteModal
           isOpen={isPageDeleteModalShown}
           onClose={closePageDeleteModalHandler}
           pages={[pageToDelete]}
           isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-        />
+        /> */}
         <PagePresentationModal
           isOpen={isPagePresentationModalShown}
           onClose={closePagePresentationModalHandler}

packages/app/src/components/PageDeleteModal.tsx

@@ -6,6 +6,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 // import { apiPost } from '~/client/util/apiv1-client';
+import { useDeleteModalStatus, useDeleteModalOpened, useDeleteModalPath } from '~/stores/ui';
 
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 
@@ -39,8 +40,14 @@ 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 [isDeleteRecursively, setIsDeleteRecursively] = useState(true);
   const [isDeleteCompletely, setIsDeleteCompletely] = useState(isDeleteCompletelyModal && isAbleToDeleteCompletely);
   const deleteMode = isDeleteCompletely ? 'completely' : 'temporary';
@@ -143,8 +150,8 @@ const PageDeleteModal: FC<Props> = (props: Props) => {
   }
 
   return (
-    <Modal size="lg" isOpen={isOpen} toggle={onClose} className="grw-create-page">
-      <ModalHeader tag="h4" toggle={onClose} className={`bg-${deleteIconAndKey[deleteMode].color} text-light`}>
+    <Modal size="lg" isOpen={isOpened} toggle={closeDeleteModal} className="grw-create-page">
+      <ModalHeader tag="h4" toggle={closeDeleteModal} className={`bg-${deleteIconAndKey[deleteMode].color} text-light`}>
         <i className={`icon-fw icon-${deleteIconAndKey[deleteMode].icon}`}></i>
         { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
       </ModalHeader>

packages/app/src/server/views/layout/layout.html

@@ -104,6 +104,7 @@
 {% include '../widget/system-version.html' %}
 
 <div id="page-create-modal"></div>
+<div id="page-delete-modal"></div>
 {% include '../modal/shortcuts.html' %}
 
 {% block body_end %}

packages/app/src/stores/ui.tsx

@@ -252,6 +252,7 @@ export const useSidebarResizeDisabled = (isDisabled?: boolean): SWRResponse<bool
   return useStaticSWR('isSidebarResizeDisabled', isDisabled, { fallbackData: false });
 };
 
+// PageCreateModal
 type CreateModalStatus = {
   isOpened: boolean,
   path?: string,
@@ -294,6 +295,49 @@ export const useCreateModalPath = (): SWRResponse<string | null | undefined, Err
     },
   );
 };
+// PageDeleteModal
+type DeleteModalStatus = {
+  isOpened: boolean,
+  path?: string,
+}
+
+type DeleteModalStatusUtils = {
+  open(path?: string): 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 });
+
+  return {
+    ...swrResponse,
+    open: (path?: string) => swrResponse.mutate({ isOpened: true, path }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
+};
+
+export const useDeleteModalOpened = (): SWRResponse<boolean, Error> => {
+  const { data } = useCreateModalStatus();
+  return useSWR(
+    data != null ? ['isModalOpened', data] : null,
+    () => {
+      return data != null ? data.isOpened : false;
+    },
+  );
+};
+
+export const useDeleteModalPath = (): SWRResponse<string | null | undefined, Error> => {
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: status } = useCreateModalStatus();
+
+  return useSWR(
+    currentPagePath != null && status != null ? [currentPagePath, status] : null,
+    (currentPagePath, status) => {
+      return status?.path || currentPagePath;
+    },
+  );
+};
 
 
 export const useSelectedGrant = (initialData?: Nullable<number>): SWRResponse<Nullable<number>, Error> => {