GeneIT/geneit_app/src/routes/FamiliesListRoute.tsx

105 lines
2.5 KiB
TypeScript

import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { Family } from "../api/FamilyApi";
import { Button, Typography } from "@mui/material";
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
export function FamiliesListRoute(): React.ReactElement {
const loadKey = React.useRef(1);
const [families, setFamilies] = React.useState<Family[] | null>(null);
const [createFamily, setCreateFamily] = React.useState(false);
const load = async () => {
// TODO : implement
setFamilies([]);
};
const reload = () => {
loadKey.current += 1;
};
const onRequestCreateFamily = async () => {
setCreateFamily(true);
};
return (
<AsyncWidget
loadKey={loadKey.current}
load={load}
errMsg="Echec du chargement de la liste des familles"
build={() => (
<>
{families!!.length === 0 ? (
<NoFamilyWidget onRequestCreateFamily={onRequestCreateFamily} />
) : (
<HasFamilysWidget onReload={reload} families={families!} />
)}
{/** Create family dialog anchor */}
<CreateFamilyDialog
open={createFamily}
onClose={() => setCreateFamily(false)}
onCreated={() => {
setCreateFamily(false);
reload();
}}
/>
</>
)}
/>
);
}
function NoFamilyWidget(p: {
onRequestCreateFamily: () => void;
}): React.ReactElement {
return (
<div style={{ flex: 1, display: "flex", alignItems: "center" }}>
<Typography variant="h3" style={{ flex: 1, textAlign: "center" }}>
Vous n'appartenez à aucune famille !
</Typography>
<div
style={{
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<NoFamilyButton
label="Créer une famille"
onClick={p.onRequestCreateFamily}
/>
<NoFamilyButton label="Rejoindre une famille" onClick={() => {}} />
</div>
</div>
);
}
function NoFamilyButton(p: {
label: string;
onClick: () => void;
}): React.ReactElement {
return (
<Button
variant="outlined"
size="large"
style={{ width: "300px", marginBottom: "10px" }}
onClick={p.onClick}
>
{p.label}
</Button>
);
}
function HasFamilysWidget(p: {
families: Family[];
onReload: () => void;
}): React.ReactElement {
return <p>todo has families</p>;
}