Merge pull request #7400 from weseek/fix/115770-unsaved-alert-dialog-appears-at-every-page-transition

imprv: UnsavedAlertDialog and page transition when next routing

packages/app/public/static/locales/en_US/translation.json

@@ -328,7 +328,7 @@
     "notice": {
       "conflict": "Couldn't save the changes you made because someone else was editing this page. Please re-edit the affected section after reloading the page."
     },
-    "changes_not_saved": "Changes you made may not be saved."
+    "changes_not_saved": "Changes you made may not be saved. Are you sure you want to move?"
   },
   "page_comment": {
     "display_the_page_when_posting_this_comment": "Display the page when posting this comment",

packages/app/public/static/locales/ja_JP/translation.json

@@ -328,7 +328,7 @@
     "notice": {
       "conflict": "すでに他の人がこのページを編集していたため保存できませんでした。ページを再読み込み後、自分の編集箇所のみ再度編集してください。"
     },
-    "changes_not_saved": "変更が保存されていない可能性があります。"
+    "changes_not_saved": "変更が保存されていない可能性があります。本当に移動しますか？"
   },
   "page_comment": {
     "display_the_page_when_posting_this_comment": "投稿時のページを表示する",

packages/app/public/static/locales/zh_CN/translation.json

@@ -318,7 +318,7 @@
 		"notice": {
 			"conflict": "无法保存您所做的更改，因为其他人正在编辑此页。请在重新加载页面后重新编辑受影响的部分。"
 		},
-    "changes_not_saved": "您所做的更改可能不会保存。"
+    "changes_not_saved": "您所做的更改可能不会保存。你真的想继续前进吗？"
   },
   "page_comment": {
     "display_the_page_when_posting_this_comment": "Display the page when posting this comment",

packages/app/src/components/UnsavedAlertDialog.tsx

@@ -8,7 +8,7 @@ import { useIsEnabledUnsavedWarning } from '~/stores/editor';
 const UnsavedAlertDialog = (): JSX.Element => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { data: isEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
+  const { data: isEnabledUnsavedWarning, mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
 
   const alertUnsavedWarningByBrowser = useCallback((e) => {
     if (isEnabledUnsavedWarning) {
@@ -23,12 +23,20 @@ const UnsavedAlertDialog = (): JSX.Element => {
 
   const alertUnsavedWarningByNextRouter = useCallback(() => {
     if (isEnabledUnsavedWarning) {
-    // eslint-disable-next-line no-alert
-      window.alert(t('page_edit.changes_not_saved'));
+      // see: https://zenn.dev/qaynam/articles/c4794537a163d2
+      // eslint-disable-next-line no-alert
+      const answer = window.confirm(t('page_edit.changes_not_saved'));
+      if (!answer) {
+      // eslint-disable-next-line no-throw-literal
+        throw 'Abort route';
+      }
     }
-    return;
   }, [isEnabledUnsavedWarning, t]);
 
+  const onRouterChangeComplete = useCallback(() => {
+    mutateIsEnabledUnsavedWarning(false);
+  }, [mutateIsEnabledUnsavedWarning]);
+
   /*
   * Route changes by Browser
   * Example: window.location.href, F5
@@ -53,6 +61,14 @@ const UnsavedAlertDialog = (): JSX.Element => {
   }, [alertUnsavedWarningByNextRouter, router.events]);
 
 
+  useEffect(() => {
+    router.events.on('routeChangeComplete', onRouterChangeComplete);
+    return () => {
+      router.events.off('routeChangeComplete', onRouterChangeComplete);
+    };
+  }, [onRouterChangeComplete, router.events]);
+
+
   return <></>;
 };