WIP: migrate hooks for modal

apps/app/src/client/components/Bookmarks/BookmarkItem.tsx

@@ -16,7 +16,7 @@ import { toastError, toastSuccess } from '~/client/util/toastr';
 import type { BookmarkFolderItems, DragItemDataType } from '~/interfaces/bookmark-info';
 import { DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
 import { useFetchCurrentPage } from '~/states/page';
-import { usePutBackPageModal } from '~/stores/modal';
+import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
 import { mutateAllPageInfo, useSWRxPageInfo } from '~/stores/page';
 
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
@@ -48,7 +48,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     isReadOnlyUser, isOperable, bookmarkedPage, onClickDeleteMenuItemHandler,
     parentFolder, level, canMoveToRoot, bookmarkFolderTreeMutation,
   } = props;
-  const { open: openPutBackPageModal } = usePutBackPageModal();
+  const { open: openPutBackPageModal } = usePutBackPageModalActions();
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
   const { data: pageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkedPage?._id);

apps/app/src/client/components/GrantedGroupsInheritanceSelectModal.tsx

@@ -5,18 +5,20 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { useGrantedGroupsInheritanceSelectModal } from '~/stores/modal';
+import {
+  useGrantedGroupsInheritanceSelectModalActions, useGrantedGroupsInheritanceSelectModalStatus,
+} from '~/states/ui/modal/granted-groups-inheritance-select';
 
 const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
   const { t } = useTranslation();
-  const { data: modalData, close: closeModal } = useGrantedGroupsInheritanceSelectModal();
+  const { isOpened, onCreateBtnClick: _onCreateBtnClick } = useGrantedGroupsInheritanceSelectModalStatus();
+  const { close: closeModal } = useGrantedGroupsInheritanceSelectModalActions();
   const [onlyInheritUserRelatedGrantedGroups, setOnlyInheritUserRelatedGrantedGroups] = useState(false);
 
   const onCreateBtnClick = async() => {
-    await modalData?.onCreateBtnClick?.(onlyInheritUserRelatedGrantedGroups);
+    await _onCreateBtnClick?.(onlyInheritUserRelatedGrantedGroups);
     setOnlyInheritUserRelatedGrantedGroups(false); // reset to false after create request
   };
