Gestion d'État

État Serveur (TanStack Query)

Nous appelons "État Serveur" toute donnée qui vient de l'API (Profil utilisateur, Liste des caméras, Alertes). Nous utilisons TanStack Query (React Query) pour gérer cela car :

1. Déduplication : Plusieurs composants peuvent demander useUser() sans spammer l'API.
2. Mise en Cache : Navigation instantanée entre les pages.
3. Invalidation : Quand nous mutons des données (ex: updateCameraName), nous appelons simplement queryClient.invalidateQueries(['cameras']) pour rafraîchir l'UI automatiquement.

État Client Global (Contexte)

AuthProvider

Enveloppe toute l'application.

• Responsabilité : Vérifie la présence d'un JWT valide au montage.
• Gestion des 401 : Si l'API retourne 401, il redirige automatiquement vers /login et efface la session.

ThemeProvider

Gère la préférence Light/Dark mode (persisté dans le LocalStorage).

Flux d'Authentification

1. Login : api.post('/login') retourne { token, refreshToken }.
2. Stockage : Nous utilisons TokenManager (singleton) pour stocker le token dans des cookies HTTP-only (pour la sécurité) ou LocalStorage (pour la facilité d'accès).
3. Requêtes : Le wrapper fetch personnalisé (ou intercepteur Axios) injecte Authorization: Bearer <token> dans chaque requête.
4. Sockets : useSocketManager lit aussi indépendamment le token pour authentifier les websockets.