import AddIcon from "@mui/icons-material/Add"; import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber"; import { Button, Card, CardActionArea, CardActions, CardContent, IconButton, Tooltip, Typography, } from "@mui/material"; import React from "react"; import { Family, FamilyApi } from "../api/FamilyApi"; import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog"; import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog"; import { useAlert } from "../context_providers/AlertDialogProvider"; import { AsyncWidget } from "../widgets/AsyncWidget"; import { useConfirm } from "../context_providers/ConfirmDialogProvider"; import { RouterLink } from "../widgets/RouterLink"; import { TimeWidget } from "../widgets/TimeWidget"; export function FamiliesListRoute(): React.ReactElement { const loadKey = React.useRef(1); const [families, setFamilies] = React.useState(null); const [createFamily, setCreateFamily] = React.useState(false); const [joinFamily, setJoinFamily] = React.useState(false); const load = async () => { setFamilies(await FamilyApi.GetList()); }; const reload = () => { loadKey.current += 1; setFamilies(null); }; const onRequestCreateFamily = async () => { setCreateFamily(true); }; const onRequestJoinFamily = async () => { setJoinFamily(true); }; return ( ( <> {families!!.length === 0 ? ( ) : ( )} {/** Create family dialog anchor */} setCreateFamily(false)} onCreated={() => { setCreateFamily(false); reload(); }} /> {/** Join family dialog anchor */} setJoinFamily(false)} onJoined={() => { setJoinFamily(false); reload(); }} /> )} /> ); } function NoFamilyWidget(p: { onRequestCreateFamily: () => void; onRequestJoinFamily: () => void; }): React.ReactElement { return (
Vous n'appartenez à aucune famille !
); } function NoFamilyButton(p: { label: string; onClick: () => void; }): React.ReactElement { return ( ); } function HasFamiliesWidget(p: { families: Family[]; onRequestCreateFamily: () => void; onRequestJoinFamily: () => void; onRequestRefresh: () => void; }): React.ReactElement { return (
Mes familles
{/* Display user memberships */} {p.families.map((f) => ( ))}
); } function FamilyCard(p: { f: Family; onFamilyLeft: () => void; }): React.ReactElement { const confirm = useConfirm(); const alert = useAlert(); const leaveFamily = async () => { try { if ( !p.f.CanLeave || !(await confirm( "Voulez-vous vraiment quitter la famille " + p.f.name + " ?" )) ) return; await FamilyApi.LeaveFamily(p.f.family_id); p.onFamilyLeft(); alert( `La famille ${p.f.name} a été retirée de votre liste de familles !` ); } catch (e) { console.error(e); alert("Echec du retrait de la famille !"); } }; return ( {p.f.name} {p.f.is_admin ? "Administrateur" : "Membre"}
{p.f.count_members === 1 ? "1 membre" : p.f.count_members + " membres"}
{p.f.count_admins === 1 ? "1 administrateur" : p.f.count_admins + " administrateurs"}
Famille créée il y a
{" "}
); }