declear useUnsavedWarning on editor.tsx

create UnsacedAlertDialog component and import it on [[...path]].tsx

packages/app/src/client/util/editor.ts

@@ -25,12 +25,3 @@ export const getOptionsToSave = (
   };
 };
 
-export const isEnabledShowUnsavedWarning = (bool = false) => {
-  return bool;
-}
-
-export const showAlertDialog = (msg): void => {
-  if(isEnabledShowUnsavedWarning()){
-    return window.alert(msg);
-  }
-};

packages/app/src/components/Page.jsx

@@ -76,7 +76,7 @@ class Page extends React.Component {
 
   async saveHandlerForHandsontableModal(markdownTable) {
     const {
-      isSlackEnabled, slackChannels, pageContainer, editorContainer, grant, grantGroupId, grantGroupName, pageTags,
+      isSlackEnabled, slackChannels, pageContainer, editorContainer, grant, grantGroupId, grantGroupName, pageTags, mutateIsEnabledUnsavedWarning,
     } = this.props;
     const optionsToSave = getOptionsToSave(isSlackEnabled, slackChannels, grant, grantGroupId, grantGroupName, pageTags);
 
@@ -89,7 +89,7 @@ class Page extends React.Component {
 
     try {
       // disable unsaved warning
-      isEnabledShowUnsavedWarning(false)
+      mutateIsEnabledUnsavedWarning(false)
 
       // eslint-disable-next-line no-unused-vars
       const { page, tags } = await pageContainer.save(newMarkdown, this.props.editorMode, optionsToSave);
@@ -108,7 +108,7 @@ class Page extends React.Component {
 
   async saveHandlerForDrawioModal(drawioData) {
     const {
-      isSlackEnabled, slackChannels, pageContainer, pageTags, grant, grantGroupId, grantGroupName, editorContainer,
+      isSlackEnabled, slackChannels, pageContainer, pageTags, grant, grantGroupId, grantGroupName, editorContainer, mutateIsEnabledUnsavedWarning,
     } = this.props;
     const optionsToSave = getOptionsToSave(isSlackEnabled, slackChannels, grant, grantGroupId, grantGroupName, pageTags);
 
@@ -121,7 +121,7 @@ class Page extends React.Component {
 
     try {
       // disable unsaved warning
-      isEnabledShowUnsavedWarning(false);
+      mutateIsEnabledUnsavedWarning(false);
 
       // eslint-disable-next-line no-unused-vars
       const { page, tags } = await pageContainer.save(newMarkdown, this.props.editorMode, optionsToSave);
@@ -194,6 +194,7 @@ const PageWrapper = (props) => {
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
+  const { mutate: mutateIsEnabledUnsavedWarning } = useUnsavedWarning();
 
   const pageRef = useRef(null);
 
@@ -244,6 +245,7 @@ const PageWrapper = (props) => {
       grant={grant}
       grantGroupId={grantGroupId}
       grantGroupName={grantGroupName}
+      mutateIsEnabledUnsavedWarning={mutateIsEnabledUnsavedWarning}
     />
   );
 };

packages/app/src/components/PageEditor.tsx

@@ -2,8 +2,6 @@ import React, {
   useCallback, useEffect, useMemo, useRef, useState,
 } from 'react';
 
-import { isEnabledShowUnsavedWarning } from '~/client/util/editor';
-
 import EventEmitter from 'events';
 
 import { envUtils } from '@growi/core';
@@ -20,6 +18,7 @@ import {
 } from '~/stores/context';
 import {
   useCurrentIndentSize, useSWRxSlackChannels, useIsSlackEnabled, useIsTextlintEnabled, usePageTagsForEditors,
+  useUnsavedWarning
 } from '~/stores/editor';
 import {
   EditorMode,
@@ -98,6 +97,7 @@ const PageEditor = (props: Props): JSX.Element => {
   const { data: isTextlintEnabled } = useIsTextlintEnabled();
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: indentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
+  const { mutate: mutateIsEnabledUnsavedWarning } = useUnsavedWarning();
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const [markdown, setMarkdown] = useState<string>(pageContainer.state.markdown!);
@@ -131,7 +131,7 @@ const PageEditor = (props: Props): JSX.Element => {
 
     try {
       // disable unsaved warning
-      isEnabledShowUnsavedWarning(false)
+      mutateIsEnabledUnsavedWarning(false)
 
       // eslint-disable-next-line no-unused-vars
       const { tags } = await pageContainer.save(markdown, editorMode, optionsToSave);
@@ -357,7 +357,7 @@ const PageEditor = (props: Props): JSX.Element => {
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (pageContainer.state.markdown! !== markdown) {
-      isEnabledShowUnsavedWarning(true);
+      mutateIsEnabledUnsavedWarning(true);
     }
   }, [editorContainer, markdown, pageContainer.state.markdown]);
 

packages/app/src/components/PageEditorByHackmd.jsx

@@ -3,14 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { isEnabledShowUnsavedWarning } from '~/client/util/editor';
 import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { apiPost } from '~/client/util/apiv1-client';
 import { getOptionsToSave } from '~/client/util/editor';
 import { useCurrentPagePath, useCurrentPageId } from '~/stores/context';
-import { useSWRxSlackChannels, useIsSlackEnabled, usePageTagsForEditors } from '~/stores/editor';
+import { useSWRxSlackChannels, useIsSlackEnabled, usePageTagsForEditors,useUnsavedWarning } from '~/stores/editor';
 import {
   useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -178,7 +177,7 @@ class PageEditorByHackmd extends React.Component {
 
     try {
       // disable unsaved warning
-      isEnabledShowUnsavedWarning(false)
+      mutateIsEnabledUnsavedWarning(false)
 
       // eslint-disable-next-line no-unused-vars
       const { page, tags } = await pageContainer.save(markdown, this.props.editorMode, optionsToSave);
@@ -213,7 +212,7 @@ class PageEditorByHackmd extends React.Component {
     }
 
     // enable unsaved warning
-    isEnabledShowUnsavedWarning(true);
+    mutateIsEnabledUnsavedWarning(true);
 
     const params = {
       pageId: pageContainer.state.pageId,

packages/app/src/components/SavePageControls.jsx

@@ -12,11 +12,10 @@ import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import { getOptionsToSave } from '~/client/util/editor';
-import { isEnabledShowUnsavedWarning } from '~/client/util/editor';
 
 // TODO: remove this when omitting unstated is completed
 import { useIsEditable, useCurrentPageId } from '~/stores/context';
-import { usePageTagsForEditors } from '~/stores/editor';
+import { usePageTagsForEditors, useUnsavedWarning } from '~/stores/editor';
 import {
   useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -55,7 +54,7 @@ class SavePageControls extends React.Component {
       isSlackEnabled, slackChannels, grant, grantGroupId, grantGroupName, pageContainer, editorContainer, pageTags,
     } = this.props;
     // disable unsaved warning
-    isEnabledShowUnsavedWarning(false)
+    mutateIsEnabledUnsavedWarning(false)
 
     try {
       // save
@@ -81,7 +80,7 @@ class SavePageControls extends React.Component {
       isSlackEnabled, slackChannels, grant, grantGroupId, grantGroupName, pageContainer, editorContainer, pageTags,
     } = this.props;
     // disable unsaved warning
-    isEnabledShowUnsavedWarning(false)
+    mutateIsEnabledUnsavedWarning(false)
     // save
     const currentOptionsToSave = getOptionsToSave(isSlackEnabled, slackChannels, grant, grantGroupId, grantGroupName, pageTags);
     const optionsToSave = Object.assign(currentOptionsToSave, {
@@ -147,6 +146,7 @@ const SavePageControlsWrapper = (props) => {
   const { data: grantGroupName, mutate: mutateGrantGroupName } = useSelectedGrantGroupName();
   const { data: pageId } = useCurrentPageId();
   const { data: pageTags } = usePageTagsForEditors(pageId);
+  const { mutate: mutateIsEnabledUnsavedWarning} = useUnsavedWarning();
 
 
   if (isEditable == null || editorMode == null) {
@@ -168,6 +168,7 @@ const SavePageControlsWrapper = (props) => {
       mutateGrant={mutateGrant}
       mutateGrantGroupId={mutateGrantGroupId}
       mutateGrantGroupName={mutateGrantGroupName}
+      mutateIsEnabledUnsavedWarning={mutateIsEnabledUnsavedWarning}
       pageTags={pageTags}
     />
   );
@@ -191,6 +192,7 @@ SavePageControls.propTypes = {
   mutateGrant: PropTypes.func,
   mutateGrantGroupId: PropTypes.func,
   mutateGrantGroupName: PropTypes.func,
+  mutateIsEnabledUnsavedWarning: PropTypes.func,
 };
 
 export default SavePageControlsWrapper;

packages/app/src/pages/UnsavedAlertDialog.tsx

@@ -0,0 +1,47 @@
+import React, {useCallback, useEffect} from 'react';
+import {useUnsavedWarning } from '~/stores/editor'
+import { useRouter } from 'next/router';
+
+const unsavedAlertMsg = 'Changes you made may not be saved.'
+
+const UnsavedAlertDialog = (): JSX.Element => {
+  const router = useRouter();
+  const { showAlertDialog } = useUnsavedWarning();
+
+  const showAlertDialogForRouteChangesByBrowser = useCallback((e) => {
+    e.preventDefault();
+    showAlertDialog(unsavedAlertMsg);
+    e.returnValue = '';
+    return;
+  },[]);
+
+  /*
+  *  Route changes by Browser
+  *　Example: window.location.href, F5
+  */
+  useEffect(() => {
+    window.addEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
+    return () => {
+      window.removeEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
+    };
+  }, []);
+
+
+  /*
+  * Route changes by Next Router
+  * https://nextjs.org/docs/api-reference/next/router
+  */
+  useEffect(() => {
+    router.events.on('routeChangeStart', () => showAlertDialog(unsavedAlertMsg))
+    return () => {
+      router.events.off('routeChangeStart', () => showAlertDialog(unsavedAlertMsg))
+    };
+  }, []);
+
+
+  return (
+    <>hoge</>
+    )
+};
+
+export default UnsavedAlertDialog;

packages/app/src/pages/[[...path]].page.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 
 import { pagePathUtils } from '@growi/core';
-import { isEnabledShowUnsavedWarning, showAlertDialog } from '~/client/util/editor';
 import { isValidObjectId } from 'mongoose';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import dynamic from 'next/dynamic';
 
 // import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { PageComments } from '~/components/PageComment/PageComments';
@@ -85,6 +85,7 @@ type Props = CommonProps & {
 
 const GrowiPage: NextPage<Props> = (props: Props) => {
   // const { t } = useTranslation();
+  const UnsavedAlertDialog = dynamic(() => import('./UnsavedAlertDialog'), { ssr: false });
   const router = useRouter();
 
   const { data: currentUser } = useCurrentUser(props.currentUser != null ? JSON.parse(props.currentUser) : null);
@@ -161,37 +162,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // }, []);
 
 
-  const unsavedAlertMsg = 'Changes you made may not be saved.'
-
-  const showAlertDialogForRouteChangesByBrowser = useCallback((e) => {
-    e.preventDefault();
-    showAlertDialog(unsavedAlertMsg);
-    e.returnValue = '';
-    return;
-  },[isEnabledShowUnsavedWarning]);
-
-  /*
-  *  Route changes by Browser
-  *　Example: window.location.href, F5
-  */
-  useEffect(() => {
-    window.addEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
-    return () => {
-      window.removeEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
-    };
-  }, [isEnabledShowUnsavedWarning]);
-
-
-  /*
-  * Route changes by Next Router
-  * https://nextjs.org/docs/api-reference/next/router
-  */
-  useEffect(() => {
-    router.events.on('routeChangeStart', () => showAlertDialog(unsavedAlertMsg))
-    return () => {
-      router.events.off('routeChangeStart', () => showAlertDialog(unsavedAlertMsg))
-    };
-  }, []);
 
   return (
     <>
@@ -245,6 +215,8 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
           PageComments
         </footer>
 
+        <UnsavedAlertDialog />
+
       </BasicLayout>
     </>
   );

packages/app/src/stores/editor.tsx

@@ -109,6 +109,24 @@ export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<str
   };
 };
 
-export const useIsEnabledShowUnsavedWarning = (bool): SWRResponse<boolean, Error> => {
-  return useStaticSWR<boolean, Error>('isEnabledShowUnsavedWarning', undefined, {fallbackData: false});
+export type IUnsavedWarning = {
+  showAlertDialog: (msg: string) => void;
+}
+
+export const useUnsavedWarning = (): SWRResponse<boolean, Error> & IUnsavedWarning => {
+  const swrResult =  useStaticSWR<boolean, Error>('isEnabledUnsavedWarning', undefined, {fallbackData: false});
+  const { data: isEnabledUnsavedWarning } = swrResult
+
+  console.log({isEnabledUnsavedWarning});
+
+  const showAlertDialog = (msg: string) => {
+    if(isEnabledUnsavedWarning || false){
+      return window.alert(msg);
+    }
+  }
+
+  return {
+    ...swrResult,
+    showAlertDialog,
+  }
 };