# Hooks e cliente HTTP

> useOonApi, useOonResource, useCoreMetadata, useModelSchema, useOonAuth, useOonTenant e o gating de permissões com Can.

Todos os hooks estão em `@oondemand/oon-core-front` e em `@oondemand/oon-core-front/hooks`.

## useOonApi

```tsx
const { http, core, resource } = useOonApi();
```

| Valor | Descrição |
|---|---|
| `http` | Instância Axios autenticada: `baseUrl`, sessão, CSRF, tenant e headers de auditoria |
| `core` | Cliente de `/core/*` (metadata, models) |
| `resource(basePath)` | Cliente CRUD memoizado |

```tsx
const { http } = useOonApi();

await http.post("/pedidos-acoes/123/aprovar");
const { data } = await http.get("/core/role-catalog");
const pdf = await http.post("/pdf/render", { html }, { responseType: "blob" });
```

> [!IMPORTANT]
> Use sempre o cliente do Core para chamar o backend do App. Ele cuida de sessão, CSRF, tenant e redirecionamento em 401. Não use `fetch` direto nem guarde tokens.

## useOonResource

```tsx
const pedidos = useOonResource<Pedido>("/pedidos");

const page = await pedidos.list({ pageIndex: 0, pageSize: 20, searchTerm: "acme", sort: "valor:desc", status: "Aprovado" });
const one = await pedidos.get(id);
await pedidos.create({ numero: "PC-01" }, { origem: "form" });
await pedidos.patch(id, { status: "Enviado" }, { origem: "workflow" });
await pedidos.delete(id);
await pedidos.importMany(rows, { origem: "import" });
const all = await pedidos.exportAll({ status: "Aprovado" });
```

O segundo argumento das mutações é o contexto de auditoria (`origem`: `datagrid`, `form`, `workflow`, `assistant`, `import`; `module`, `entity`), enviado nos headers `x-oon-*`.

## Combinando com TanStack Query

O Core já monta um `QueryClient` (dados obsoletos após 5 s, revalidação a cada 10 s com a aba visível e ao focar/reconectar).

```tsx
import { useQuery } from "@tanstack/react-query";
import { useOonResource } from "@oondemand/oon-core-front";

export function UltimosPedidos() {
  const pedidos = useOonResource<Pedido>("/pedidos");
  const { data, isLoading } = useQuery({
    queryKey: ["pedidos", "ultimos"],
    queryFn: () => pedidos.list({ pageSize: 5 }),
  });
  if (isLoading) return <CoreLoadingState />;
  return <ul>{data?.results.map((p) => <li key={p._id}>{p.numero}</li>)}</ul>;
}
```

## Metadata

```tsx
const { data: metadata } = useCoreMetadata();       // /core/metadata (cache 5 min)
const { data: model } = useModelSchema("Pedido");   // /core/models/Pedido
```

## useOonAuth

```tsx
const { user, roles, permissions, status, isAuthenticated, hasPermission, logout } = useOonAuth();
```

| Valor | Descrição |
|---|---|
| `user` | Usuário validado (`nome`, `email`, `tipo`…) |
| `roles`, `permissions`, `capabilities` | Resolvidos pelo backend |
| `status` | `loading`, `authenticated`, `first-access`, `unauthenticated`, `forbidden`, `error` |
| `hasPermission(p)` | Verifica uma ou várias permissões |
| `logout()`, `clearSession()`, `retry()` | Sessão |

`can(user, permission)` é a versão funcional.

## Can e PermissionGate

```tsx
import { Can } from "@oondemand/oon-core-front";

<Can permission="pedidos.approve" fallback={<span>Sem permissão</span>}>
  <button onClick={aprovar}>Aprovar</button>
</Can>
```

`Can` é um alias de `PermissionGate`. Aceita uma permissão ou uma lista (qualquer uma).

> [!WARNING]
> `Can` controla **experiência**, não segurança. O backend revalida cada operação.

## useOonTenant

Disponível em Apps tenant-aware (`tenancyModel ≠ none`): expõe o tenant selecionado e a troca de contexto. Apps `none` não montam o `TenantProvider`. `createTenantStorage` cria o storage isolado por janela (`sessionStorage`).

Fonte: https://sdk.oonapps.com/docs/frontend/hooks-e-api