Start to show the list of families

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -1,9 +1,11 @@
+import AddIcon from "@mui/icons-material/Add";
+import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
+import { Button, IconButton, Tooltip, Typography } from "@mui/material";
 import React from "react";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-import { Family } from "../api/FamilyApi";
-import { Button, Typography } from "@mui/material";
+import { Family, FamilyApi } from "../api/FamilyApi";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
 import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 
 export function FamiliesListRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -14,8 +16,7 @@ export function FamiliesListRoute(): React.ReactElement {
   const [joinFamily, setJoinFamily] = React.useState(false);
 
   const load = async () => {
-    // TODO : implement
-    setFamilies([]);
+    setFamilies(await FamilyApi.GetList());
   };
 
   const reload = () => {
@@ -44,7 +45,11 @@ export function FamiliesListRoute(): React.ReactElement {
               onRequestJoinFamily={onRequestJoinFamily}
             />
           ) : (
-            <HasFamilysWidget onReload={reload} families={families!} />
+            <HasFamilysWidget
+              onRequestCreateFamily={onRequestCreateFamily}
+              onRequestJoinFamily={onRequestJoinFamily}
+              families={families!}
+            />
           )}
 
           {/** Create family dialog anchor */}
@@ -122,7 +127,27 @@ function NoFamilyButton(p: {
 
 function HasFamilysWidget(p: {
   families: Family[];
-  onReload: () => void;
+  onRequestCreateFamily: () => void;
+  onRequestJoinFamily: () => void;
 }): React.ReactElement {
-  return <p>todo has families</p>;
+  return (
+    <div style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Typography variant="h4">Mes familles</Typography>
+        <div>
+          <IconButton aria-label="create" onClick={p.onRequestCreateFamily}>
+            <Tooltip title="Créer une nouvelle famille">
+              <AddIcon />
+            </Tooltip>
+          </IconButton>
+          <IconButton aria-label="create" onClick={p.onRequestJoinFamily}>
+            <Tooltip title="Rejoindre une famille">
+              <ConfirmationNumberIcon />
+            </Tooltip>
+          </IconButton>
+        </div>
+      </div>
+      TODO list of families
+    </div>
+  );
 }