kaori 3 лет назад
Родитель
Сommit
167c5d191f
2 измененных файлов с 25 добавлено и 29 удалено
  1. 23 14
      packages/app/src/pages/UnsavedAlertDialog.tsx
  2. 2 15
      packages/app/src/stores/editor.tsx

+ 23 - 14
packages/app/src/pages/UnsavedAlertDialog.tsx

@@ -4,29 +4,38 @@ import { useRouter } from 'next/router';
 
 import { useUnsavedWarning } from '~/stores/editor';
 
-const unsavedAlertMsg = 'Changes you made may not be saved.';
+const alertMsg = 'Changes you made may not be saved.';
 
 const UnsavedAlertDialog = (): void => {
   const router = useRouter();
-  const { showAlertDialog } = useUnsavedWarning();
-
-  const showAlertDialogForRouteChangesByBrowser = useCallback((e) => {
-    e.preventDefault();
-    showAlertDialog(unsavedAlertMsg);
-    e.returnValue = '';
+  const { data: isEnabledUnsavedWarning } = useUnsavedWarning();
+
+  const alertUnsavedWarningByBrowser = useCallback((e) => {
+    if(isEnabledUnsavedWarning){
+      e.preventDefault();
+      // returnValue should be set to show alert dialog
+      e.returnValue = alertMsg;
+      return;
+    }
+  }, [isEnabledUnsavedWarning]);
+
+  const alertUnsavedWarningByNextRouter = useCallback(() => {
+    if(isEnabledUnsavedWarning){
+      window.alert(alertMsg);
+    }
     return;
-  }, [showAlertDialog]);
+  }, [isEnabledUnsavedWarning]);
 
   /*
   * Route changes by Browser
   * Example: window.location.href, F5
   */
   useEffect(() => {
-    window.addEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
+    window.addEventListener('beforeunload', alertUnsavedWarningByBrowser);
     return () => {
-      window.removeEventListener('beforeunload', showAlertDialogForRouteChangesByBrowser);
+      window.removeEventListener('beforeunload', alertUnsavedWarningByBrowser);
     };
-  }, [showAlertDialogForRouteChangesByBrowser]);
+  }, [alertUnsavedWarningByBrowser]);
 
 
   /*
@@ -34,11 +43,11 @@ const UnsavedAlertDialog = (): void => {
   * https://nextjs.org/docs/api-reference/next/router
   */
   useEffect(() => {
-    router.events.on('routeChangeStart', () => showAlertDialog(unsavedAlertMsg));
+    router.events.on('routeChangeStart', () => alertUnsavedWarningByNextRouter());
     return () => {
-      router.events.off('routeChangeStart', () => showAlertDialog(unsavedAlertMsg));
+      router.events.off('routeChangeStart', () => alertUnsavedWarningByNextRouter());
     };
-  }, [router.events, showAlertDialog]);
+  }, [router.events]);
 
 
   return;

+ 2 - 15
packages/app/src/stores/editor.tsx

@@ -113,20 +113,7 @@ 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;
-
-  const showAlertDialog = (msg: string) => {
-    const isEnabled = isEnabledUnsavedWarning || false;
-    if (isEnabled) {
-      // eslint-disable-next-line no-alert
-      return window.alert(msg);
-    }
-  };
 
-  return {
-    ...swrResult,
-    showAlertDialog,
-  };
+export const useUnsavedWarning = (): SWRResponse<boolean, Error> => {
+ return useStaticSWR<boolean, Error>('isEnabledUnsavedWarning', undefined, { fallbackData: false });
 };