Fixed

packages/app/src/components/PageEditor.tsx

@@ -36,7 +36,6 @@ import loggerFactory from '~/utils/logger';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 import scrollSyncHelper from './PageEditor/ScrollSyncHelper';
-import { useSWRConfig } from 'swr';
 
 
 const logger = loggerFactory('growi:PageEditor');
@@ -70,7 +69,7 @@ const PageEditor = React.memo((): JSX.Element => {
   const { data: isTextlintEnabled } = useIsTextlintEnabled();
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: indentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
-  const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
+  const { mutate: mutateIsEnabledUnsavedWarning, optimisticMutate: optimisticMutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
   const { data: isUploadableFile } = useIsUploadableFile();
   const { data: isUploadableImage } = useIsUploadableImage();
 
@@ -165,7 +164,8 @@ const PageEditor = React.memo((): JSX.Element => {
     if (page == null) {
       return;
     }
-    await mutateIsEnabledUnsavedWarning(false);
+    await optimisticMutateIsEnabledUnsavedWarning(false);
+    // TODO: fix TAICHI
     await router.push(`/${page._id}`);
     mutateEditorMode(EditorMode.View);
   }, [editorMode, save, mutateEditorMode]);
@@ -341,8 +341,9 @@ const PageEditor = React.memo((): JSX.Element => {
     }
     markdownToSave.current = initialValue;
     setMarkdownToPreview(initialValue);
-    mutateIsEnabledUnsavedWarning(false);
-  }, [initialValue, mutateIsEnabledUnsavedWarning]);
+    // mutateIsEnabledUnsavedWarning(false);
+  }, [initialValue]);
+  // }, [initialValue, mutateIsEnabledUnsavedWarning]);
 
   // initial caret line
   useEffect(() => {

packages/app/src/components/PageEditorByHackmd.tsx

@@ -111,6 +111,7 @@ export const PageEditorByHackmd = (): JSX.Element => {
         return;
       }
       await mutateIsEnabledUnsavedWarning(false);
+      // TODO: fix TAICHI
       await router.push(`/${page._id}`);
       mutateEditorMode(EditorMode.View);
     }

packages/app/src/components/SavePageControls.tsx

@@ -13,7 +13,6 @@ import { IPageGrantData } from '~/interfaces/page';
 import {
   useIsEditable, useCurrentPageId, useIsAclEnabled,
 } from '~/stores/context';
-import { useIsEnabledUnsavedWarning } from '~/stores/editor';
 import { useCurrentPagePath } from '~/stores/page';
 import { useSelectedGrant } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';

packages/app/src/components/UnsavedAlertDialog.tsx

@@ -8,10 +8,9 @@ import { useIsEnabledUnsavedWarning } from '~/stores/editor';
 const UnsavedAlertDialog = (): JSX.Element => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { getIsEnabledUnsavedWarningFromCache } = useIsEnabledUnsavedWarning(); // Use getIsEnabledUnsavedWarningFromCache since eventListeners do not wait until states change
+  const { data: isEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
 
   const alertUnsavedWarningByBrowser = useCallback((e) => {
-    const isEnabledUnsavedWarning = getIsEnabledUnsavedWarningFromCache();
     if (isEnabledUnsavedWarning) {
       e.preventDefault();
       // returnValue should be set to show alert dialog
@@ -20,16 +19,15 @@ const UnsavedAlertDialog = (): JSX.Element => {
       e.returnValue = '';
       return;
     }
-  }, [getIsEnabledUnsavedWarningFromCache]);
+  }, [isEnabledUnsavedWarning]);
 
   const alertUnsavedWarningByNextRouter = useCallback(() => {
-    const isEnabledUnsavedWarning = getIsEnabledUnsavedWarningFromCache();
     if (isEnabledUnsavedWarning) {
     // eslint-disable-next-line no-alert
       window.alert(t('page_edit.changes_not_saved'));
     }
     return;
-  }, [getIsEnabledUnsavedWarningFromCache, t]);
+  }, [isEnabledUnsavedWarning, t]);
 
   /*
   * Route changes by Browser

packages/app/src/stores/editor.tsx

@@ -1,5 +1,5 @@
 import { Nullable, withUtils, SWRResponseWithUtils } from '@growi/core';
-import useSWR, { SWRResponse, useSWRConfig } from 'swr';
+import useSWR, { MutatorOptions, SWRResponse, useSWRConfig } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiGet } from '~/client/util/apiv1-client';
@@ -115,19 +115,17 @@ export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<str
 };
 
 type IUtilsIsEnabledUnsavedWarning = {
-  getIsEnabledUnsavedWarningFromCache(): boolean,
+  optimisticMutate(data: boolean, options?: MutatorOptions): Promise<boolean | undefined>,
 };
 
 export const useIsEnabledUnsavedWarning = (): SWRResponseWithUtils<IUtilsIsEnabledUnsavedWarning, boolean, Error> => {
-  const key = 'isEnabledUnsavedWarning';
-
-  const { cache } = useSWRConfig();
-
-  const swrResponse = useStaticSWR<boolean, Error>(key, undefined, { fallbackData: false });
+  const swrResponse = useStaticSWR<boolean, Error>('isEnabledUnsavedWarning');
 
+  // The updateFn should be a promise or asynchronous function to handle the remote mutation
+  // it should return updated data. see: https://swr.vercel.app/docs/mutation#optimistic-updates
   return withUtils(swrResponse, {
-    getIsEnabledUnsavedWarningFromCache() {
-      return cache.get(key);
+    optimisticMutate: async(data: boolean, options: MutatorOptions = {}) => {
+      return swrResponse.mutate(async() => data, { ...options, optimisticData: data });
     },
   });
 };