Can join a family

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -3,6 +3,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { Family } from "../api/FamilyApi";
 import { Button, Typography } from "@mui/material";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
+import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
 
 export function FamiliesListRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -10,6 +11,7 @@ export function FamiliesListRoute(): React.ReactElement {
   const [families, setFamilies] = React.useState<Family[] | null>(null);
 
   const [createFamily, setCreateFamily] = React.useState(false);
+  const [joinFamily, setJoinFamily] = React.useState(false);
 
   const load = async () => {
     // TODO : implement
@@ -24,6 +26,10 @@ export function FamiliesListRoute(): React.ReactElement {
     setCreateFamily(true);
   };
 
+  const onRequestJoinFamily = async () => {
+    setJoinFamily(true);
+  };
+
   return (
     <AsyncWidget
       loadKey={loadKey.current}
@@ -32,7 +38,10 @@ export function FamiliesListRoute(): React.ReactElement {
       build={() => (
         <>
           {families!!.length === 0 ? (
-            <NoFamilyWidget onRequestCreateFamily={onRequestCreateFamily} />
+            <NoFamilyWidget
+              onRequestCreateFamily={onRequestCreateFamily}
+              onRequestJoinFamily={onRequestJoinFamily}
+            />
           ) : (
             <HasFamilysWidget onReload={reload} families={families!} />
           )}
@@ -46,6 +55,16 @@ export function FamiliesListRoute(): React.ReactElement {
               reload();
             }}
           />
+
+          {/** Join family dialog anchor */}
+          <JoinFamilyDialog
+            open={joinFamily}
+            onClose={() => setJoinFamily(false)}
+            onJoined={() => {
+              setJoinFamily(false);
+              reload();
+            }}
+          />
         </>
       )}
     />
@@ -54,6 +73,7 @@ export function FamiliesListRoute(): React.ReactElement {
 
 function NoFamilyWidget(p: {
   onRequestCreateFamily: () => void;
+  onRequestJoinFamily: () => void;
 }): React.ReactElement {
   return (
     <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
@@ -74,7 +94,10 @@ function NoFamilyWidget(p: {
           onClick={p.onRequestCreateFamily}
         />
 
-        <NoFamilyButton label="Rejoindre une famille" onClick={() => {}} />
+        <NoFamilyButton
+          label="Rejoindre une famille"
+          onClick={p.onRequestJoinFamily}
+        />
       </div>
     </div>
   );