WIP: migrate hooks for modal

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

@@ -11,7 +11,7 @@ import {
 } from 'reactstrap';
 
 import { useIsSharedUser } from '~/states/context';
-import { useDescendantsPageListModal } from '~/stores/modal';
+import { useDescendantsPageListModalActions, useDescendantsPageListModalStatus } from '~/states/ui/modal/descendants-page-list';
 import { useIsDeviceLargerThanLg } from '~/stores/ui';
 
 import { CustomNavDropdown, CustomNavTab } from './CustomNavigation/CustomNav';
@@ -33,7 +33,8 @@ export const DescendantsPageListModal = (): JSX.Element => {
 
   const isSharedUser = useIsSharedUser();
 
-  const { data: status, close } = useDescendantsPageListModal();
+  const status = useDescendantsPageListModalStatus();
+  const { close } = useDescendantsPageListModalActions();
 
   const { events } = useRouter();
 

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

@@ -22,7 +22,7 @@ import {
   useRemoteRevisionLastUpdatedAt,
   useRemoteRevisionLastUpdateUser,
 } from '~/states/page';
-import { useConflictDiffModal } from '~/stores/modal';
+import { useConflictDiffModalActions, useConflictDiffModalStatus } from '~/states/ui/modal/conflict-diff';
 
 import styles from './ConflictDiffModal.module.scss';
 
@@ -50,7 +50,8 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
   const [isModalExpanded, setIsModalExpanded] = useState<boolean>(false);
 
   const { t } = useTranslation();
-  const { data: conflictDiffModalStatus, close: closeConflictDiffModal } = useConflictDiffModal();
+  const conflictDiffModalStatus = useConflictDiffModalStatus();
+  const { close: closeConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.DIFF);
 
   const selectRevisionHandler = useCallback((selectedRevision: string) => {
@@ -191,7 +192,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
 export const ConflictDiffModal = (): JSX.Element => {
   const currentUser = useCurrentUser();
   const currentPage = useCurrentPageData();
-  const { data: conflictDiffModalStatus } = useConflictDiffModal();
+  const conflictDiffModalStatus = useConflictDiffModalStatus();
 
   // state for latest page
   const remoteRevisionId = useRemoteRevisionId();

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

@@ -13,8 +13,8 @@ import { SocketEventName } from '~/interfaces/websocket';
 import type { RemoteRevisionData } from '~/states/page';
 import { useCurrentPageData, useCurrentPageId, useSetRemoteLatestPageData } from '~/states/page';
 import { EditorMode, useEditorMode } from '~/states/ui/editor';
+import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
 import { usePageStatusAlert } from '~/stores/alert';
-import { useConflictDiffModal } from '~/stores/modal';
 
 
 export type ConflictHandler = (
@@ -36,7 +36,7 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
 
   const pageId = useCurrentPageId();
   const { close: closePageStatusAlert } = usePageStatusAlert();
-  const { close: closeConflictDiffModal } = useConflictDiffModal();
+  const { close: closeConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
@@ -64,7 +64,7 @@ type ConflictResolver = () => ConflictHandler;
 
 export const useConflictResolver: ConflictResolver = () => {
   const { open: openPageStatusAlert } = usePageStatusAlert();
-  const { open: openConflictDiffModal } = useConflictDiffModal();
+  const { open: openConflictDiffModal } = useConflictDiffModalActions();
   const setRemoteLatestPageData = useSetRemoteLatestPageData();
   const generateResolveConflictHandler = useGenerateResolveConflictHandler();
 
@@ -82,10 +82,9 @@ export const useConflictResolver: ConflictResolver = () => {
 export const useConflictEffect = (): void => {
   const currentPage = useCurrentPageData();
   const { close: closePageStatusAlert } = usePageStatusAlert();
-  const { close: closeConflictDiffModal } = useConflictDiffModal();
+  const { close: closeConflictDiffModal, open: openConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
   const { open: openPageStatusAlert } = usePageStatusAlert();
-  const { open: openConflictDiffModal } = useConflictDiffModal();
   const { data: socket } = useGlobalSocket();
   const { editorMode } = useEditorMode();
 

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

@@ -14,8 +14,8 @@ import { scroller } from 'react-scroll';
 
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { showPageSideAuthorsAtom } from '~/states/server-configurations';
+import { useDescendantsPageListModalActions } from '~/states/ui/modal/descendants-page-list';
 import { useTagEditModalActions } from '~/states/ui/modal/tag-edit';
-import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxPageInfo, useSWRxTagsInfo } from '~/stores/page';
 import { useIsAbleToShowTagLabel } from '~/stores/ui';
 
@@ -86,7 +86,7 @@ type PageSideContentsProps = {
 export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
   const { t } = useTranslation();
 
-  const { open: openDescendantPageListModal } = useDescendantsPageListModal();
+  const { open: openDescendantPageListModal } = useDescendantsPageListModalActions();
 
   const { page, isSharedUser } = props;
 

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

@@ -18,8 +18,8 @@ import type { IFormattedSearchResult } from '~/interfaces/search';
 import type { PageMigrationErrorData } from '~/interfaces/websocket';
 import { SocketEventName } from '~/interfaces/websocket';
 import { useIsAdmin } from '~/states/context';
-import type { ILegacyPrivatePage } from '~/stores/modal';
-import { usePrivateLegacyPagesMigrationModal } from '~/stores/modal';
+import type { ILegacyPrivatePage } from '~/states/ui/modal/private-legacy-pages-migration';
+import { usePrivateLegacyPagesMigrationModalActions } from '~/states/ui/modal/private-legacy-pages-migration';
 import { mutatePageTree, useSWRxV5MigrationStatus } from '~/stores/page-listing';
 import {
   useSWRxSearch,
@@ -221,7 +221,7 @@ const PrivateLegacyPages = (): JSX.Element => {
     setOffset(0);
   }, [mutateMigrationStatus]);
 
-  const { open: openModal, close: closeModal } = usePrivateLegacyPagesMigrationModal();
+  const { open: openModal, close: closeModal } = usePrivateLegacyPagesMigrationModalActions();
   const { data: socket } = useGlobalSocket();
 
   useEffect(() => {

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

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
-import { usePrivateLegacyPagesMigrationModal } from '~/stores/modal';
+import { usePrivateLegacyPagesMigrationModalActions, usePrivateLegacyPagesMigrationModalStatus } from '~/states/ui/modal/private-legacy-pages-migration';
 
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 
@@ -14,7 +14,8 @@ import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
 export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const { data: status, close } = usePrivateLegacyPagesMigrationModal();
+  const status = usePrivateLegacyPagesMigrationModalStatus();
+  const { close } = usePrivateLegacyPagesMigrationModalActions();
 
   const isOpened = status?.isOpened ?? false;
 
@@ -28,7 +29,7 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
       return;
     }
 
-    const { pages, onSubmited } = status;
+    const { pages, onSubmit } = status;
     const pageIds = pages.map(page => page.pageId);
     try {
       await apiv3Post<void>('/pages/legacy-pages-migration', {
@@ -36,8 +37,8 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
         isRecursively: isRecursively ? true : undefined,
       });
 
-      if (onSubmited != null) {
-        onSubmited(pages, isRecursively);
+      if (onSubmit != null) {
+        onSubmit(pages, isRecursively);
       }
     }
     catch (err) {

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

@@ -10,8 +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 { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
 import { useDrawioModalActions } from '~/states/ui/modal/drawio';
-import { useConflictDiffModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
 
@@ -35,7 +35,7 @@ export const useDrawioModalLauncherForView = (opts?: {
 
   const { open: openDrawioModal } = useDrawioModalActions();
 
-  const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
+  const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModalActions();
 
   const _updatePage = useUpdatePage();
 

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

@@ -10,8 +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 { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
 import { useHandsontableModalActions } from '~/states/ui/modal/handsontable';
-import { useConflictDiffModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
 
@@ -35,7 +35,7 @@ export const useHandsontableModalLauncherForView = (opts?: {
 
   const { open: openHandsontableModal } = useHandsontableModalActions();
 
-  const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
+  const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModalActions();
 
   const _updatePage = useUpdatePage();
 

apps/app/src/states/ui/modal/conflict-diff.ts

@@ -0,0 +1,43 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// Resolve conflict handler type
+type ResolveConflictHandler = (newMarkdown: string) => Promise<void> | void;
+
+// State type for conflict diff modal
+type ConflictDiffModalState = {
+  isOpened: boolean;
+  requestRevisionBody?: string;
+  onResolve?: ResolveConflictHandler;
+};
+
+// Atom definition
+const conflictDiffModalAtom = atom<ConflictDiffModalState>({
+  isOpened: false,
+});
+
+// Read-only hook
+export const useConflictDiffModalStatus = () => {
+  return useAtomValue(conflictDiffModalAtom);
+};
+
+// Actions-only hook
+export const useConflictDiffModalActions = () => {
+  const setState = useSetAtom(conflictDiffModalAtom);
+
+  const open = (
+    requestRevisionBody: string,
+    onResolve: ResolveConflictHandler,
+  ) => {
+    setState({ isOpened: true, requestRevisionBody, onResolve });
+  };
+
+  const close = () => {
+    setState({
+      isOpened: false,
+      requestRevisionBody: undefined,
+      onResolve: undefined,
+    });
+  };
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/descendants-page-list.ts

@@ -0,0 +1,32 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// State type for descendants page list modal
+type DescendantsPageListModalState = {
+  isOpened: boolean;
+  path?: string;
+};
+
+// Atom definition
+const descendantsPageListModalAtom = atom<DescendantsPageListModalState>({
+  isOpened: false,
+});
+
+// Read-only hook
+export const useDescendantsPageListModalStatus = () => {
+  return useAtomValue(descendantsPageListModalAtom);
+};
+
+// Actions-only hook
+export const useDescendantsPageListModalActions = () => {
+  const setState = useSetAtom(descendantsPageListModalAtom);
+
+  const open = (path: string) => {
+    setState({ isOpened: true, path });
+  };
+
+  const close = () => {
+    setState({ isOpened: false });
+  };
+
+  return { open, close };
+};

apps/app/src/states/ui/modal/private-legacy-pages-migration.ts

@@ -0,0 +1,46 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// Legacy private page type
+export type ILegacyPrivatePage = { pageId: string; path: string };
+
+// Submit handler type for legacy pages migration modal
+export type PrivateLegacyPagesMigrationModalSubmitedHandler = (
+  pages: ILegacyPrivatePage[],
+  isRecursively?: boolean,
+) => void;
+
+// State type for private legacy pages migration modal
+type PrivateLegacyPagesMigrationModalState = {
+  isOpened: boolean;
+  pages?: ILegacyPrivatePage[];
+  onSubmit?: PrivateLegacyPagesMigrationModalSubmitedHandler;
+};
+
+// Atom definition
+const privateLegacyPagesMigrationModalAtom =
+  atom<PrivateLegacyPagesMigrationModalState>({
+    isOpened: false,
+  });
+
+// Read-only hook
+export const usePrivateLegacyPagesMigrationModalStatus = () => {
+  return useAtomValue(privateLegacyPagesMigrationModalAtom);
+};
+
+// Actions-only hook
+export const usePrivateLegacyPagesMigrationModalActions = () => {
+  const setState = useSetAtom(privateLegacyPagesMigrationModalAtom);
+
+  const open = (
+    pages: ILegacyPrivatePage[],
+    onSubmit: PrivateLegacyPagesMigrationModalSubmitedHandler,
+  ) => {
+    setState({ isOpened: true, pages, onSubmit });
+  };
+
+  const close = () => {
+    setState({ isOpened: false });
+  };
+
+  return { open, close };
+};

apps/app/src/stores/modal.tsx

@@ -15,71 +15,6 @@ import loggerFactory from '~/utils/logger';
 const logger = loggerFactory('growi:stores:modal');
 
 
-/*
- * PrivateLegacyPagesMigrationModal
- */
-
-export type ILegacyPrivatePage = { pageId: string, path: string };
-
-export type PrivateLegacyPagesMigrationModalSubmitedHandler = (pages: ILegacyPrivatePage[], isRecursively?: boolean) => void;
-
-type PrivateLegacyPagesMigrationModalStatus = {
-  isOpened: boolean,
-  pages?: ILegacyPrivatePage[],
-  onSubmited?: PrivateLegacyPagesMigrationModalSubmitedHandler,
-}
-
-type PrivateLegacyPagesMigrationModalStatusUtils = {
-  open(pages: ILegacyPrivatePage[], onSubmited?: PrivateLegacyPagesMigrationModalSubmitedHandler): Promise<PrivateLegacyPagesMigrationModalStatus | undefined>,
-  close(): Promise<PrivateLegacyPagesMigrationModalStatus | undefined>,
-}
-
-export const usePrivateLegacyPagesMigrationModal = (
-    status?: PrivateLegacyPagesMigrationModalStatus,
-): SWRResponse<PrivateLegacyPagesMigrationModalStatus, Error> & PrivateLegacyPagesMigrationModalStatusUtils => {
-  const initialData: PrivateLegacyPagesMigrationModalStatus = {
-    isOpened: false,
-    pages: [],
-  };
-  const swrResponse = useSWRStatic<PrivateLegacyPagesMigrationModalStatus, Error>('privateLegacyPagesMigrationModal', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: (pages, onSubmited?) => swrResponse.mutate({
-      isOpened: true, pages, onSubmited,
-    }),
-    close: () => swrResponse.mutate({ isOpened: false, pages: [], onSubmited: undefined }),
-  };
-};
-
-
-/*
-* DescendantsPageListModal
-*/
-type DescendantsPageListModalStatus = {
-  isOpened: boolean,
-  path?: string,
-}
-
-type DescendantsPageListUtils = {
-  open(path: string): Promise<DescendantsPageListModalStatus | undefined>
-  close(): Promise<DescendantsPageListModalStatus | undefined>
-}
-
-export const useDescendantsPageListModal = (
-    status?: DescendantsPageListModalStatus,
-): SWRResponse<DescendantsPageListModalStatus, Error> & DescendantsPageListUtils => {
-
-  const initialData: DescendantsPageListModalStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<DescendantsPageListModalStatus, Error>('descendantsPageListModalStatus', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: (path: string) => swrResponse.mutate({ isOpened: true, path }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};
-
 /*
  * UpdateUserGroupConfirmModal
  */
@@ -114,43 +49,6 @@ export const useUpdateUserGroupConfirmModal = (): SWRResponse<UpdateUserGroupCon
 };
 
 
-/*
- * ConflictDiffModal
- */
-type ResolveConflictHandler = (newMarkdown: string) => Promise<void> | void;
-
-type ConflictDiffModalStatus = {
- isOpened: boolean,
- requestRevisionBody?: string,
- onResolve?: ResolveConflictHandler
-}
-
-type ConflictDiffModalUtils = {
- open(requestRevisionBody: string, onResolveConflict: ResolveConflictHandler): void,
- close(): void,
-}
-
-export const useConflictDiffModal = (): SWRResponse<ConflictDiffModalStatus, Error> & ConflictDiffModalUtils => {
-
-  const initialStatus: ConflictDiffModalStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<ConflictDiffModalStatus, Error>('conflictDiffModal', undefined, { fallbackData: initialStatus });
-  const { mutate } = swrResponse;
-
-  const open = useCallback((requestRevisionBody: string, onResolve: ResolveConflictHandler) => {
-    mutate({ isOpened: true, requestRevisionBody, onResolve });
-  }, [mutate]);
-
-  const close = useCallback(() => {
-    mutate({ isOpened: false });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};
-
 /*
 * BookmarkFolderDeleteModal
 */