arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve tablo invites

Browse source
This commit is contained in:
Arthur Belleville 2025-10-16 21:57:27 +02:00
parent 82be584c3f
commit c6dfe6b6ae
No known key found for this signature in database
2 changed files with 46 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
api/src/tablo.ts
View file

@ -451,8 +451,12 @@ tabloRouter.post("/join", async (c) => {
await supabase.from("tablo_invites").delete().eq("id", invite_id);
const channel = streamServerClient.channel("messaging", tablo_id);
await channel.addMembers([joiner.id]);
try {
const channel = streamServerClient.channel("messaging", tablo_id);
await channel.addMembers([joiner.id]);
} catch (error) {
console.error("error adding member to channel", error);
}
return c.json({ message: "Tablo joined successfully" });
});

74
ui/src/pages/join.tsx
View file

@ -1,6 +1,9 @@
import { Button } from "@ui/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@ui/components/ui/card";
import { useJoinTablo } from "@ui/hooks/invite";
import { toast } from "@ui/lib/toast";
import { useUser } from "@ui/providers/UserStoreProvider";
import { CheckCircle2Icon, XCircleIcon } from "lucide-react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
export const JoinPage = () => {
@ -12,39 +15,35 @@ export const JoinPage = () => {
const [searchParams] = useSearchParams();
const token = searchParams.get("token");
if (!tablo_name || !token) {
toast.add(
{
title: "Invitation invalide",
description: "Veuillez vérifier le lien d'invitation",
type: "error",
},
{
timeout: 2000,
}
);
navigate("/");
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<div className="max-w-md w-full">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-gray-900">
<h1 className="text-3xl font-bold text-foreground">
Rejoindre le tablo &quot;{tablo_name}&quot;
</h1>
</div>
<div className="bg-white p-8 rounded-lg shadow-lg">
<div className="text-center mb-6">
<h2 className="text-2xl font-semibold text-gray-900 mb-2">{tablo_name}</h2>
<p className="text-gray-600">Vous avez été invité(e) à rejoindre ce tablo</p>
</div>
<Card className="transition-shadow hover:shadow-lg">
<CardHeader className="text-center">
<CardTitle className="text-2xl">{tablo_name}</CardTitle>
<CardDescription>Vous avez été invité(e) à rejoindre ce tablo</CardDescription>
</CardHeader>
<div className="space-y-4">
<button
<CardContent className="space-y-4">
<Button
onClick={() => {
if (!user || !token) return;
if (!user || !token) {
toast.add(
{
title: "Erreur",
description: "Vous n'avez pas les permissions requises",
type: "error",
},
{ timeout: 2000 }
);
return;
}
joinTablo(
{ token },
{
@ -52,24 +51,31 @@ export const JoinPage = () => {
navigate("/");
},
onError: (error) => {
alert(error.message);
toast.add(
{
title: "Erreur",
description: error.message,
type: "error",
},
{ timeout: 2000 }
);
},
}
);
}}
className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full"
size="lg"
>
<CheckCircle2Icon className="w-5 h-5 mr-2" />
Accepter l&apos;invitation
</button>
</Button>
<button
onClick={() => navigate("/")}
className="w-full bg-gray-200 text-gray-800 py-3 px-4 rounded-lg hover:bg-gray-300"
>
<Button onClick={() => navigate("/")} variant="outline" className="w-full" size="lg">
<XCircleIcon className="w-5 h-5 mr-2" />
Refuser
</button>
</div>
</div>
</Button>
</CardContent>
</Card>
</div>
</div>
);