Ask user confirmation before leaving an unsaved form

geneit_app/src/routes/DeleteAccountRoute.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { AuthApi } from "../api/AuthApi";
 import { DeleteAccountTokenInfo, UserApi } from "../api/UserApi";
-import { useAlert } from "../context_providers/AlertDialogProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { useConfirm } from "../context_providers/ConfirmDialogProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 
 export function DeleteAccountRoute(): React.ReactElement {
   const alert = useAlert();

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -14,9 +14,9 @@ import React from "react";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
 import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
-import { useAlert } from "../context_providers/AlertDialogProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { useConfirm } from "../context_providers/ConfirmDialogProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 import { RouterLink } from "../widgets/RouterLink";
 import { TimeWidget } from "../widgets/TimeWidget";
 

geneit_app/src/routes/ProfileRoute.tsx

@@ -13,9 +13,9 @@ import {
 import React from "react";
 import { ServerApi } from "../api/ServerApi";
 import { ReplacePasswordResponse, User, UserApi } from "../api/UserApi";
-import { useAlert } from "../context_providers/AlertDialogProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { useUser } from "../widgets/BaseAuthenticatedPage";
-import { useConfirm } from "../context_providers/ConfirmDialogProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 import { PasswordInput } from "../widgets/PasswordInput";
 import { formatDate } from "../widgets/TimeWidget";
 

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -1,21 +1,22 @@
 import ClearIcon from "@mui/icons-material/Clear";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
 import React from "react";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
 import { useNavigate, useParams } from "react-router-dom";
 import { Member, MemberApi } from "../../api/MemberApi";
 import { ServerApi } from "../../api/ServerApi";
-import { useAlert } from "../../context_providers/AlertDialogProvider";
-import { useConfirm } from "../../context_providers/ConfirmDialogProvider";
+import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
+import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
+import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { ConfirmLeaveWithoutSaveDialog } from "../../widgets/ConfirmLeaveWithoutSaveDialog";
 import { FamilyPageTitle } from "../../widgets/FamilyPageTitle";
 import { PropEdit } from "../../widgets/PropEdit";
 import { PropertiesBox } from "../../widgets/PropertiesBox";
 import { SexSelection } from "../../widgets/SexSelection";
-import { useSnackbar } from "../../context_providers/SnackbarProvider";
-import { AsyncWidget } from "../../widgets/AsyncWidget";
 
 /**
  * Create a new member route
@@ -24,6 +25,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
   const alert = useAlert();
   const snackbar = useSnackbar();
 
+  const [shouldQuit, setShouldQuit] = React.useState(false);
   const n = useNavigate();
   const family = useFamily();
 
@@ -33,6 +35,7 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
 
       // TODO : trigger update
 
+      setShouldQuit(true);
       n(family.family.URL(`member/${r.id}`));
       snackbar(`La fiche pour ${r.fullName} a été créée avec succès !`);
     } catch (e) {
@@ -41,13 +44,19 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
     }
   };
 
+  const cancel = () => {
+    setShouldQuit(true);
+    n(family.family.URL("members"));
+  };
+
   return (
     <MemberPage
       member={Member.New(family.family.family_id)}
       creating={true}
       editing={true}
-      onCancel={() => n(family.family.URL("members"))}
+      onCancel={cancel}
       onSave={create}
+      shouldAllowLeaving={shouldQuit}
     />
   );
 }
@@ -118,6 +127,8 @@ export function FamilyEditMemberRoute(): React.ReactElement {
   const alert = useAlert();
   const snackbar = useSnackbar();
 
+  const [shouldQuit, setShouldQuit] = React.useState(false);
+
   const family = useFamily();
   const { memberId } = useParams();
 
@@ -126,6 +137,11 @@ export function FamilyEditMemberRoute(): React.ReactElement {
     setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
   };
 
+  const cancel = () => {
+    setShouldQuit(true);
+    n(family.family.URL(`member/${member!.id}`));
+  };
+
   const save = async (m: Member) => {
     try {
       await MemberApi.Update(m);
@@ -134,6 +150,7 @@ export function FamilyEditMemberRoute(): React.ReactElement {
 
       // TODO : update family hook info
 
+      setShouldQuit(true);
       n(family.family.URL(`member/${member!.id}`));
     } catch (e) {
       console.error(e);
@@ -151,8 +168,9 @@ export function FamilyEditMemberRoute(): React.ReactElement {
           member={member!}
           creating={false}
           editing={true}
-          onCancel={() => n(family.family.URL(`member/${member!.id}`))}
+          onCancel={cancel}
           onSave={save}
+          shouldAllowLeaving={shouldQuit}
         />
       )}
     />
@@ -163,6 +181,7 @@ export function MemberPage(p: {
   member: Member;
   editing: boolean;
   creating: boolean;
+  shouldAllowLeaving?: boolean;
   onCancel?: () => void;
   onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
@@ -170,7 +189,6 @@ export function MemberPage(p: {
 }): React.ReactElement {
   const confirm = useConfirm();
 
-  // TODO : add confirmation when leaving page https://dev.to/bangash1996/detecting-user-leaving-page-with-react-router-dom-v602-33ni
   const [changed, setChanged] = React.useState(false);
   const [member, setMember] = React.useState(structuredClone(p.member));
 
@@ -198,6 +216,9 @@ export function MemberPage(p: {
 
   return (
     <div style={{ maxWidth: "2000px", margin: "auto" }}>
+      <ConfirmLeaveWithoutSaveDialog
+        shouldBlock={changed && p.shouldAllowLeaving !== true}
+      />
       <div
         style={{
           display: "flex",

geneit_app/src/routes/family/FamilySettingsRoute.tsx

@@ -12,8 +12,8 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { FamilyApi } from "../../api/FamilyApi";
 import { ServerApi } from "../../api/ServerApi";
-import { useAlert } from "../../context_providers/AlertDialogProvider";
-import { useConfirm } from "../../context_providers/ConfirmDialogProvider";
+import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { formatDate } from "../../widgets/TimeWidget";
 

geneit_app/src/routes/family/FamilyUsersListRoute.tsx

@@ -12,8 +12,8 @@ import {
 } from "@mui/x-data-grid";
 import React from "react";
 import { FamilyApi, FamilyUser } from "../../api/FamilyApi";
-import { useAlert } from "../../context_providers/AlertDialogProvider";
-import { useConfirm } from "../../context_providers/ConfirmDialogProvider";
+import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { useUser } from "../../widgets/BaseAuthenticatedPage";
 import { useFamily } from "../../widgets/BaseFamilyRoute";