105 lines
2.5 KiB
TypeScript
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>;
|
|
}
|