Can update / delete member information through UI

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -2,7 +2,9 @@ import ClearIcon from "@mui/icons-material/Clear";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+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";
@@ -13,6 +15,7 @@ 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
@@ -50,19 +53,120 @@ export function FamilyCreateMemberRoute(): React.ReactElement {
 }
 
 /**
- * Edit existing member route
+ * Get existing member route
  */
 export function FamilyMemberRoute(): React.ReactElement {
-  return <p>TODO</p>;
+  const n = useNavigate();
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const { memberId } = useParams();
+
+  const [member, setMember] = React.useState<Member>();
+  const load = async () => {
+    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
+  };
+
+  const deleteMember = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Voulez-vous vraiment supprimer cette fiche membre ? L'opération n'est pas réversible !"
+        ))
+      )
+        return;
+
+      await MemberApi.Delete(member!);
+
+      snackbar("La fiche de membre a été supprimée avec succès !");
+      n(family.family.URL("members"));
+
+      // TODO : refresh cached members list
+    } catch (e) {
+      console.error(e);
+      alert("Échec de la suppression du membre !");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={memberId}
+      load={load}
+      errMsg="Echec du chargement des informations du membre"
+      build={() => (
+        <MemberPage
+          member={member!}
+          creating={false}
+          editing={false}
+          onRequestDelete={deleteMember}
+          onRequestEdit={() =>
+            n(family.family.URL(`member/${member!.id}/edit`))
+          }
+        />
+      )}
+    />
+  );
+}
+
+/**
+ * Edit existing member route
+ */
+export function FamilyEditMemberRoute(): React.ReactElement {
+  const n = useNavigate();
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const family = useFamily();
+  const { memberId } = useParams();
+
+  const [member, setMember] = React.useState<Member>();
+  const load = async () => {
+    setMember(await MemberApi.GetSingle(family.familyId, Number(memberId)));
+  };
+
+  const save = async (m: Member) => {
+    try {
+      await MemberApi.Update(m);
+
+      snackbar("Les informations du membre ont été mises à jour avec succès !");
+
+      // TODO : update family hook info
+
+      n(family.family.URL(`member/${member!.id}`));
+    } catch (e) {
+      console.error(e);
+      alert("Échec de la mise à jour des informations du membre !");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={memberId}
+      load={load}
+      errMsg="Échec du chargement des informations du membre"
+      build={() => (
+        <MemberPage
+          member={member!}
+          creating={false}
+          editing={true}
+          onCancel={() => n(family.family.URL(`member/${member!.id}`))}
+          onSave={save}
+        />
+      )}
+    />
+  );
 }
 
 export function MemberPage(p: {
   member: Member;
   editing: boolean;
   creating: boolean;
-  onCancel: () => void;
-  onSave: (m: Member) => void;
+  onCancel?: () => void;
+  onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
+  onRequestDelete?: () => void;
 }): React.ReactElement {
   const confirm = useConfirm();
 
@@ -77,7 +181,7 @@ export function MemberPage(p: {
   };
 
   const save = () => {
-    p.onSave(member);
+    p.onSave!(member);
   };
 
   const cancel = async () => {
@@ -88,7 +192,7 @@ export function MemberPage(p: {
     )
       return;
 
-    p.onCancel();
+    p.onCancel!();
   };
 
   return (
@@ -102,10 +206,39 @@ export function MemberPage(p: {
       >
         <FamilyPageTitle
           title={
-            (p.creating ? "Création" : "Édition") + " d'une fiche de membre"
+            (p.editing
+              ? p.creating
+                ? "Création"
+                : "Édition"
+              : "Visualisation") + " d'une fiche de membre"
           }
         />
         <Stack direction="row" spacing={1}>
+          {/* Edit button */}
+          {p.onRequestEdit && (
+            <Button
+              variant="outlined"
+              startIcon={<EditIcon />}
+              onClick={p.onRequestEdit}
+              size="large"
+            >
+              Editer
+            </Button>
+          )}
+
+          {/* Delete button */}
+          {p.onRequestDelete && (
+            <Button
+              variant="outlined"
+              startIcon={<DeleteIcon />}
+              onClick={p.onRequestDelete}
+              size="large"
+              color="error"
+            >
+              Supprimer
+            </Button>
+          )}
+
           {/* Save button */}
           {p.editing && (
             <Button
@@ -136,6 +269,7 @@ export function MemberPage(p: {
           <PropertiesBox title="Informations générales">
             {/* Sex */}
             <SexSelection
+              readonly={!p.editing}
               current={member.sex}
               onChange={(v) => {
                 member.sex = v;