Start to show the list of families

This commit is contained in:
Pierre HUBERT 2023-07-04 19:05:36 +02:00
parent 1a4a7985e0
commit 947a3ad274
2 changed files with 44 additions and 9 deletions

View File

@ -46,4 +46,14 @@ export class FamilyApi {
return JoinFamilyResult.Error;
}
}
}
/**
* Get the list of families
*/
static async GetList():Promise<Family[]> {
return (await APIClient.exec({
method: "GET",
uri: "/family/list",
})).data
}}

View File

@ -1,9 +1,11 @@
import AddIcon from "@mui/icons-material/Add";
import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
import { Button, IconButton, Tooltip, Typography } from "@mui/material";
import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { Family } from "../api/FamilyApi";
import { Button, Typography } from "@mui/material";
import { Family, FamilyApi } from "../api/FamilyApi";
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
import { AsyncWidget } from "../widgets/AsyncWidget";
export function FamiliesListRoute(): React.ReactElement {
const loadKey = React.useRef(1);
@ -14,8 +16,7 @@ export function FamiliesListRoute(): React.ReactElement {
const [joinFamily, setJoinFamily] = React.useState(false);
const load = async () => {
// TODO : implement
setFamilies([]);
setFamilies(await FamilyApi.GetList());
};
const reload = () => {
@ -44,7 +45,11 @@ export function FamiliesListRoute(): React.ReactElement {
onRequestJoinFamily={onRequestJoinFamily}
/>
) : (
<HasFamilysWidget onReload={reload} families={families!} />
<HasFamilysWidget
onRequestCreateFamily={onRequestCreateFamily}
onRequestJoinFamily={onRequestJoinFamily}
families={families!}
/>
)}
{/** Create family dialog anchor */}
@ -122,7 +127,27 @@ function NoFamilyButton(p: {
function HasFamilysWidget(p: {
families: Family[];
onReload: () => void;
onRequestCreateFamily: () => void;
onRequestJoinFamily: () => void;
}): React.ReactElement {
return <p>todo has families</p>;
return (
<div style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Typography variant="h4">Mes familles</Typography>
<div>
<IconButton aria-label="create" onClick={p.onRequestCreateFamily}>
<Tooltip title="Créer une nouvelle famille">
<AddIcon />
</Tooltip>
</IconButton>
<IconButton aria-label="create" onClick={p.onRequestJoinFamily}>
<Tooltip title="Rejoindre une famille">
<ConfirmationNumberIcon />
</Tooltip>
</IconButton>
</div>
</div>
TODO list of families
</div>
);
}