feat(telegram): implement leave chat

Author: lorenzocorallo

package.json

@@ -16,7 +16,7 @@
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
-    "@polinetwork/backend": "^0.15.16",
+    "@polinetwork/backend": "^0.15.17",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.2",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { setGroupHide } from "@/server/actions/groups"
 import type { TgGroup } from "@/server/trpc/types"
+import { LeaveChat } from "./leave-chat"
 
 export function GroupRow({ row: r }: { row: TgGroup }) {
   const router = useRouter()
@@ -21,7 +22,7 @@ export function GroupRow({ row: r }: { row: TgGroup }) {
   }
 
   return (
-    <div className="grid gap-4 items-center grid-cols-5 border-b py-2 w-full">
+    <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] border-b py-2 w-full">
       <p>{r.telegramId}</p>
       <p>{r.title}</p>
       <p className={r.tag ? "" : "text-muted-foreground italic"}>{r.tag ? `@${r.tag}` : `<unset>`}</p>
@@ -57,10 +58,18 @@ export function GroupRow({ row: r }: { row: TgGroup }) {
         </Button>
       </div>
       <div className="flex items-center justify-start gap-2">
-        <p>{r.hide ? <Badge className="bg-yellow-800">HIDDEN</Badge> : <Badge variant="secondary">Visibile</Badge>}</p>
-        <Button type="button" variant="outline" size="icon-sm" onClick={toggleHide}>
-          <Pen />
-        </Button>
+        <p>
+          {r.hide ? (
+            <Badge onClick={toggleHide} className="bg-yellow-800 hover:bg-yellow-600 cursor-pointer">
+              HIDDEN
+            </Badge>
+          ) : (
+            <Badge onClick={toggleHide} variant="secondary" className="hover:bg-slate-600 cursor-pointer">
+              Visibile
+            </Badge>
+          )}
+        </p>
+        <LeaveChat chatId={r.telegramId} />
       </div>
     </div>
   )

src/app/dashboard/(active)/telegram/groups/group-row.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { OctagonX, Trash2 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { toast } from "sonner"
+import { Spinner } from "@/components/spinner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { leaveChat } from "@/server/actions/groups"
+
+export function LeaveChat({ chatId }: { chatId: number }) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [pending, setPending] = useState(false)
+
+  async function submit() {
+    setPending(true)
+    try {
+      const { error } = await leaveChat(chatId)
+
+      if (error === "UNAUTHORIZED") toast.error("You don't have enough permission")
+      else if (error === "BOT_ERROR") {
+        toast.error("Cannot leave the group")
+      } else if (error === "NOT_FOUND") {
+        toast.warning("Group left BUT not found in db")
+      } else {
+        toast.success("Group left and deleted")
+        router.refresh()
+      }
+    } catch (err) {
+      toast.error("There was an error")
+      console.error(err)
+    } finally {
+      setPending(false)
+      handleOpenChange(false)
+    }
+  }
+
+  function handleOpenChange(v: boolean) {
+    setOpen(v)
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger
+        render={
+          <Button variant="destructive">
+            <Trash2 />
+            Leave
+          </Button>
+        }
+      ></AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <OctagonX />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Leave chat</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will make the bot leave the chat and the backend delete the group from the table.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={pending} onClick={submit} variant="destructive">
+            {pending ? <Spinner /> : "Confirm"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

src/app/dashboard/(active)/telegram/groups/leave-chat.tsx

@@ -23,12 +23,12 @@ export default async function TgGroups({ searchParams }: { searchParams: Promise
         Count: <span className="text-foreground">{rows.length}</span>
       </p>
       <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-5 w-full border-b py-2">
+        <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] w-full border-b py-2">
           <p>telegram ID</p>
           <p>Title</p>
           <p>Tag</p>
           <p>Invite Link</p>
-          <p>Hide</p>
+          <p>Actions</p>
         </div>
         {sorted.map((r) => (
           <GroupRow row={r} key={r.telegramId} />

src/app/dashboard/(active)/telegram/groups/page.tsx

@@ -13,3 +13,10 @@ export async function setGroupHide(groupId: number, hide: boolean) {
 
   return trpc.tg.groups.setHide.mutate({ telegramId: groupId, hide })
 }
+
+export async function leaveChat(chatId: number) {
+  const { allowed, telegramId } = await requireRole(["owner", "direttivo", "president"])
+  if (!allowed) return { error: "UNAUTHORIZED" }
+
+  return trpc.tg.groups.leaveChat.mutate({ chatId, performerId: telegramId })
+}