Module 7 : SmartCommon - Hooks
SmartCommon fournit des hooks spécialisés pour les applications SmartMaker. Ce module couvre les hooks essentiels pour l'API, l'état, les utilitaires et la synchronisation offline.
Prérequis
- Module 3 complété (hooks React fondamentaux)
- Module 6 complété (composants SmartCommon)
Catégories de hooks
SmartCommon organise ses hooks en quatre catégories :
| Catégorie | Hooks | Usage |
|---|---|---|
| Globaux | useApi, useGlobalStates, useNavigation, useConfirm, usePWAUpdate | Contexte application |
| Locaux | useStates, useForm, useDb | État composant |
| Utilitaires | useIntl, useWindow, useFile, useAnimation, useListDnD | Helpers divers |
| Sync | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage | Offline-first |
Chapitres
| # | Chapitre | Contenu |
|---|---|---|
| 1 | useApi | Requêtes API avec authentification JWT |
| 2 | Gestion d'état | useGlobalStates, useStates, useForm, useConfirm, usePWAUpdate |
| 3 | Utilitaires | useIntl, useWindow, useDb, useFile, useAnimation, useListDnD |
| 4 | Synchronisation | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage |
Import des hooks
- snippet.javascript
import { // Hooks globaux useApi, useGlobalStates, useNavigation, useLibConfig, useConfirm, usePWAUpdate, // Hooks locaux useStates, useForm, useDb, // Hooks utilitaires useIntl, useWindow, useFile, useAnimation, useListDnD, // Hooks sync / offline useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage, // Composants sync ConflictResolver } from '@cap-rel/smartcommon';
Objectifs du module
À la fin de ce module, vous saurez :
- Faire des requêtes API authentifiées avec useApi
- Gérer l'état global avec useGlobalStates
- Gérer l'état local avec useStates et useForm
- Utiliser les hooks utilitaires (formatage, fenêtre, fichiers)
- Implémenter une application offline-first avec useSyncClient
Tableau récapitulatif
| Hook | Catégorie | Description |
|---|---|---|
| useApi | Global | Appels API avec auth JWT |
| useGlobalStates | Global | État global persistant |
| useNavigation | Global | Navigation React Router |
| useLibConfig | Global | Configuration de l'app |
| useConfirm | Global | Dialogues de confirmation |
| usePWAUpdate | Global | Mises à jour PWA |
| useStates | Local | État local avec path notation |
| useForm | Local | Gestion de formulaires |
| useDb | Local | Base IndexedDB (Dexie) |
| useIntl | Utilitaire | Formatage dates/nombres |
| useWindow | Utilitaire | Dimensions fenêtre |
| useFile | Utilitaire | Manipulation fichiers |
| useAnimation | Utilitaire | Animations Framer Motion |
| useListDnD | Utilitaire | Drag and drop listes |
| useSyncClient | Sync | Synchronisation offline-first |
| useOnlineStatus | Sync | Détection online/offline |
| useCachedQuery | Sync | Cache de requêtes |
| useAuthenticatedImage | Sync | Images authentifiées avec cache |