-  const isOpened = modalData?.isOpened ?? false;
 
   return (
     <Modal

apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -39,8 +39,8 @@ import { useEditorMode } from '~/states/ui/editor';
 import { PageAccessoriesModalContents, usePageAccessoriesModalActions } from '~/states/ui/modal/page-accessories';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
 import { usePageDuplicateModalActions, type IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
+import { usePresentationModalActions } from '~/states/ui/modal/page-presentation';
 import { usePageRenameModalActions } from '~/states/ui/modal/page-rename';
-import { usePagePresentationModal } from '~/stores/modal';
 import {
   useSWRxPageInfo,
 } from '~/stores/page';
@@ -89,7 +89,7 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
   const isBulkExportPagesEnabled = useAtomValue(isBulkExportPagesEnabledAtom);
   const isUploadEnabled = useAtomValue(isUploadEnabledAtom);
 
-  const { open: openPresentationModal } = usePagePresentationModal();
+  const { open: openPresentationModal } = usePresentationModalActions();
   const { open: openAccessoriesModal } = usePageAccessoriesModalActions();
   const { open: openPageBulkExportSelectModal } = usePageBulkExportSelectModal();
 

apps/app/src/client/components/PageEditor/DrawioModal.tsx

@@ -13,7 +13,7 @@ import {
 
 import { replaceFocusedDrawioWithEditor, getMarkdownDrawioMxfile } from '~/client/components/PageEditor/markdown-drawio-util-for-editor';
 import { useRendererConfig } from '~/states/server-configurations';
-import { useDrawioModal } from '~/stores/modal';
+import { useDrawioModalActions, useDrawioModalStatus } from '~/states/ui/modal/drawio';
 import { usePersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
 
@@ -63,7 +63,8 @@ export const DrawioModal = (): JSX.Element => {
     revalidateOnReconnect: false,
   });
 
-  const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
+  const drawioModalData = useDrawioModalStatus();
+  const { close: closeDrawioModal } = useDrawioModalActions();
   const { data: drawioModalDataInEditor, close: closeDrawioModalInEditor } = useDrawioModalForEditor();
   const editorKey = drawioModalDataInEditor?.editorKey ?? null;
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
@@ -117,7 +118,7 @@ export const DrawioModal = (): JSX.Element => {
     }
 
     const drawioMxFile = editor != null ? getMarkdownDrawioMxfile(editor) : drawioModalData.drawioMxFile;
-    drawioCommunicationHelper?.onReceiveMessage(event, drawioMxFile);
+    drawioCommunicationHelper?.onReceiveMessage(event, drawioMxFile ?? null);
   }, [drawioCommunicationHelper, drawioModalData, editor]);
 
   useEffect(() => {

apps/app/src/client/components/PageEditor/HandsontableModal.tsx

@@ -13,7 +13,7 @@ import { debounce } from 'throttle-debounce';
 
 
 import { replaceFocusedMarkdownTableWithEditor, getMarkdownTable } from '~/client/components/PageEditor/markdown-table-util-for-editor';
-import { useHandsontableModal } from '~/stores/modal';
+import { useHandsontableModalActions, useHandsontableModalStatus } from '~/states/ui/modal/handsontable';
 
 import ExpandOrContractButton from '../ExpandOrContractButton';
 
@@ -33,7 +33,8 @@ const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
 export const HandsontableModal = (): JSX.Element => {
 
   const { t } = useTranslation('commons');
-  const { data: handsontableModalData, close: closeHandsontableModal } = useHandsontableModal();
+  const handsontableModalData = useHandsontableModalStatus();
+  const { close: closeHandsontableModal } = useHandsontableModalActions();
   const { data: handsontableModalForEditorData } = useHandsontableModalForEditor();
 
   const isOpened = handsontableModalData?.isOpened ?? false;

apps/app/src/client/components/PageHeader/PagePathHeader.tsx

@@ -15,7 +15,7 @@ import type { InputValidationResult } from '~/client/util/use-input-validator';
 import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
 import type { IPageForItem } from '~/interfaces/page';
 import LinkedPagePath from '~/models/linked-page-path';
-import { usePageSelectModal } from '~/stores/modal';
+import { usePageSelectModalActions } from '~/states/ui/modal/page-select';
 
 import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
 import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
@@ -47,7 +47,7 @@ export const PagePathHeader = memo((props: Props): JSX.Element => {
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const [isHover, setHover] = useState(false);
 
-  const { open: openPageSelectModal } = usePageSelectModal();
+  const { open: openPageSelectModal } = usePageSelectModalActions();
 
   const [validationResult, setValidationResult] = useState<InputValidationResult>();
 

apps/app/src/client/components/PageList/PageListItemL.tsx

@@ -28,8 +28,8 @@ import LinkedPagePath from '~/models/linked-page-path';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
 import { usePageDuplicateModalActions } from '~/states/ui/modal/page-duplicate';
 import { usePageRenameModalActions } from '~/states/ui/modal/page-rename';
+import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
 import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
-import { usePutBackPageModal } from '~/stores/modal';
 import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
@@ -89,7 +89,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
   const { open: openDuplicateModal } = usePageDuplicateModalActions();
   const { open: openRenameModal } = usePageRenameModalActions();
   const { open: openDeleteModal } = usePageDeleteModalActions();
-  const { open: openPutBackPageModal } = usePutBackPageModal();
+  const { open: openPutBackPageModal } = usePutBackPageModalActions();
 
   const shouldFetch = isSelected && (pageData != null || pageMeta != null);
   const { data: pageInfo } = useSWRxPageInfo(shouldFetch ? pageData?._id : null);

apps/app/src/client/services/create-page/use-create-page.tsx

@@ -8,7 +8,7 @@ import { toastWarning } from '~/client/util/toastr';
 import type { IApiv3PageCreateParams } from '~/interfaces/apiv3';
 import { useCurrentPagePath } from '~/states/page';
 import { useEditorMode, EditorMode } from '~/states/ui/editor';
-import { useGrantedGroupsInheritanceSelectModal } from '~/stores/modal';
+import { useGrantedGroupsInheritanceSelectModalActions } from '~/states/ui/modal/granted-groups-inheritance-select';
 import { useIsUntitledPage } from '~/stores/ui';
 
 import { createPage } from './create-page';
@@ -53,7 +53,7 @@ export const useCreatePage: UseCreatePage = () => {
   const currentPagePath = useCurrentPagePath();
   const { setEditorMode } = useEditorMode();
   const { mutate: mutateIsUntitledPage } = useIsUntitledPage();
-  const { open: openGrantedGroupsInheritanceSelectModal, close: closeGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModal();
+  const { open: openGrantedGroupsInheritanceSelectModal, close: closeGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModalActions();
 
   const [isCreating, setCreating] = useState(false);
 

apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts

@@ -10,7 +10,8 @@ import { extractRemoteRevisionDataFromErrorObj, useUpdatePage } from '~/client/s
 import { useCurrentPageData, useSetRemoteLatestPageData } from '~/states/page';
 import type { RemoteRevisionData } from '~/states/page';
 import { useShareLinkId } from '~/states/page/hooks';
-import { useConflictDiffModal, useDrawioModal } from '~/stores/modal';
+import { useDrawioModalActions } from '~/states/ui/modal/drawio';
+import { useConflictDiffModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
 
@@ -32,7 +33,7 @@ export const useDrawioModalLauncherForView = (opts?: {
 
   const currentPage = useCurrentPageData();
 
-  const { open: openDrawioModal } = useDrawioModal();
+  const { open: openDrawioModal } = useDrawioModalActions();
 
   const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
 

apps/app/src/client/services/side-effects/handsontable-modal-launcher-for-view.ts

@@ -10,7 +10,8 @@ import { extractRemoteRevisionDataFromErrorObj, useUpdatePage } from '~/client/s
 import { useCurrentPageData, useSetRemoteLatestPageData } from '~/states/page';
 import type { RemoteRevisionData } from '~/states/page';
 import { useShareLinkId } from '~/states/page/hooks';
-import { useHandsontableModal, useConflictDiffModal } from '~/stores/modal';
+import { useHandsontableModalActions } from '~/states/ui/modal/handsontable';
+import { useConflictDiffModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
 
@@ -32,7 +33,7 @@ export const useHandsontableModalLauncherForView = (opts?: {
 
   const currentPage = useCurrentPageData();
 
-  const { open: openHandsontableModal } = useHandsontableModal();
+  const { open: openHandsontableModal } = useHandsontableModalActions();
 
   const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
 

apps/app/src/components/PageView/PageAlerts/TrashPageAlert.tsx

@@ -9,7 +9,7 @@ import {
   useCurrentPageData, useCurrentPagePath, useIsTrashPage, useFetchCurrentPage,
 } from '~/states/page';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
-import { usePutBackPageModal } from '~/stores/modal';
+import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
 import { useSWRxPageInfo } from '~/stores/page';
 import { mutateRecentlyUpdated } from '~/stores/page-listing';
 import { useIsAbleToShowTrashPageManagementButtons } from '~/stores/ui';
@@ -35,7 +35,7 @@ export const TrashPageAlert = (): JSX.Element => {
   const { data: pageInfo } = useSWRxPageInfo(pageId ?? null);
 
   const { open: openDeleteModal } = usePageDeleteModalActions();
-  const { open: openPutBackPageModal } = usePutBackPageModal();
+  const { open: openPutBackPageModal } = usePutBackPageModalActions();
   const currentPagePath = useCurrentPagePath();
 
   const { fetchCurrentPage } = useFetchCurrentPage();

apps/app/src/states/ui/modal/drawio.ts

@@ -0,0 +1,40 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// Draw.io modal save handler
+type DrawioModalSaveHandler = (drawioMxFile: string) => void;
+
+// Draw.io modal state type
+type DrawioModalState = {
+  isOpened: boolean;
+  drawioMxFile?: string;
+  onSave?: DrawioModalSaveHandler;
+};
+
+// Atom definition
+const drawioModalAtom = atom<DrawioModalState>({
+  isOpened: false,
+});
+
+// Read-only hook
+export const useDrawioModalStatus = () => {
+  return useAtomValue(drawioModalAtom);
+};
+
+// Actions-only hook
+export const useDrawioModalActions = () => {
+  const setState = useSetAtom(drawioModalAtom);
+
+  const open = (drawioMxFile: string, onSave?: DrawioModalSaveHandler) => {
+    setState({
+      isOpened: true,
+      drawioMxFile,
+      onSave,
+    });
+  };
+
+  const close = () => {
+    setState({ isOpened: false, drawioMxFile: '', onSave: undefined });
+  };
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/granted-groups-inheritance-select.ts

@@ -0,0 +1,39 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// State type for granted groups inheritance select modal
+type GrantedGroupsInheritanceSelectModalState = {
+  isOpened: boolean;
+  onCreateBtnClick?: (
+    onlyInheritUserRelatedGrantedGroups?: boolean,
+  ) => Promise<void>;
+};
+
+// Atom definition
+const grantedGroupsInheritanceSelectModalAtom =
+  atom<GrantedGroupsInheritanceSelectModalState>({
+    isOpened: false,
+  });
+
+// Read-only hook
+export const useGrantedGroupsInheritanceSelectModalStatus = () => {
+  return useAtomValue(grantedGroupsInheritanceSelectModalAtom);
+};
+
+// Actions-only hook
+export const useGrantedGroupsInheritanceSelectModalActions = () => {
+  const setState = useSetAtom(grantedGroupsInheritanceSelectModalAtom);
+
+  const open = (
+    onCreateBtnClick?: (
+      onlyInheritUserRelatedGrantedGroups?: boolean,
+    ) => Promise<void>,
+  ) => {
+    setState({ isOpened: true, onCreateBtnClick });
+  };
+
+  const close = () => {
+    setState({ isOpened: false });
+  };
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/handsontable.ts

@@ -0,0 +1,67 @@
+import { MarkdownTable } from '@growi/editor';
+import { atom, useAtom, useSetAtom } from 'jotai';
+
+// Handler type definitions
+type HandsontableModalSaveHandler = (table: MarkdownTable) => void;
+
+// Handsontable modal state type
+type HandsontableModalState = {
+  isOpened: boolean;
+  table?: MarkdownTable;
+  autoFormatMarkdownTable?: boolean;
+  onSave?: HandsontableModalSaveHandler;
+};
+
+// Default markdown table creation function
+const defaultMarkdownTable = () => {
+  return new MarkdownTable(
+    [
+      ['col1', 'col2', 'col3'],
+      ['', '', ''],
+      ['', '', ''],
+    ],
+    {
+      align: ['', '', ''],
+    },
+  );
+};
+
+// Atom definition
+const handsontableModalAtom = atom<HandsontableModalState>({
+  isOpened: false,
+});
+
+// Read-only hook
+export const useHandsontableModalStatus = () => {
+  const [state] = useAtom(handsontableModalAtom);
+  return state;
+};
+
+// Actions-only hook
+export const useHandsontableModalActions = () => {
+  const setState = useSetAtom(handsontableModalAtom);
+
+  const open = (
+    table: MarkdownTable,
+    autoFormatMarkdownTable?: boolean,
+    onSave?: HandsontableModalSaveHandler,
+  ) => {
+    setState({
+      isOpened: true,
+      table,
+      autoFormatMarkdownTable,
+      onSave,
+    });
+  };
+
+  const close = () => {
+    setState({
+      isOpened: false,
+      table: defaultMarkdownTable(),
+      autoFormatMarkdownTable: false,
+      onSave: undefined,
+    });
+  };
+
+  return { open, close };
+};

apps/app/src/stores/modal.tsx

@@ -1,124 +1,19 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import type {
   IAttachmentHasId, IUserGroupHasId,
 } from '@growi/core';
 import { useSWRStatic } from '@growi/core/dist/swr';
-import { MarkdownTable } from '@growi/editor';
 import type { SWRResponse } from 'swr';
 
 import type { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import type {
-  OnPutBackedFunction, onDeletedBookmarkFolderFunction, OnSelectedFunction,
+  onDeletedBookmarkFolderFunction,
 } from '~/interfaces/ui';
 import loggerFactory from '~/utils/logger';
 
 const logger = loggerFactory('growi:stores:modal');
 
-/*
-* GrantedGroupsInheritanceSelectModal
-*/
-type GrantedGroupsInheritanceSelectModalStatus = {
-  isOpened: boolean,
-  onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>,
-}
-
-type GrantedGroupsInheritanceSelectModalStatusUtils = {
-  open(onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>): Promise<GrantedGroupsInheritanceSelectModalStatus | undefined>
-  close(): Promise<GrantedGroupsInheritanceSelectModalStatus | undefined>
-}
-
-export const useGrantedGroupsInheritanceSelectModal = (
-    status?: GrantedGroupsInheritanceSelectModalStatus,
-): SWRResponse<GrantedGroupsInheritanceSelectModalStatus, Error> & GrantedGroupsInheritanceSelectModalStatusUtils => {
-  const initialData: GrantedGroupsInheritanceSelectModalStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<GrantedGroupsInheritanceSelectModalStatus, Error>(
-    'grantedGroupsInheritanceSelectModalStatus', status, { fallbackData: initialData },
-  );
-
-  const { mutate } = swrResponse;
-
-  return {
-    ...swrResponse,
-    open: useCallback(
-      (onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>) => mutate({ isOpened: true, onCreateBtnClick }), [mutate],
-    ),
-    close: useCallback(() => mutate({ isOpened: false }), [mutate]),
-  };
-};
-
-/*
-* PutBackPageModal
-*/
-export type IPageForPagePutBackModal = {
-  pageId: string,
-  path: string
-}
-
-export type IPutBackPageModalOption = {
-  onPutBacked?: OnPutBackedFunction,
-}
-
-type PutBackPageModalStatus = {
-  isOpened: boolean,
-  page?: IPageForPagePutBackModal,
-  opts?: IPutBackPageModalOption,
-}
-
-type PutBackPageModalUtils = {
-  open(
-    page?: IPageForPagePutBackModal,
-    opts?: IPutBackPageModalOption,
-  ): Promise<PutBackPageModalStatus | undefined>
-  close(): Promise<PutBackPageModalStatus | undefined>
-}
-
-export const usePutBackPageModal = (status?: PutBackPageModalStatus): SWRResponse<PutBackPageModalStatus, Error> & PutBackPageModalUtils => {
-  const initialData: PutBackPageModalStatus = useMemo(() => ({
-    isOpened: false,
-    page: { pageId: '', path: '' },
-  }), []);
-  const swrResponse = useSWRStatic<PutBackPageModalStatus, Error>('putBackPageModalStatus', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: (
-        page: IPageForPagePutBackModal, opts?: IPutBackPageModalOption,
-    ) => swrResponse.mutate({
-      isOpened: true, page, opts,
-    }),
-    close: () => swrResponse.mutate({ isOpened: false, page: { pageId: '', path: '' } }),
-  };
-};
-
-
-/*
-* PagePresentationModal
-*/
-type PresentationModalStatus = {
-  isOpened: boolean,
-}
-
-type PresentationModalStatusUtils = {
-  open(): Promise<PresentationModalStatus | undefined>
-  close(): Promise<PresentationModalStatus | undefined>
-}
-
-export const usePagePresentationModal = (
-    status?: PresentationModalStatus,
-): SWRResponse<PresentationModalStatus, Error> & PresentationModalStatusUtils => {
-  const initialData: PresentationModalStatus = {
-    isOpened: false,
-  };
-  const swrResponse = useSWRStatic<PresentationModalStatus, Error>('presentationModalStatus', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: () => swrResponse.mutate({ isOpened: true }, { revalidate: true }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};
-
 
 /*
  * PrivateLegacyPagesMigrationModal
@@ -219,114 +114,6 @@ export const useUpdateUserGroupConfirmModal = (): SWRResponse<UpdateUserGroupCon
 };
 
 
-/*
-* DrawioModal
-*/
-
-type DrawioModalSaveHandler = (drawioMxFile: string) => void;
-
-type DrawioModalStatus = {
-  isOpened: boolean,
-  drawioMxFile: string,
-  onSave?: DrawioModalSaveHandler,
-}
-
-type DrawioModalStatusUtils = {
-  open(
-    drawioMxFile: string,
-    onSave?: DrawioModalSaveHandler,
-  ): void,
-  close(): void,
-}
-
-export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioModalStatus, Error> & DrawioModalStatusUtils => {
-  const initialData: DrawioModalStatus = {
-    isOpened: false,
-    drawioMxFile: '',
-  };
-  const swrResponse = useSWRStatic<DrawioModalStatus, Error>('drawioModalStatus', status, { fallbackData: initialData });
-
-  const { mutate } = swrResponse;
-
-  const open = useCallback((drawioMxFile: string, onSave?: DrawioModalSaveHandler): void => {
-    mutate({ isOpened: true, drawioMxFile, onSave });
-  }, [mutate]);
-
-  const close = useCallback((): void => {
-    mutate({ isOpened: false, drawioMxFile: '', onSave: undefined });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};
-
-/*
-* HandsonTableModal
-*/
-type HandsonTableModalSaveHandler = (table: MarkdownTable) => void;
-
-type HandsontableModalStatus = {
-  isOpened: boolean,
-  table: MarkdownTable,
-  autoFormatMarkdownTable?: boolean,
-  // onSave is passed only when editing table directly from the page.
-  onSave?: HandsonTableModalSaveHandler
-}
-
-type HandsontableModalStatusUtils = {
-  open(
-    table: MarkdownTable,
-    autoFormatMarkdownTable?: boolean,
-    onSave?: HandsonTableModalSaveHandler
-  ): void
-  close(): void
-}
-
-const defaultMarkdownTable = () => {
-  return new MarkdownTable(
-    [
-      ['col1', 'col2', 'col3'],
-      ['', '', ''],
-      ['', '', ''],
-    ],
-    {
-      align: ['', '', ''],
-    },
-  );
-};
-
-export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
-  const initialData: HandsontableModalStatus = {
-    isOpened: false,
-    table: defaultMarkdownTable(),
-    autoFormatMarkdownTable: false,
-  };
-
-  const swrResponse = useSWRStatic<HandsontableModalStatus, Error>('handsontableModalStatus', status, { fallbackData: initialData });
-
-  const { mutate } = swrResponse;
-
-  const open = useCallback((table: MarkdownTable, autoFormatMarkdownTable?: boolean, onSave?: HandsonTableModalSaveHandler): void => {
-    mutate({
-      isOpened: true, table, autoFormatMarkdownTable, onSave,
-    });
-  }, [mutate]);
-  const close = useCallback((): void => {
-    mutate({
-      isOpened: false, table: defaultMarkdownTable(), autoFormatMarkdownTable: false, onSave: undefined,
-    });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};
-
 /*
  * ConflictDiffModal
  */
@@ -449,41 +236,6 @@ export const useDeleteAttachmentModal = (): SWRResponse<DeleteAttachmentModalSta
   };
 };
 
-/*
-* PageSelectModal
-*/
-type IPageSelectModalOption = {
-  isHierarchicalSelectionMode?: boolean,
-  onSelected?: OnSelectedFunction,
-}
-
-type PageSelectModalStatus = {
-  isOpened: boolean
-  opts?: IPageSelectModalOption
-}
-
-type PageSelectModalStatusUtils = {
-  open(opts?: IPageSelectModalOption): void
-  close(): void
-}
-
-export const usePageSelectModal = (
-    status?: PageSelectModalStatus,
-): SWRResponse<PageSelectModalStatus, Error> & PageSelectModalStatusUtils => {
-  const initialStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<PageSelectModalStatus, Error>('PageSelectModal', status, { fallbackData: initialStatus });
-
-  return {
-    ...swrResponse,
-    open: (
-        opts?: IPageSelectModalOption,
-    ) => swrResponse.mutate({
-      isOpened: true, opts,
-    }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};
-
 /*
 * OverwriteMergeModeModal
 */