Ask user confirmation before leaving an unsaved form

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -27,9 +27,9 @@ import { Outlet, useLocation, useParams } from "react-router-dom";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { AsyncWidget } from "./AsyncWidget";
 import { RouterLink } from "./RouterLink";
-import { useSnackbar } from "../context_providers/SnackbarProvider";
-import { useConfirm } from "../context_providers/ConfirmDialogProvider";
-import { useAlert } from "../context_providers/AlertDialogProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 
 interface FamilyContext {
   family: Family;

geneit_app/src/widgets/ConfirmLeaveWithoutSaveDialog.tsx

@@ -0,0 +1,59 @@
+// https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx
+// https://stackoverflow.com/questions/75135147/react-router-dom-v6-useblocker
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import React from "react";
+
+import { unstable_useBlocker as useBlocker } from "react-router-dom";
+
+export function ConfirmLeaveWithoutSaveDialog(p: {
+  shouldBlock: boolean;
+}): React.ReactElement {
+  let blocker = useBlocker(p.shouldBlock);
+
+  React.useEffect(() => {
+    if (blocker.state === "blocked" && !p.shouldBlock) {
+      blocker.proceed();
+    }
+  }, [blocker, p.shouldBlock]);
+
+  const cancelNavigation = () => {
+    blocker.reset?.();
+  };
+
+  const confirmNavigation = () => {
+    blocker.proceed?.();
+  };
+
+  return (
+    <Dialog
+      open={blocker.state === "blocked"}
+      onClose={cancelNavigation}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        Quitter sans enregistrer ?
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          Voulez-vous vraiment quitter cette page sans enregistrer vos
+          modifications ?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={confirmNavigation as any}>Quitter la page</Button>
+        <Button onClick={cancelNavigation as any} autoFocus>
+          Rester sur la page
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

geneit_app/src/widgets/DarkThemeButton.tsx

@@ -1,7 +1,7 @@
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import { IconButton, Tooltip } from "@mui/material";
-import { useDarkTheme } from "../context_providers/DarkThemeProvider";
+import { useDarkTheme } from "../hooks/context_providers/DarkThemeProvider";
 
 export function DarkThemeButton(): React.ReactElement {
   const darkTheme = useDarkTheme();