Added warning when closing tab if dirty

src/MetaPlayer.tsx

@@ -32,6 +32,7 @@ import {
 } from "./features/activityData/activityDataSlice";
 
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
+import ExitWarning from "./features/activityData/ExitWarning";
 
 type AntiCheatOptions = {
   preserveDom: boolean;
@@ -81,6 +82,7 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     <PrimeReactProvider value={primeSettings}>
       <Provider store={store}>
         <ThemeSwitcher />
+        <ExitWarning />
         <ErrorBoundary fallback={<div>Une erreur est survenue</div>}>
           <ActivityJSProvider options={props.activityJSOptions}>
             <Saver />

src/features/activityData/ExitWarning.ts

+import { FC, useEffect } from "react";
+import { useAppSelector } from "../../app/hooks";
+import { selectIsDirty } from "./activityDataSlice";
+
+const ExitWarning: FC = () => {
+  const isDirty = useAppSelector(selectIsDirty);
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault();
+        e.returnValue = true;
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty]);
+
+  return null;
+};
+
+export default ExitWarning;