feat: remove react-query in favor of server actions (#22)

* checkpoint: user-list user-details (no cards)

* checkpoint

* checkpoint

* checkpoint: user-details components

* checkpoint: grants

* checkpoint: azure

* fix: button as render

* checkpoint: account

* checkpoint: more grants

* fix: typos

* checkpoint: groups

* checkpoint: group row hide toggle

* feat: remove react-query

* fix: remove exposure of tRPC

* feat: add count for groups and users lists

* review

* fix: avoid double query in groups

* feat: put role check in actions

* fix: pending states

* fix: update auditlog query

* fix: better data fetching

* fix: old update state

Author: lorenzocorallo

package.json

@@ -16,15 +16,12 @@
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
-    "@polinetwork/backend": "^0.15.15",
+    "@polinetwork/backend": "^0.15.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
-    "@tanstack/react-query": "^5.90.19",
     "@tanstack/react-table": "^8.21.2",
     "@trpc/client": "11.5.1",
     "@trpc/next": "11.5.1",
-    "@trpc/react-query": "11.5.1",
-    "@trpc/tanstack-react-query": "11.5.1",
     "babel-plugin-react-compiler": "1.0.0",
     "better-auth": "^1.5.5",
     "class-variance-authority": "^0.7.1",

pnpm-lock.yaml

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { redirect } from "next/navigation"
 import loginSvg2 from "@/assets/svg/login-2.svg"
 import { Card } from "@/components/ui/card"
-import { getQueryClient, trpc } from "@/lib/trpc/server"
+import { getUserRoles } from "@/server/actions/users"
 import { getServerSession } from "@/server/auth"
 import { Logout } from "../link/logout"
 
@@ -11,8 +11,7 @@ export default async function OnboardingNoRole() {
   if (!session) redirect("/login")
   if (!session.user.telegramId) redirect("/onboarding/link")
 
-  const qc = getQueryClient()
-  const { roles } = await qc.fetchQuery(trpc.tg.permissions.getRoles.queryOptions({ userId: session.user.telegramId }))
+  const { roles } = await getUserRoles(session.user.telegramId)
   if (roles?.includes("creator")) redirect("/onboarding/unauthorized")
   if (roles && roles.length > 0) redirect("/dashboard")
 

src/app/(auth)/onboarding/no-role/page.tsx

@@ -1,27 +1,17 @@
-"use client"
-import { useQuery } from "@tanstack/react-query"
-import { useSession } from "@/lib/auth"
-import { useTRPC } from "@/lib/trpc/client"
+import { getUserRoles } from "@/server/actions/users"
+import { getServerSession } from "@/server/auth"
 
-export function Telegram() {
-  const { data: session, isPending } = useSession()
-  if (isPending || !session) return null
+export async function Telegram() {
+  const { data } = await getServerSession()
+  if (!data || !data.user.telegramId) return null
 
-  const { user } = session
-  if (!user.telegramUsername || !user.telegramId) return null
+  const { roles } = await getUserRoles(data.user.telegramId)
+  const length = roles?.length ?? 0
 
-  return <ShowTelegram username={user.telegramUsername} userId={user.telegramId} />
-}
-
-function ShowTelegram({ username, userId }: { username: string; userId: number }) {
-  const trpc = useTRPC()
-  const { data, isLoading } = useQuery(trpc.tg.permissions.getRoles.queryOptions({ userId }))
   return (
     <>
-      <span>@{username}</span>
-      {!isLoading && data?.roles?.length && (
-        <span className="text-foreground/30 text-xs">(roles: {data.roles.join(", ")})</span>
-      )}
+      <span>{data.user.telegramUsername ? `@${data.user.telegramUsername}` : data.user.id}</span>
+      {roles && length > 0 && <span className="text-foreground/30 text-xs">(roles: {roles.join(", ")})</span>}
     </>
   )
 }

src/app/dashboard/(active)/account/telegram.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { createColumnHelper, type Row } from "@tanstack/react-table"
 import { Badge } from "@/components/ui/badge"
-import type { ApiOutput } from "@/lib/trpc/types"
-import { SetAssocNumberDialog } from "./_components/set-assoc-number-dialog"
+import type { AzureMember } from "@/server/trpc/types"
+import { SetAssocNumberDialog } from "./set-assoc-number-dialog"
 
-type ParsedUser = ApiOutput["azure"]["members"]["getAll"][0]
-const ch = createColumnHelper<ParsedUser>()
+const ch = createColumnHelper<AzureMember>()
 
 export const columns = [
   ch.accessor("employeeId", {
@@ -46,6 +45,6 @@ export const columns = [
   }),
 ]
 
-function RowActions({ row: _ }: { row: Row<ParsedUser> }) {
+function RowActions({ row: _ }: { row: Row<AzureMember> }) {
   return <div className="flex gap-2 justify-start items-center"></div>
 }

src/app/dashboard/(active)/azure/members/columns.tsx

@@ -1,8 +1,10 @@
 "use client"
-import { useMutation } from "@tanstack/react-query"
 import { useRouter } from "next/navigation"
-import { useState } from "react"
+import { useState, useTransition } from "react"
 import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
 import {
   Sheet,
   SheetClose,
@@ -12,22 +14,16 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet"
-import { useTRPC } from "@/lib/trpc/client"
-import { Button } from "./ui/button"
-import { Input } from "./ui/input"
-import { Label } from "./ui/label"
+import { createAzureMember } from "@/server/actions/azure"
 
 export function CreateAssocUser() {
   const [open, setOpen] = useState<boolean>(false)
   const [firstName, setFirstName] = useState<string>("")
   const [lastName, setLastName] = useState<string>("")
   const [assocNumber, setAssocNumber] = useState<string>("")
   const [sendTo, setSendTo] = useState<string>("")
-  const trpc = useTRPC()
   const router = useRouter()
 
-  const { mutateAsync, isPending } = useMutation(trpc.azure.members.create.mutationOptions())
-
   function handleOpenChange(v: boolean): void {
     setOpen(v)
     setFirstName("")
@@ -36,11 +32,23 @@ export function CreateAssocUser() {
     setSendTo("")
   }
 
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
+  const [pending, startTransition] = useTransition()
+
+  async function handleSubmit() {
     if (!assocNumber || Number.isNaN(parseInt(assocNumber, 10))) return
 
-    const res = await mutateAsync({ assocNumber: parseInt(assocNumber, 10), firstName, lastName, sendEmailTo: sendTo })
+    const res = await createAzureMember({
+      assocNumber: parseInt(assocNumber, 10),
+      firstName,
+      lastName,
+      sendEmailTo: sendTo,
+    }).catch(() => null)
+
+    if (!res) {
+      toast.error("There was an error")
+      return
+    }
+
     if (res.error !== null) {
       toast.error(res.error)
       return
@@ -59,7 +67,7 @@ export function CreateAssocUser() {
         <SheetHeader className="px-0">
           <SheetTitle>Create new member account</SheetTitle>
         </SheetHeader>
-        <form onSubmit={handleSubmit}>
+        <form action={() => startTransition(handleSubmit)}>
           <div className="grid gap-4 py-4">
             <div className="grid w-full items-center gap-1.5">
               <Label htmlFor="first-name">First Name</Label>
@@ -117,11 +125,11 @@ export function CreateAssocUser() {
           </div>
           <SheetFooter className="mt-4 flex flex-row justify-end items-center">
             <SheetClose>
-              <Button variant="ghost" disabled={isPending}>
+              <Button variant="ghost" disabled={pending}>
                 Cancel
               </Button>
             </SheetClose>
-            <Button disabled={isPending}>{isPending ? "Saving..." : "Create"}</Button>
+            <Button disabled={pending}>{pending ? "Saving..." : "Create"}</Button>
           </SheetFooter>
         </form>
       </SheetContent>

src/components/create-assoc-member.tsx …e)/azure/members/create-assoc-member.tsxsrc/components/create-assoc-member.tsx renamed to src/app/dashboard/(active)/azure/members/create-assoc-member.tsx src/components/create-assoc-member.tsx renamed to src/app/dashboard/(active)/azure/members/create-assoc-member.tsx

@@ -3,20 +3,20 @@ import Link from "next/link"
 import { Suspense } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { Spinner } from "@/components/spinner"
-import { getQueryClient, trpc } from "@/lib/trpc/server"
+import { getAzureMembers } from "@/server/actions/azure"
 import { AssocTable } from "./table"
 
 export default async function AssocMembers() {
-  const qc = getQueryClient()
-  void qc.prefetchQuery(trpc.azure.members.getAll.queryOptions())
+  const members = await getAzureMembers()
+
   return (
     <div className="container p-8">
       <Link href="/dashboard/azure" className="flex gap-1 items-center text-muted-foreground mb-2 hover:underline">
         <ArrowLeft size={16} /> Back
       </Link>
       <ErrorBoundary fallback={<div>Something went wrong</div>}>
         <Suspense fallback={<Spinner />}>
-          <AssocTable />
+          <AssocTable members={members} />
         </Suspense>
       </ErrorBoundary>
     </div>