feat: group hide

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.7",
+    "@polinetwork/backend": "^0.15.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-query": "^5.90.19",

pnpm-lock.yaml

@@ -1,9 +1,10 @@
 "use client"
-import { useQueryClient } from "@tanstack/react-query"
-import { ArrowLeft, Copy, Search, X } from "lucide-react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { ArrowLeft, Copy, Pen, Search, X } from "lucide-react"
 import Link from "next/link"
 import { useState } from "react"
 import { toast } from "sonner"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -17,14 +18,25 @@ export default function TgGroups() {
 
   const trpc = useTRPC()
   const qc = useQueryClient()
-  const queryOpts = trpc.tg.groups.search.queryOptions({ query, limit: 20 })
+  const queryOpts = trpc.tg.groups.search.queryOptions({ query, limit: 20, showHidden: true })
 
   const [rows, setRows] = useState<Groups>([])
-  async function search(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
 
+  async function search() {
     const res = await qc.fetchQuery(queryOpts)
     setRows(res.groups)
+    return res
+  }
+
+  async function invalidate() {
+    await qc.invalidateQueries(queryOpts)
+    await search()
+  }
+
+  async function submit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    const res = await search()
     if (res.count === 0) toast.warning("No groups found with this query")
     else toast.info(`Found ${res.count} groups`)
   }
@@ -39,7 +51,7 @@ export default function TgGroups() {
       <Link href="/dashboard/telegram" className="flex gap-1 items-center text-muted-foreground mb-2 hover:underline">
         <ArrowLeft size={16} /> Back
       </Link>
-      <form onSubmit={search} className="pt-2 gap-y-4 flex flex-col justify-start items-start">
+      <form onSubmit={submit} className="pt-2 gap-y-4 flex flex-col justify-start items-start">
         <div className="flex gap-2 flex-col items-start justify-start">
           <Label htmlFor="email" className="text-base">
             Search
@@ -70,23 +82,35 @@ export default function TgGroups() {
         </div>
       </form>
       <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-4 w-full border-b py-2">
+        <div className="grid gap-4 items-center grid-cols-5 w-full border-b py-2">
           <p>telegram ID</p>
           <p>Title</p>
           <p>Tag</p>
           <p>Invite Link</p>
+          <p>Hide</p>
         </div>
         {rows.map((r) => (
-          <GroupRow row={r} key={r.telegramId} />
+          <GroupRow row={r} key={r.telegramId} invalidate={invalidate} />
         ))}
       </div>
     </div>
   )
 }
 
-function GroupRow({ row: r }: { row: Groups[number] }) {
+function GroupRow({ row: r, invalidate }: { row: Groups[number]; invalidate: () => void }) {
+  const trpc = useTRPC()
+  const { mutateAsync: hideMutate } = useMutation(trpc.tg.groups.setHide.mutationOptions())
+
+  async function toggleHide() {
+    const ok = await hideMutate({ telegramId: r.telegramId, hide: !r.hide }).catch(() => false)
+    if (!ok) toast.error("The field cannot be modified")
+
+    toast.success("Hide option toggled!")
+    invalidate()
+  }
+
   return (
-    <div className="grid gap-4 items-center grid-cols-4 border-b py-2 w-full">
+    <div className="grid gap-4 items-center grid-cols-5 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>
@@ -97,15 +121,15 @@ function GroupRow({ row: r }: { row: Groups[number] }) {
             target="_blank"
             rel="noopener noreferrer"
             aria-label={`Link for group ${r.title}`}
-            className="hover:underline"
+            className="hover:underline text-xs"
           >
             {r.link}
           </a>
         )}
         <Button
           type="button"
           variant="outline"
-          size="icon"
+          size="icon-sm"
           className={!r.link ? "hidden" : ""}
           onClick={async () => {
             try {
@@ -121,6 +145,12 @@ function GroupRow({ row: r }: { row: Groups[number] }) {
           <Copy />
         </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" className={!r.link ? "hidden" : ""} onClick={toggleHide}>
+          <Pen />
+        </Button>
+      </div>
     </div>
   )
 }

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

@@ -38,7 +38,7 @@ export function NewGroupAdmin({ user, alreadyIn }: { user: User; alreadyIn: numb
   const [groups, setGroups] = useState<Groups>([])
   const [selectedGroup, setSelectedGroup] = useState<Groups[number] | null>(null)
 
-  const queryOpts = trpc.tg.groups.search.queryOptions({ query: groupQuery, limit: 20 })
+  const queryOpts = trpc.tg.groups.search.queryOptions({ query: groupQuery, limit: 20, showHidden: true })
 
   async function searchGroup(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()