Start to show the list of families
This commit is contained in:
parent
1a4a7985e0
commit
947a3ad274
@ -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
|
||||
}}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user