Show children on member page

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -26,6 +26,7 @@ import { PropEdit } from "../../widgets/forms/PropEdit";
 import { PropSelect } from "../../widgets/forms/SelectInput";
 import { SexSelection } from "../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
+import { MemberItem } from "../../widgets/MemberItem";
 
 /**
  * Create a new member route
@@ -126,6 +127,7 @@ export function FamilyMemberRoute(): React.ReactElement {
       build={() => (
         <MemberPage
           member={member!}
+          children={family.members.children(member!.id)}
           creating={false}
           editing={false}
           onRequestDelete={deleteMember}
@@ -144,13 +146,14 @@ export function FamilyMemberRoute(): React.ReactElement {
  */
 export function FamilyEditMemberRoute(): React.ReactElement {
   const n = useNavigate();
+  const { memberId } = useParams();
+
   const alert = useAlert();
   const snackbar = useSnackbar();
 
   const [shouldQuit, setShouldQuit] = React.useState(false);
 
   const family = useFamily();
-  const { memberId } = useParams();
 
   const [member, setMember] = React.useState<Member>();
   const load = async () => {
@@ -202,6 +205,7 @@ export function MemberPage(p: {
   editing: boolean;
   creating: boolean;
   shouldAllowLeaving?: boolean;
+  children?: Member[];
   onCancel?: () => void;
   onSave?: (m: Member) => void;
   onRequestEdit?: () => void;
@@ -211,6 +215,8 @@ export function MemberPage(p: {
   const confirm = useConfirm();
   const snackbar = useSnackbar();
 
+  const family = useFamily();
+
   const [changed, setChanged] = React.useState(false);
   const [member, setMember] = React.useState(
     new Member(structuredClone(p.member))
@@ -604,9 +610,24 @@ export function MemberPage(p: {
         </Grid>
 
         {/* Children */}
-        <Grid item sm={12} md={6}>
-          <PropertiesBox title="Enfants">TODO</PropertiesBox>
-        </Grid>
+        {p.children && (
+          <Grid item sm={12} md={6}>
+            <PropertiesBox title="Enfants">
+              {p.children.length === 0 ? (
+                <>Aucun enfant</>
+              ) : (
+                p.children.map((c) => (
+                  <RouterLink
+                    key={c.id}
+                    to={family.family.URL(`member/${c.id}`)}
+                  >
+                    <MemberItem member={c} />
+                  </RouterLink>
+                ))
+              )}
+            </PropertiesBox>
+          </Grid>
+        )}
       </Grid>
     </div>
   );