WIP: migrate hooks for modal

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

@@ -12,8 +12,8 @@ import {
 
 import { useCurrentPageData } from '~/states/page';
 import { useRendererConfig } from '~/states/server-configurations';
+import { usePresentationModalActions, usePresentationModalStatus } from '~/states/ui/modal/page-presentation';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
-import { usePagePresentationModal } from '~/stores/modal';
 import { usePresentationViewOptions } from '~/stores/renderer';
 
 import { RendererErrorMessage } from './Common/RendererErrorMessage';
@@ -33,7 +33,8 @@ const Presentation = dynamic<PresentationProps>(() => import('./Presentation/Pre
 
 const PagePresentationModal = (): JSX.Element => {
 
-  const { data: presentationModalData, close: closePresentationModal } = usePagePresentationModal();
+  const presentationModalData = usePresentationModalStatus();
+  const { close: closePresentationModal } = usePresentationModalActions();
 
   const { isDarkMode } = useNextThemes();
   const fullscreen = useFullScreen();

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

@@ -15,7 +15,7 @@ import SimpleBar from 'simplebar-react';
 import type { IPageForItem } from '~/interfaces/page';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageData } from '~/states/page';
-import { usePageSelectModal } from '~/stores/modal';
+import { usePageSelectModalStatus, usePageSelectModalActions } from '~/states/ui/modal/page-select';
 
 import { ItemsTree } from '../ItemsTree';
 import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
@@ -23,10 +23,7 @@ import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 import { TreeItemForModal } from './TreeItemForModal';
 
 const PageSelectModalSubstance: FC = () => {
-  const {
-    data: PageSelectModalData,
-    close: closeModal,
-  } = usePageSelectModal();
+  const { close: closeModal } = usePageSelectModalActions();
 
   const [clickedParentPage, setClickedParentPage] = useState<IPageForItem | null>(null);
   const [isIncludeSubPage, setIsIncludeSubPage] = useState(true);
@@ -36,9 +33,9 @@ const PageSelectModalSubstance: FC = () => {
   const isGuestUser = useIsGuestUser();
   const isReadOnlyUser = useIsReadOnlyUser();
   const currentPage = useCurrentPageData();
-  const { data: pageSelectModalData } = usePageSelectModal();
+  const { opts } = usePageSelectModalStatus();
 
-  const isHierarchicalSelectionMode = pageSelectModalData?.opts?.isHierarchicalSelectionMode ?? false;
+  const isHierarchicalSelectionMode = opts?.isHierarchicalSelectionMode ?? false;
 
   const onClickTreeItem = useCallback((page: IPageForItem) => {
     const parentPagePath = page.path;
@@ -55,13 +52,14 @@ const PageSelectModalSubstance: FC = () => {
     closeModal();
   }, [closeModal]);
 
+  const { onSelected } = opts ?? {};
   const onClickDone = useCallback(() => {
     if (clickedParentPage != null) {
-      PageSelectModalData?.opts?.onSelected?.(clickedParentPage, isIncludeSubPage);
+      onSelected?.(clickedParentPage, isIncludeSubPage);
     }
 
     closeModal();
-  }, [PageSelectModalData?.opts, clickedParentPage, closeModal, isIncludeSubPage]);
+  }, [clickedParentPage, closeModal, isIncludeSubPage, onSelected]);
 
   const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
 
@@ -121,7 +119,8 @@ const PageSelectModalSubstance: FC = () => {
 };
 
 export const PageSelectModal = (): JSX.Element => {
-  const { data: pageSelectModalData, close: closePageSelectModal } = usePageSelectModal();
+  const pageSelectModalData = usePageSelectModalStatus();
+  const { close: closePageSelectModal } = usePageSelectModalActions();
   const isOpen = pageSelectModalData?.isOpened ?? false;
 
   if (!isOpen) {

apps/app/src/client/components/PutbackPageModal.jsx

@@ -7,7 +7,7 @@ import {
 } from 'reactstrap';
 
 import { apiPost } from '~/client/util/apiv1-client';
-import { usePutBackPageModal } from '~/stores/modal';
+import { usePutBackPageModalActions, usePutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
 import { mutateAllPageInfo } from '~/stores/page';
 
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
@@ -15,7 +15,8 @@ import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 const PutBackPageModal = () => {
   const { t } = useTranslation();
 
-  const { data: pageDataToRevert, close: closePutBackPageModal } = usePutBackPageModal();
+  const pageDataToRevert = usePutBackPageModalStatus();
+  const { close: closePutBackPageModal } = usePutBackPageModalActions();
   const { isOpened, page } = pageDataToRevert;
   const { pageId, path } = page;
   const onPutBacked = pageDataToRevert.opts?.onPutBacked;

apps/app/src/states/ui/modal/page-presentation.ts

@@ -0,0 +1,42 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+export type PresentationModalStatus = {
+  isOpened: boolean;
+};
+
+export type PresentationModalActions = {
+  open: () => void;
+  close: () => void;
+};
+
+// Atom for presentation modal state
+const presentationModalAtom = atom<PresentationModalStatus>({
+  isOpened: false,
+});
+
+/**
+ * Hook for managing presentation modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const usePresentationModalStatus = (): PresentationModalStatus => {
+  return useAtomValue(presentationModalAtom);
+};
+
+/**
+ * Hook for managing presentation modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const usePresentationModalActions = (): PresentationModalActions => {
+  const setStatus = useSetAtom(presentationModalAtom);
+
+  const open = useCallback(() => {
+    setStatus({ isOpened: true });
+  }, [setStatus]);
+
+  const close = useCallback(() => {
+    setStatus({ isOpened: false });
+  }, [setStatus]);
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/page-select.ts

@@ -0,0 +1,53 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import type { OnSelectedFunction } from '../../../interfaces/ui';
+
+type IPageSelectModalOption = {
+  isHierarchicalSelectionMode?: boolean;
+  onSelected?: OnSelectedFunction;
+};
+
+export type PageSelectModalStatus = {
+  isOpened: boolean;
+  opts?: IPageSelectModalOption;
+};
+
+export type PageSelectModalActions = {
+  open: (opts?: IPageSelectModalOption) => void;
+  close: () => void;
+};
+
+// Atom for page select modal state
+const pageSelectModalAtom = atom<PageSelectModalStatus>({
+  isOpened: false,
+});
+
+/**
+ * Hook for managing page select modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const usePageSelectModalStatus = (): PageSelectModalStatus => {
+  return useAtomValue(pageSelectModalAtom);
+};
+
+/**
+ * Hook for managing page select modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const usePageSelectModalActions = (): PageSelectModalActions => {
+  const setStatus = useSetAtom(pageSelectModalAtom);
+
+  const open = useCallback(
+    (opts?: IPageSelectModalOption) => {
+      setStatus({ isOpened: true, opts });
+    },
+    [setStatus],
+  );
+
+  const close = useCallback(() => {
+    setStatus({ isOpened: false, opts: undefined });
+  }, [setStatus]);
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/put-back-page.ts

@@ -0,0 +1,66 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import type { OnPutBackedFunction } from '../../../interfaces/ui';
+
+type IPageForPagePutBackModal = {
+  pageId: string;
+  path: string;
+};
+
+type IPutBackPageModalOption = {
+  onPutBacked?: OnPutBackedFunction;
+};
+
+export type PutBackPageModalStatus = {
+  isOpened: boolean;
+  page?: IPageForPagePutBackModal;
+  opts?: IPutBackPageModalOption;
+};
+
+export type PutBackPageModalActions = {
+  open: (
+    page: IPageForPagePutBackModal,
+    opts?: IPutBackPageModalOption,
+  ) => void;
+  close: () => void;
+};
+
+// Atom for put back page modal state
+const putBackPageModalAtom = atom<PutBackPageModalStatus>({
+  isOpened: false,
+  page: { pageId: '', path: '' },
+});
+
+/**
+ * Hook for managing put back page modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const usePutBackPageModalStatus = (): PutBackPageModalStatus => {
+  return useAtomValue(putBackPageModalAtom);
+};
+
+/**
+ * Hook for managing put back page modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const usePutBackPageModalActions = (): PutBackPageModalActions => {
+  const setStatus = useSetAtom(putBackPageModalAtom);
+
+  const open = useCallback(
+    (page: IPageForPagePutBackModal, opts?: IPutBackPageModalOption) => {
+      setStatus({ isOpened: true, page, opts });
+    },
+    [setStatus],
+  );
+
+  const close = useCallback(() => {
+    setStatus({
+      isOpened: false,
+      page: { pageId: '', path: '' },
+      opts: undefined,
+    });
+  }, [setStatus]);
+
+  return { open, close };
+};