Add navigation to families screen

This commit is contained in:
Pierre HUBERT 2023-07-07 18:57:43 +02:00
parent 09f1584d18
commit 6aceda7fe7
2 changed files with 73 additions and 32 deletions

View File

@ -1,6 +1,6 @@
import { APIClient } from "./ApiClient";
export interface Family {
interface FamilyAPI {
user_id: number;
family_id: number;
name: string;
@ -11,6 +11,49 @@ export interface Family {
count_admins: number;
}
export class Family implements FamilyAPI {
user_id: number;
family_id: number;
name: string;
time_create: number;
is_admin: boolean;
invitation_code: string;
count_members: number;
count_admins: number;
constructor(f: FamilyAPI) {
this.user_id = f.user_id;
this.family_id = f.family_id;
this.name = f.name;
this.time_create = f.time_create;
this.is_admin = f.is_admin;
this.invitation_code = f.invitation_code;
this.count_members = f.count_members;
this.count_admins = f.count_admins;
}
/**
* Check if the current user user can leave a family
*/
get CanLeave(): boolean {
return !this.is_admin || this.count_admins > 1;
}
/**
* Get application URL for family
*/
URL(uri?: string): string {
return `/family/${this.family_id}/${uri ?? ""}`;
}
/**
* Get base family URL
*/
get BaseURL(): string {
return this.URL("");
}
}
export enum JoinFamilyResult {
TooManyRequests,
InvalidCode,
@ -65,14 +108,7 @@ export class FamilyApi {
method: "GET",
uri: "/family/list",
})
).data;
}
/**
* Check if the current user user can leave a family
*/
static CanLeaveFamily(f: Family): boolean {
return !f.is_admin || f.count_admins > 1;
).data.map((f: FamilyAPI) => new Family(f));
}
/**

View File

@ -11,13 +11,15 @@ import {
Typography,
} from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
import { Family, FamilyApi } from "../api/FamilyApi";
import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { TimeWidget } from "../widgets/TimeWidget";
import { useConfirm } from "../widgets/ConfirmDialogProvider";
import { useAlert } from "../widgets/AlertDialogProvider";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { useConfirm } from "../widgets/ConfirmDialogProvider";
import { RouterLink } from "../widgets/RouterLink";
import { TimeWidget } from "../widgets/TimeWidget";
export function FamiliesListRoute(): React.ReactElement {
const loadKey = React.useRef(1);
@ -181,14 +183,14 @@ function FamilyCard(p: {
f: Family;
onFamilyLeft: () => void;
}): React.ReactElement {
const canLeave = FamilyApi.CanLeaveFamily(p.f);
const confirm = useConfirm();
const alert = useAlert();
const navigate = useNavigate();
const leaveFamily = async () => {
try {
if (
!canLeave ||
!p.f.CanLeave ||
!(await confirm.confirm(
"Voulez-vous vraiment quitter la famille " + p.f.name + " ?"
))
@ -211,27 +213,30 @@ function FamilyCard(p: {
return (
<Card style={{ margin: "5px" }}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{p.f.name}
</Typography>
<Typography variant="body2" color="text.secondary">
{p.f.count_members === 1
? "1 membre"
: p.f.count_members + " membres"}{" "}
<br />
{p.f.count_admins === 1
? "1 administrateur"
: p.f.count_admins + " administrateurs"}
<br />
Famille créée il y a <TimeWidget time={p.f.time_create} />
</Typography>
</CardContent>
{" "}
<RouterLink to={p.f.BaseURL}>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{p.f.name}
</Typography>
<Typography variant="body2" color="text.secondary">
{p.f.count_members === 1
? "1 membre"
: p.f.count_members + " membres"}{" "}
<br />
{p.f.count_admins === 1
? "1 administrateur"
: p.f.count_admins + " administrateurs"}
<br />
Famille créée il y a <TimeWidget time={p.f.time_create} />
</Typography>
</CardContent>{" "}
</RouterLink>
</CardActionArea>
<CardActions>
<Tooltip
title={
canLeave
p.f.CanLeave
? "Quitter la famille"
: "Vous ne pouvez pas quitter cette famille, pour la retirer de cette liste vous devez la supprimer."
}
@ -240,7 +245,7 @@ function FamilyCard(p: {
<Button
size="small"
color="primary"
disabled={!canLeave}
disabled={!p.f.CanLeave}
onClick={leaveFamily}
>
Quitter