show alert dialogs

packages/app/src/client/services/EditorContainer.js

@@ -64,7 +64,9 @@ export default class EditorContainer extends Container {
   showUnsavedWarning(e) {
     // Cancel the event
     e.preventDefault();
+
     // display browser default message
+    // Chrome requires returnValue to be set. -> https://www.bugbugnow.net/2022/01/beforeunload-dialog.html
     e.returnValue = '';
     return '';
   }

packages/app/src/components/BasicLayout.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 // import GrowiNavbar from '~/client/js/components/Navbar/GrowiNavbar';
 // import GrowiNavbarBottom from '~/client/js/components/Navbar/GrowiNavbarBottom';
@@ -48,6 +49,13 @@ export const BasicLayout = ({ children, title, className }: Props): JSX.Element
 
       <ShortcutsModal />
       <SystemVersion />
+
+      <Link href="/629581929e61e2a5fe4c64a5">
+        <a>/629581929e61e2a5fe4c64a5</a>
+      </Link>
+      {/* <a href="/629581929e61e2a5fe4c64a5">/629581929e61e2a5fe4c64a5</a> */}
+      <br />
+      <a href="https://www.google.com/">https://www.google.com/</a>
     </>
   );
 };

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

@@ -159,11 +159,38 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // // eslint-disable-next-line react-hooks/exhaustive-deps
   // }, []);
 
+  const alertForNextRouter = () => {
+    window.alert('alert!!!');
+    return;
+  };
+
+  const alertForJs = (e) => {
+    e.preventDefault();
+    window.alert('alert!!!');
+    e.returnValue = '';
+    return;
+  };
+
+  /*
+  *  Route changes by Browser
+  *　Example: window.location.href, F5
+  */
+  useEffect(() => {
+    window.addEventListener('beforeunload', alertForJs);
+    return () => {
+      window.removeEventListener('beforeunload', alertForJs);
+    };
+  }, []);
+
 
+  /*
+  * Route changes by Next Router
+  * https://nextjs.org/docs/api-reference/next/router
+  */
   useEffect(() => {
-    console.log('componentDidMount: addEventListener beforeunload');
+    router.events.on('routeChangeStart', alertForNextRouter)
     return () => {
-      console.log('componentWillUnmount: removeEventListener beforeunload');
+      router.events.off('routeChangeStart', alertForNextRouter)
     };
   }, []);