unlink user

apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx

@@ -2,14 +2,17 @@
 
 import { formatCPF } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
+import { useToggle } from 'ahooks'
 import {
   EllipsisVerticalIcon,
   PencilIcon,
   UserRoundMinusIcon
 } from 'lucide-react'
-import { NavLink } from 'react-router'
+import { NavLink, useParams } from 'react-router'
+import { toast } from 'sonner'
 
 import { Abbr } from '@/components/abbr'
+import { useDataTable } from '@/components/data-table/data-table'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -123,12 +126,39 @@ export const columns: ColumnDef<User>[] = [
                 )}
               </NavLink>
             </DropdownMenuItem>
-            <DropdownMenuItem variant="destructive">
-              <UserRoundMinusIcon /> Desvincular
-            </DropdownMenuItem>
+            <UnlinkMenuItem userId={row.id} />
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
     )
   }
 ]
+
+function UnlinkMenuItem({ userId }: { userId: string }) {
+  const [loading, { set }] = useToggle(false)
+  const { orgid } = useParams()
+  const { table } = useDataTable<User>()
+
+  return (
+    <DropdownMenuItem
+      variant="destructive"
+      disabled={loading}
+      onClick={async (e) => {
+        e.preventDefault()
+        set(true)
+
+        const r = await fetch(`/~/api/orgs/${orgid}/users/${userId}`, {
+          method: 'DELETE'
+        })
+
+        if (r.ok) {
+          toast.info('O colaborador foi desvinculado')
+          // @ts-ignore
+          table.options.meta?.removeRow?.(userId)
+        }
+      }}
+    >
+      {loading ? <Spinner /> : <UserRoundMinusIcon />} Desvincular
+    </DropdownMenuItem>
+  )
+}