66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { useMemo } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
|
|
import {
|
|
Card,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { useGroups } from "@/context/GroupsContext";
|
|
import { useCompartmentsByGroup } from "@/hooks/useCompartmentsByGroup";
|
|
|
|
export function GroupPage() {
|
|
const { groupId: groupIdParam } = useParams();
|
|
const { groups } = useGroups();
|
|
|
|
const groupId = useMemo(() => {
|
|
if (!groupIdParam) return "";
|
|
return decodeURIComponent(groupIdParam);
|
|
}, [groupIdParam]);
|
|
|
|
const groupTitle = useMemo(() => {
|
|
if (!groupId) return "Group";
|
|
const match = groups.find((g) => g.groupId === groupId);
|
|
return match?.displayName ?? groupId;
|
|
}, [groupId, groups]);
|
|
|
|
const { compartments, status, error } = useCompartmentsByGroup(groupId);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-md px-4 pt-6">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{groupTitle}</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">Compartments</p>
|
|
|
|
{status === "loading" ? (
|
|
<p className="mt-4 text-sm text-muted-foreground">Loading compartments…</p>
|
|
) : null}
|
|
|
|
{status === "error" ? (
|
|
<p className="mt-4 text-sm text-destructive">{error}</p>
|
|
) : null}
|
|
|
|
<div className="mt-6 grid grid-cols-2 gap-3">
|
|
{compartments.map((c) => (
|
|
<Link
|
|
key={c.id}
|
|
to={`/groups/${encodeURIComponent(groupId)}/compartments/${encodeURIComponent(c.id)}`}
|
|
className="min-w-0"
|
|
>
|
|
<Card className="h-full transition-colors hover:bg-muted/40">
|
|
<CardHeader className="p-0">
|
|
<CardTitle className="line-clamp-2">{c.displayName}</CardTitle>
|
|
<CardDescription className="truncate">{c.id}</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{status !== "loading" && groupId && compartments.length === 0 ? (
|
|
<p className="mt-4 text-sm text-muted-foreground">No compartments found.</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|