migrate states for PageStatusAlert

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

@@ -14,7 +14,7 @@ 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 { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
 
 
 export type ConflictHandler = (
@@ -35,13 +35,13 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
   const { t } = useTranslation();
 
   const pageId = useCurrentPageId();
-  const { close: closePageStatusAlert } = usePageStatusAlert();
+  const { close: closePageStatusAlert } = usePageStatusAlertActions();
   const { close: closeConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
   return useCallback((revisionId, save, saveOptions, onConflict) => {
-    return async(newMarkdown) => {
+    return async (newMarkdown) => {
       const page = await save(revisionId, newMarkdown, saveOptions, onConflict);
       if (page == null) {
         return;
@@ -63,7 +63,7 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
 type ConflictResolver = () => ConflictHandler;
 
 export const useConflictResolver: ConflictResolver = () => {
-  const { open: openPageStatusAlert } = usePageStatusAlert();
+  const { open: openPageStatusAlert } = usePageStatusAlertActions();
   const { open: openConflictDiffModal } = useConflictDiffModalActions();
   const setRemoteLatestPageData = useSetRemoteLatestPageData();
   const generateResolveConflictHandler = useGenerateResolveConflictHandler();
@@ -81,10 +81,9 @@ export const useConflictResolver: ConflictResolver = () => {
 
 export const useConflictEffect = (): void => {
   const currentPage = useCurrentPageData();
-  const { close: closePageStatusAlert } = usePageStatusAlert();
+  const { close: closePageStatusAlert, open: openPageStatusAlert } = usePageStatusAlertActions();
   const { close: closeConflictDiffModal, open: openConflictDiffModal } = useConflictDiffModalActions();
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-  const { open: openPageStatusAlert } = usePageStatusAlert();
   const { data: socket } = useGlobalSocket();
   const { editorMode } = useEditorMode();
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageData, useRemoteRevisionId, useRemoteRevisionLastUpdateUser } from '~/states/page';
 import { useEditorMode } from '~/states/ui/editor';
-import { usePageStatusAlert } from '~/stores/alert';
+import { usePageStatusAlertStatus } from '~/states/ui/modal/page-status-alert';
 
 import { Username } from '../../components/User/Username';
 
@@ -17,7 +17,7 @@ export const PageStatusAlert = (): JSX.Element => {
   const { editorMode } = useEditorMode();
   const isGuestUser = useIsGuestUser();
   const isReadOnlyUser = useIsReadOnlyUser();
-  const { data: pageStatusAlertData } = usePageStatusAlert();
+  const pageStatusAlertData = usePageStatusAlertStatus();
   const remoteRevisionId = useRemoteRevisionId();
   const remoteRevisionLastUpdateUser = useRemoteRevisionLastUpdateUser();
   const pageData = useCurrentPageData();
@@ -48,7 +48,7 @@ export const PageStatusAlert = (): JSX.Element => {
     <div className={`${styles['grw-page-status-alert']} card fixed-bottom animated fadeInUp faster text-bg-warning`}>
       <div className="card-body">
         <p className="card-text grw-card-label-container">
-          { hasResolveConflictHandler
+          {hasResolveConflictHandler
             ? <>{t('modal_resolve_conflict.file_conflicting_with_newer_remote')}</>
             : <><Username user={remoteRevisionLastUpdateUser} /> {t('edited this page')}</>
           }

apps/app/src/client/services/side-effects/page-updated.ts

@@ -6,7 +6,7 @@ import { SocketEventName } from '~/interfaces/websocket';
 import { useCurrentPageData, useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
 import type { RemoteRevisionData } from '~/states/page';
 import { useEditorMode, EditorMode } from '~/states/ui/editor';
-import { usePageStatusAlert } from '~/stores/alert';
+import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
 
 
 export const usePageUpdatedEffect = (): void => {
@@ -17,7 +17,7 @@ export const usePageUpdatedEffect = (): void => {
   const { editorMode } = useEditorMode();
   const currentPage = useCurrentPageData();
   const { fetchCurrentPage } = useFetchCurrentPage();
-  const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlert();
+  const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlertActions();
 
   const remotePageDataUpdateHandler = useCallback((data) => {
     // Set remote page data

apps/app/src/states/ui/modal/page-status-alert.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+import type { EditorMode } from '../editor';
+
+/*
+* PageStatusAlert
+*/
+type OpenPageStatusAlertOptions = {
+  hideEditorMode?: EditorMode;
+  onRefleshPage?: () => void;
+  onResolveConflict?: () => void;
+};
+
+export type PageStatusAlertStatus = {
+  isOpen: boolean;
+  hideEditorMode?: EditorMode;
+  onRefleshPage?: () => void;
+  onResolveConflict?: () => void;
+};
+
+export type PageStatusAlertActions = {
+  open: (options: OpenPageStatusAlertOptions) => void;
+  close: () => void;
+};
+
+// Atom definition
+const pageStatusAlertAtom = atom<PageStatusAlertStatus>({
+  isOpen: false,
+});
+
+// Status hook (read-only, optimized for performance)
+export const usePageStatusAlertStatus = (): PageStatusAlertStatus => {
+  return useAtomValue(pageStatusAlertAtom);
+};
+
+// Actions hook (write-only, optimized for performance)
+export const usePageStatusAlertActions = (): PageStatusAlertActions => {
+  const setStatus = useSetAtom(pageStatusAlertAtom);
+
+  const open = useCallback((options: OpenPageStatusAlertOptions) => {
+    setStatus({ isOpen: true, ...options });
+  }, [setStatus]);
+
+  const close = useCallback(() => {
+    setStatus({ isOpen: false });
+  }, [setStatus]);
+
+  return { open, close };
+};

apps/app/src/stores/alert.tsx

@@ -1,46 +0,0 @@
-import { useCallback } from 'react';
-
-import { useSWRStatic } from '@growi/core/dist/swr';
-import type { SWRResponse } from 'swr';
-
-import type { EditorMode } from '../states/ui/editor';
-
-/*
-* PageStatusAlert
-*/
-type OpenPageStatusAlertOptions = {
-  hideEditorMode?: EditorMode
-  onRefleshPage?: () => void
-  onResolveConflict?: () => void
-}
-
-type PageStatusAlertStatus = {
-  isOpen: boolean
-  hideEditorMode?: EditorMode,
-  onRefleshPage?: () => void
-  onResolveConflict?: () => void
-}
-
-type PageStatusAlertUtils = {
-  open: (openPageStatusAlert: OpenPageStatusAlertOptions) => void,
-  close: () => void,
-}
-export const usePageStatusAlert = (): SWRResponse<PageStatusAlertStatus, Error> & PageStatusAlertUtils => {
-  const initialData: PageStatusAlertStatus = { isOpen: false };
-  const swrResponse = useSWRStatic<PageStatusAlertStatus, Error>('pageStatusAlert', undefined, { fallbackData: initialData });
-  const { mutate } = swrResponse;
-
-  const open = useCallback(({ ...options }) => {
-    mutate({ isOpen: true, ...options });
-  }, [mutate]);
-
-  const close = useCallback(() => {
-    mutate({ isOpen: false });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};