66 lines
2.1 KiB
Markdown
66 lines
2.1 KiB
Markdown
---
|
|
type: Entity
|
|
layer: wiki
|
|
tags: [stack, dashdescomplicar, integracao, csr, cache, fetch]
|
|
title: "CSR-Integration"
|
|
---
|
|
|
|
# CSR-Integration
|
|
|
|
Camada de integração Cliente-Servidor do DashDescomplicar. Gere fetch de dados da API, cache local, reconnection logic e tratamento de erros para todos os painéis.
|
|
|
|
## Responsabilidades
|
|
|
|
- **Fetch API**: Chamadas HTTP à Express-API com tipagem TypeScript
|
|
- **Cache Local**: Estado React (`useState` + `useCallback`) para evitar refetchs desnecessários
|
|
- **Reconnection**: Lógica de retry em falhas de rede (sem exponential backoff — simplicidade)
|
|
- **Error Handling**: Erros capturados com `console.error`, estados de loading/error nos painéis
|
|
- **Refresh Manual**: Botão "Actualizar" (RefreshCw) em cada painel com animação de spinner
|
|
|
|
## Padrão de Fetch
|
|
|
|
```typescript
|
|
const [data, setData] = useState<T | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setRefreshing(true)
|
|
try {
|
|
const response = await fetch('/api/<endpoint>')
|
|
if (!response.ok) throw new Error('Failed')
|
|
setData(await response.json())
|
|
} catch {
|
|
console.error('Failed to fetch <endpoint>')
|
|
} finally {
|
|
setLoading(false)
|
|
setRefreshing(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { fetchData() }, [fetchData])
|
|
```
|
|
|
|
## Estados de UI
|
|
|
|
- **Loading**: Spinner animado com ícone específico do painel
|
|
- **Error**: Console.error (sem toast — minimalista)
|
|
- **Empty**: `if (!data) return null` (protecção de render)
|
|
- **Refreshing**: Ícone RefreshCw com animação `animate-spin`
|
|
|
|
## Localizações
|
|
|
|
- **Código**: Padrão replicado em cada `src/pages/*.tsx` (não extraído para hook — simplicidade)
|
|
- **Sessions API**: `src/lib/api/sessions.ts` (único módulo de API extraído)
|
|
|
|
## Dependências
|
|
|
|
- **Express-API**: Todos os endpoints REST
|
|
- **Dashboard-Engine**: Ciclo de vida React (mount/unmount)
|
|
- **Metrics**: Eventos de fetch (latência, erros)
|
|
|
|
## Fornece a
|
|
|
|
- **Todos os 9 painéis**: Dados actualizados da API
|
|
- **Metrics**: Telemetria de fetch (tempo de resposta, taxa de erro)
|