GeneIT/geneit_app/src/routes/FamiliesListRoute.tsx

129 lines
3.1 KiB
TypeScript
Raw Normal View History

2023-06-27 15:13:12 +00:00
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";
2023-06-27 16:52:49 +00:00
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
2023-06-27 15:13:12 +00:00
export function FamiliesListRoute(): React.ReactElement {
const loadKey = React.useRef(1);
const [families, setFamilies] = React.useState<Family[] | null>(null);
const [createFamily, setCreateFamily] = React.useState(false);
2023-06-27 16:52:49 +00:00
const [joinFamily, setJoinFamily] = React.useState(false);
2023-06-27 15:13:12 +00:00
const load = async () => {
// TODO : implement
setFamilies([]);
};
const reload = () => {
loadKey.current += 1;
};
const onRequestCreateFamily = async () => {
setCreateFamily(true);
};
2023-06-27 16:52:49 +00:00
const onRequestJoinFamily = async () => {
setJoinFamily(true);
};
2023-06-27 15:13:12 +00:00
return (
<AsyncWidget
2023-06-27 17:03:39 +00:00
ready={families !== null}
loadKey={`families-list-${loadKey.current}`}
2023-06-27 15:13:12 +00:00
load={load}
errMsg="Echec du chargement de la liste des familles"
build={() => (
<>
{families!!.length === 0 ? (
2023-06-27 16:52:49 +00:00
<NoFamilyWidget
onRequestCreateFamily={onRequestCreateFamily}
onRequestJoinFamily={onRequestJoinFamily}
/>
2023-06-27 15:13:12 +00:00
) : (
<HasFamilysWidget onReload={reload} families={families!} />
)}
{/** Create family dialog anchor */}
<CreateFamilyDialog
open={createFamily}
onClose={() => setCreateFamily(false)}
onCreated={() => {
setCreateFamily(false);
reload();
}}
/>
2023-06-27 16:52:49 +00:00
{/** Join family dialog anchor */}
<JoinFamilyDialog
open={joinFamily}
onClose={() => setJoinFamily(false)}
onJoined={() => {
setJoinFamily(false);
reload();
}}
/>
2023-06-27 15:13:12 +00:00
</>
)}
/>
);
}
function NoFamilyWidget(p: {
onRequestCreateFamily: () => void;
2023-06-27 16:52:49 +00:00
onRequestJoinFamily: () => void;
2023-06-27 15:13:12 +00:00
}): 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}
/>
2023-06-27 16:52:49 +00:00
<NoFamilyButton
label="Rejoindre une famille"
onClick={p.onRequestJoinFamily}
/>
2023-06-27 15:13:12 +00:00
</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>;
}