Add navigation to families screen

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -11,13 +11,15 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
 import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-import { TimeWidget } from "../widgets/TimeWidget";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
 import { useAlert } from "../widgets/AlertDialogProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { RouterLink } from "../widgets/RouterLink";
+import { TimeWidget } from "../widgets/TimeWidget";
 
 export function FamiliesListRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -181,14 +183,14 @@ function FamilyCard(p: {
   f: Family;
   onFamilyLeft: () => void;
 }): React.ReactElement {
-  const canLeave = FamilyApi.CanLeaveFamily(p.f);
   const confirm = useConfirm();
   const alert = useAlert();
+  const navigate = useNavigate();
 
   const leaveFamily = async () => {
     try {
       if (
-        !canLeave ||
+        !p.f.CanLeave ||
         !(await confirm.confirm(
           "Voulez-vous vraiment quitter la famille " + p.f.name + " ?"
         ))
@@ -211,27 +213,30 @@ function FamilyCard(p: {
   return (
     <Card style={{ margin: "5px" }}>
       <CardActionArea>
-        <CardContent>
-          <Typography gutterBottom variant="h5" component="div">
-            {p.f.name}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {p.f.count_members === 1
-              ? "1 membre"
-              : p.f.count_members + " membres"}{" "}
-            <br />
-            {p.f.count_admins === 1
-              ? "1 administrateur"
-              : p.f.count_admins + " administrateurs"}
-            <br />
-            Famille créée il y a <TimeWidget time={p.f.time_create} />
-          </Typography>
-        </CardContent>
+        {" "}
+        <RouterLink to={p.f.BaseURL}>
+          <CardContent>
+            <Typography gutterBottom variant="h5" component="div">
+              {p.f.name}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {p.f.count_members === 1
+                ? "1 membre"
+                : p.f.count_members + " membres"}{" "}
+              <br />
+              {p.f.count_admins === 1
+                ? "1 administrateur"
+                : p.f.count_admins + " administrateurs"}
+              <br />
+              Famille créée il y a <TimeWidget time={p.f.time_create} />
+            </Typography>
+          </CardContent>{" "}
+        </RouterLink>
       </CardActionArea>
       <CardActions>
         <Tooltip
           title={
-            canLeave
+            p.f.CanLeave
               ? "Quitter la famille"
               : "Vous ne pouvez pas quitter cette famille, pour la retirer de cette liste vous devez la supprimer."
           }
@@ -240,7 +245,7 @@ function FamilyCard(p: {
             <Button
               size="small"
               color="primary"
-              disabled={!canLeave}
+              disabled={!p.f.CanLeave}
               onClick={leaveFamily}
             >
               Quitter