unlink user

apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx

@@ -44,22 +44,26 @@ interface DataTableProps<TData, TValue> {
   hiddenColumn?: string[]
 }
 
-const TableContext = createContext<{ table: Table<any> } | null>(null)
+interface TableContextProps<TData> {
+  table: Table<TData>
+}
+
+const TableContext = createContext<TableContextProps<any> | null>(null)
 
 export function useDataTable<TData>() {
-  const ctx = useContext(TableContext) as { table: Table<TData> } | null
+  const ctx = useContext(TableContext)
 
   if (!ctx) {
     throw new Error('TableContext is null')
   }
 
-  return ctx
+  return ctx as { table: Table<TData> }
 }
 
 export function DataTable<TData, TValue>({
+  data,
   children,
   columns,
-  data,
   sort,
   pageIndex,
   pageSize,
@@ -67,10 +71,10 @@ export function DataTable<TData, TValue>({
   setSelectedRows,
   hiddenColumn = []
 }: DataTableProps<TData, TValue>) {
+  const [dataTable, setDataTable] = useState<TData[]>(data)
   const columnVisibilityInit = Object.fromEntries(
     hiddenColumn.map((column) => [column, false])
   )
-
   const [searchParams, setSearchParams] = useSearchParams()
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>(columnVisibilityInit)
@@ -110,8 +114,12 @@ export function DataTable<TData, TValue>({
     })
   }
 
+  useEffect(() => {
+    setDataTable(data)
+  }, [data])
+
   const table = useReactTable({
-    data,
+    data: dataTable,
     columns,
     rowCount,
     state: {
@@ -131,7 +139,12 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination
+    onPaginationChange: setPagination,
+    meta: {
+      removeRow: (rowId: string) => {
+        setDataTable((rows) => rows.filter((row: any) => row?.id !== rowId))
+      }
+    }
   })
 
   useEffect(() => {
@@ -159,6 +172,7 @@ export function DataTable<TData, TValue>({
                           key={header.id}
                           className={cn(
                             'p-2.5',
+                            // @ts-ignore
                             header.column.columnDef.meta?.className
                           )}
                         >
@@ -187,6 +201,7 @@ export function DataTable<TData, TValue>({
                           key={cell.id}
                           className={cn(
                             'p-2.5',
+                            // @ts-ignore
                             cell.column.columnDef.meta?.className
                           )}
                         >

apps/admin.saladeaula.digital/app/routes/_.$orgid.certs._index/route.tsx

@@ -3,5 +3,17 @@ export function meta({}) {
 }
 
 export default function Route() {
-  return <>index org</>
+  return (
+    <>
+      <div className="space-y-0.5 mb-8">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Gerenciar certificações
+        </h1>
+        <p className="text-muted-foreground">
+          Centralize o controle das certificações dos colaboradores e acompanhe
+          prazos e renovações com facilidade.
+        </p>
+      </div>
+    </>
+  )
 }

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>
+  )
+}

apps/admin.saladeaula.digital/app/routes/_.$orgid.users.add/route.tsx

@@ -73,8 +73,6 @@ export async function action({ params, request, context }: Route.ActionArgs) {
     context
   })
 
-  console.log(r)
-
   if (!r.ok) {
     const error = await r.json().catch(() => ({}))
     return { ok: false, error }

apps/admin.saladeaula.digital/tsconfig.json

@@ -4,6 +4,7 @@
     { "path": "./tsconfig.node.json" },
     { "path": "./tsconfig.cloudflare.json" }
   ],
+  "include": ["types/**/*.d.ts"],
   "compilerOptions": {
     "checkJs": true,
     "verbatimModuleSyntax": true,

apps/admin.saladeaula.digital/types/react-table.d.ts

@@ -0,0 +1,11 @@
+import '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends unknown, TValue> {
+    className?: string
+  }
+
+  interface TableMeta<TData extends unknown> {
+    removeRow?: (rowId: string) => void
+  }
+}