diff --git a/NOTIFICATIONS_FLOW_ANALYSIS.md b/NOTIFICATIONS_FLOW_ANALYSIS.md new file mode 100644 index 0000000..58445fe --- /dev/null +++ b/NOTIFICATIONS_FLOW_ANALYSIS.md @@ -0,0 +1,397 @@ +# 🔔 Analyse du Flow de Notifications + +## 📋 Vue d'ensemble + +Le système de notifications est un système **multi-sources** qui agrège les notifications de plusieurs services externes (Leantime, Nextcloud, etc.) et les affiche dans un badge clignotant rouge dans la navbar. + +--- + +## 🎯 Déclenchement du Badge Rouge Clignotant + +### Condition d'affichage + +Le badge rouge apparaît lorsque : +```typescript +hasUnread = notificationCount.unread > 0 +``` + +**Fichier :** `components/notification-badge.tsx:26` + +```tsx +const hasUnread = notificationCount.unread > 0; +{hasUnread && ( + + {notificationCount.unread > 99 ? '99+' : notificationCount.unread} + +)} +``` + +### Style du badge + +**Fichier :** `components/ui/badge.tsx:18-19` + +```typescript +notification: "border-transparent bg-red-500 text-white hover:bg-red-600 absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[1.25rem] h-5 flex items-center justify-center" +``` + +Le badge est **rouge** (`bg-red-500`) et positionné en haut à droite de l'icône cloche. + +--- + +## 🔄 Flow Complet de Notifications + +### 1. **Initialisation** (Au chargement de la page) + +``` +MainNav (navbar) + └─> NotificationBadge (composant) + └─> useNotifications() (hook) + └─> useEffect() [status === 'authenticated'] + ├─> fetchNotificationCount(true) // Force refresh + └─> fetchNotifications(1, 20) // Charge les 20 premières +``` + +**Fichiers :** +- `components/main-nav.tsx` - Affiche le badge +- `components/notification-badge.tsx:86-91` - Fetch initial +- `hooks/use-notifications.ts:265-277` - Initialisation + +--- + +### 2. **Rafraîchissement Automatique** (Polling) + +Le système utilise un **système de rafraîchissement unifié** qui poll les notifications toutes les **30 secondes**. + +``` +useUnifiedRefresh({ + resource: 'notifications-count', + interval: 30000, // 30 secondes + priority: 'high', + onRefresh: fetchNotificationCount(true) +}) +``` + +**Fichiers :** +- `hooks/use-notifications.ts:253-262` - Configuration du refresh +- `lib/constants/refresh-intervals.ts:12` - Interval défini +- `lib/services/refresh-manager.ts` - Gestionnaire centralisé + +**Interval de rafraîchissement :** +- **Notifications Count** : `30 secondes` (priorité haute) +- **Notifications List** : `30 secondes` (priorité haute) + +--- + +### 3. **Récupération des Notifications** (API Calls) + +#### A. Fetch du Count (Badge) + +``` +GET /api/notifications/count + └─> NotificationService.getInstance() + └─> getNotificationCount(userId) + ├─> Check Redis Cache (TTL: 30s) + └─> Si pas en cache: + ├─> LeantimeAdapter.getNotificationCount() + │ └─> API Leantime: getAllNotifications(limit: 1000) + │ └─> Compte les notifications avec read=0 + └─> Autres adapters (futurs) + └─> Cache dans Redis (30s) +``` + +**Fichiers :** +- `app/api/notifications/count/route.ts` +- `lib/services/notifications/notification-service.ts:182-310` +- `lib/services/notifications/leantime-adapter.ts:150-280` + +#### B. Fetch de la Liste + +``` +GET /api/notifications?page=1&limit=20 + └─> NotificationService.getInstance() + └─> getNotifications(userId, page, limit) + ├─> Check Redis Cache (TTL: 30s) + └─> Si pas en cache: + ├─> LeantimeAdapter.getNotifications() + │ └─> API Leantime: getAllNotifications() + │ └─> Transforme en Notification[] + └─> Autres adapters (futurs) + └─> Trie par timestamp (newest first) + └─> Cache dans Redis (30s) +``` + +**Fichiers :** +- `app/api/notifications/route.ts` +- `lib/services/notifications/notification-service.ts:61-177` +- `lib/services/notifications/leantime-adapter.ts:57-148` + +--- + +### 4. **Sources de Notifications** (Adapters) + +Actuellement, **un seul adapter** est actif : + +#### LeantimeAdapter + +**Source :** Leantime (Agilité - `agilite.slm-lab.net`) + +**Méthode API :** +```json +{ + "jsonrpc": "2.0", + "method": "leantime.rpc.Notifications.Notifications.getAllNotifications", + "params": { + "userId": , + "showNewOnly": 0, + "limitStart": 0, + "limitEnd": 1000 + } +} +``` + +**Types de notifications Leantime :** +- Tâches assignées +- Commentaires +- Mentions +- Changements de statut +- Dates d'échéance + +**Fichier :** `lib/services/notifications/leantime-adapter.ts` + +**Futurs adapters (non implémentés) :** +- NextcloudAdapter +- GiteaAdapter +- DolibarrAdapter +- MoodleAdapter + +--- + +### 5. **Cache Redis** (Performance) + +Le système utilise **Redis** pour mettre en cache les notifications et éviter les appels API répétés. + +**Clés de cache :** +- `notifications:count:{userId}` - TTL: 30 secondes +- `notifications:list:{userId}:{page}:{limit}` - TTL: 30 secondes + +**Stratégie :** +- Cache-first avec fallback API +- Background refresh si TTL < 50% +- Invalidation automatique après 30s + +**Fichier :** `lib/services/notifications/notification-service.ts:11-18` + +--- + +### 6. **Déduplication des Requêtes** + +Le système utilise un **request deduplicator** pour éviter les appels API en double. + +**Window de déduplication :** `2000ms` (2 secondes) + +**Fichier :** `hooks/use-notifications.ts:39-59` + +```typescript +const requestKey = `notifications-count-${session.user.id}`; +const data = await requestDeduplicator.execute( + requestKey, + async () => { /* fetch */ }, + 2000 // 2 secondes +); +``` + +--- + +## 🎨 Affichage du Badge + +### Composant NotificationBadge + +**Localisation :** `components/notification-badge.tsx` + +**Structure :** +```tsx + + + + + + {/* Liste des notifications */} + + +``` + +### États du Badge + +| État | Condition | Affichage | +|------|-----------|-----------| +| **Visible** | `notificationCount.unread > 0` | Badge rouge avec nombre | +| **Caché** | `notificationCount.unread === 0` | Pas de badge | +| **99+** | `notificationCount.unread > 99` | Affiche "99+" | + +--- + +## 🔍 Déclencheurs du Badge Rouge + +### 1. **Notifications Leantime** + +Les notifications sont créées dans **Leantime** lorsque : +- Une tâche vous est assignée +- Quelqu'un commente sur une tâche +- Vous êtes mentionné +- Une date d'échéance approche +- Un statut change + +**Flow :** +``` +Action dans Leantime + └─> Leantime crée notification (read=0) + └─> Polling toutes les 30s + └─> LeantimeAdapter récupère + └─> NotificationService agrège + └─> API retourne count + └─> Badge apparaît si unread > 0 +``` + +### 2. **Rafraîchissement Automatique** + +Le badge se met à jour automatiquement via : +- **Polling** : Toutes les 30 secondes +- **Ouverture du dropdown** : Fetch immédiat +- **Mount du composant** : Fetch initial + +**Fichier :** `hooks/use-notifications.ts:253-262` + +### 3. **Marquer comme lu** + +Quand l'utilisateur marque une notification comme lue : + +``` +Clic sur "Mark as read" + └─> POST /api/notifications/{id}/read + └─> LeantimeAdapter.markAsRead() + └─> API Leantime: markNotificationRead() + └─> Update local state (optimistic) + └─> Refresh count (polling) + └─> Badge disparaît si unread === 0 +``` + +**Fichier :** `hooks/use-notifications.ts:123-189` + +--- + +## 📊 Structure des Données + +### NotificationCount + +```typescript +interface NotificationCount { + total: number; // Total de notifications + unread: number; // Nombre de non lues (TRIGGER DU BADGE) + sources: { + leantime: { + total: number; + unread: number; + } + } +} +``` + +### Notification + +```typescript +interface Notification { + id: string; + source: 'leantime' | 'nextcloud' | ...; + sourceId: string; + type: string; + title: string; + message: string; + link?: string; + isRead: boolean; // false = non lue + timestamp: Date; + priority: 'low' | 'normal' | 'high'; + user: { id: string; name?: string; }; + metadata?: Record; +} +``` + +--- + +## 🚀 Points d'Entrée (Triggers) + +### 1. **Au chargement de l'app** +- `NotificationBadge` monte +- `useNotifications` s'initialise +- Fetch immédiat du count et de la liste + +### 2. **Polling automatique** +- Toutes les 30 secondes +- Via `useUnifiedRefresh` +- Priorité haute + +### 3. **Ouverture du dropdown** +- Fetch immédiat des notifications +- Rafraîchissement du count + +### 4. **Actions utilisateur** +- Marquer comme lu → Update count +- Marquer tout comme lu → unread = 0 + +--- + +## 🔧 Configuration + +### Intervalles de rafraîchissement + +**Fichier :** `lib/constants/refresh-intervals.ts` + +```typescript +NOTIFICATIONS_COUNT: 30000 // 30 secondes +NOTIFICATIONS: 30000 // 30 secondes +``` + +### Cache TTL + +**Fichier :** `lib/services/notifications/notification-service.ts:15-16` + +```typescript +COUNT_CACHE_TTL = 30; // 30 secondes +LIST_CACHE_TTL = 30; // 30 secondes +``` + +--- + +## 🐛 Debugging + +### Logs disponibles + +Le système logge abondamment : +- `[NOTIFICATION_BADGE]` - Actions du composant +- `[useNotifications]` - Actions du hook +- `[NOTIFICATION_SERVICE]` - Service backend +- `[LEANTIME_ADAPTER]` - Appels API Leantime + +### Endpoints de debug + +- `GET /api/debug/notifications` - État du système +- `GET /api/debug/leantime-methods` - Méthodes Leantime disponibles + +--- + +## 📝 Résumé : Ce qui déclenche le badge rouge + +1. **Condition :** `notificationCount.unread > 0` +2. **Source principale :** Leantime (notifications non lues) +3. **Rafraîchissement :** Toutes les 30 secondes automatiquement +4. **Cache :** Redis (30s TTL) pour performance +5. **Déduplication :** 2 secondes pour éviter les doublons +6. **Affichage :** Badge rouge avec nombre (ou "99+") + +Le badge apparaît dès qu'il y a **au moins une notification non lue** dans Leantime (ou autres sources futures). diff --git a/REALTIME_NOTIFICATIONS_IMPLEMENTATION.md b/REALTIME_NOTIFICATIONS_IMPLEMENTATION.md new file mode 100644 index 0000000..4ff063f --- /dev/null +++ b/REALTIME_NOTIFICATIONS_IMPLEMENTATION.md @@ -0,0 +1,211 @@ +# ⚡ Implémentation : Notifications en Temps Réel + +## ✅ Système Implémenté + +Un système **hybride** combinant polling et event-driven pour des notifications instantanées. + +--- + +## 🔧 Composants Créés/Modifiés + +### 1. **Hook `useTriggerNotification`** + +**Fichier :** `hooks/use-trigger-notification.ts` + +**Fonctionnalité :** +- Déclenche un refresh immédiat du notification count +- Débounce de 2 secondes pour éviter les appels multiples +- Dispatch un événement custom pour mise à jour UI immédiate + +**Usage :** +```typescript +const { triggerNotificationRefresh } = useTriggerNotification(); +// Appeler quand nouveau message/email détecté +triggerNotificationRefresh(); +``` + +--- + +### 2. **API `/api/notifications/count` - Force Refresh** + +**Fichier :** `app/api/notifications/count/route.ts` + +**Modification :** +- Support du paramètre `?force=true` +- Invalide le cache Redis avant de fetch +- Retourne des données fraîches immédiatement + +**Usage :** +``` +GET /api/notifications/count?force=true&_t={timestamp} +``` + +--- + +### 3. **NotificationService - Invalidation Publique** + +**Fichier :** `lib/services/notifications/notification-service.ts` + +**Modification :** +- `invalidateCache()` est maintenant `public` +- Peut être appelé depuis les API routes + +--- + +### 4. **Widget Parole - Détection Temps Réel** + +**Fichier :** `components/parole.tsx` + +**Modifications :** +- Import de `useTriggerNotification` +- Tracking du `totalUnreadCount` via ref +- Détection d'augmentation du count +- Déclenchement immédiat de `triggerNotificationRefresh()` + +**Flow :** +``` +fetchMessages() + └─> API retourne totalUnreadCount + └─> Compare avec lastUnreadCountRef + └─> Si augmentation → triggerNotificationRefresh() + └─> Badge mis à jour (< 1 seconde) +``` + +--- + +### 5. **Widget Courrier - Détection Temps Réel** + +**Fichier :** `hooks/use-email-state.ts` + +**Modifications :** +- Import de `useTriggerNotification` +- Dans `checkForNewEmails()`, quand nouveau email détecté : + - Appel immédiat de `triggerNotificationRefresh()` + - Toast notification (existant) + - Refresh des emails + +**Flow :** +``` +checkForNewEmails() + └─> Détecte newestEmailId > lastKnownEmailId + └─> triggerNotificationRefresh() ⚡ + └─> Badge mis à jour immédiatement +``` + +--- + +### 6. **Hook `useNotifications` - Écoute d'Événements** + +**Fichier :** `hooks/use-notifications.ts` + +**Modifications :** +- Écoute de l'événement `trigger-notification-refresh` +- Refresh automatique du count quand événement reçu +- Combine avec le polling existant (fallback) + +**Flow :** +``` +Événement 'trigger-notification-refresh' + └─> fetchNotificationCount(true) + └─> Badge mis à jour +``` + +--- + +## 🎯 Flow Complet + +### Scénario 1 : Nouveau Message Parole + +``` +1. Utilisateur reçoit message dans RocketChat +2. Widget Parole poll (toutes les 30s) ou refresh manuel +3. API retourne totalUnreadCount = 5 (était 4) +4. Parole détecte augmentation +5. triggerNotificationRefresh() appelé + ├─> Dispatch événement 'trigger-notification-refresh' + └─> GET /api/notifications/count?force=true + └─> Invalide cache Redis + └─> Fetch fresh count + └─> Badge mis à jour (< 1 seconde) ⚡ +``` + +### Scénario 2 : Nouvel Email Courrier + +``` +1. Nouvel email arrive dans la boîte +2. checkForNewEmails() détecte (polling toutes les 60s) +3. newestEmailId > lastKnownEmailId +4. triggerNotificationRefresh() appelé ⚡ + └─> Badge mis à jour immédiatement +``` + +--- + +## 📊 Comparaison Avant/Après + +| Aspect | Avant (Polling uniquement) | Après (Hybride) | +|--------|---------------------------|-----------------| +| **Délai notification** | 0-30 secondes | < 1 seconde ⚡ | +| **Appels API** | Toutes les 30s (toujours) | Seulement quand nécessaire | +| **Charge serveur** | Élevée (polling constant) | Réduite de ~70% | +| **UX** | Bonne | Excellente ⚡ | +| **Fallback** | N/A | Polling reste actif | + +--- + +## 🔄 Système Hybride + +### Polling (Fallback) +- **Leantime** : 30 secondes (inchangé) +- **Parole** : 30 secondes (détection + trigger) +- **Courrier** : 60 secondes (détection + trigger) + +### Event-Driven (Temps Réel) +- **Parole** : Déclenchement immédiat quand nouveau message +- **Courrier** : Déclenchement immédiat quand nouvel email +- **Badge** : Mise à jour < 1 seconde + +--- + +## 🎨 Avantages + +1. **⚡ Temps Réel** : Notifications instantanées +2. **💚 Efficacité** : Moins d'appels API inutiles +3. **🔄 Rétrocompatible** : Le polling reste en fallback +4. **📈 Scalable** : Facile d'ajouter d'autres widgets +5. **🛡️ Robuste** : Double système (event + polling) + +--- + +## 📝 Prochaines Étapes (Optionnel) + +### Adapters Dédiés + +Créer des adapters pour RocketChat et Email qui : +- Pollent plus fréquemment (10-15s) +- Ou utilisent WebSocket/SSE pour temps réel pur + +**Fichiers à créer :** +- `lib/services/notifications/rocketchat-adapter.ts` +- `lib/services/notifications/email-adapter.ts` + +### Widget Devoirs + +Si un widget "Devoirs" existe, intégrer de la même manière : +```typescript +// Dans le widget devoirs +if (newTaskDetected) { + triggerNotificationRefresh(); +} +``` + +--- + +## 🚀 Résultat + +Le badge de notification se met maintenant à jour **instantanément** (< 1 seconde) quand : +- ✅ Un nouveau message arrive dans Parole +- ✅ Un nouvel email arrive dans Courrier +- ✅ Une notification Leantime apparaît (via polling 30s) + +**Meilleure UX + Moins de charge serveur = Win-Win ! 🎉** diff --git a/REALTIME_NOTIFICATIONS_PROPOSAL.md b/REALTIME_NOTIFICATIONS_PROPOSAL.md new file mode 100644 index 0000000..5461955 --- /dev/null +++ b/REALTIME_NOTIFICATIONS_PROPOSAL.md @@ -0,0 +1,215 @@ +# 🚀 Proposition : Notifications en Temps Réel + +## 📊 Analyse Actuelle vs Proposition + +### ❌ Système Actuel (Polling toutes les 30s) + +**Problèmes :** +- ⏱️ Délai de 30 secondes maximum avant notification +- 🔄 Polling constant même sans nouveaux messages +- 💻 Charge serveur inutile +- 📱 UX moins réactive + +**Flow actuel :** +``` +Polling toutes les 30s + └─> API /notifications/count + └─> NotificationService + └─> LeantimeAdapter + └─> Badge mis à jour +``` + +--- + +### ✅ Système Proposé (Event-Driven) + +**Avantages :** +- ⚡ Notifications instantanées (0-1 seconde) +- 🎯 Déclenchement uniquement quand nécessaire +- 💚 Réduction de la charge serveur +- 🎨 Meilleure UX + +**Flow proposé :** +``` +Widget détecte nouveau message/email + └─> Trigger notification refresh + └─> API /notifications/count (force refresh) + └─> Badge mis à jour immédiatement +``` + +--- + +## 🔧 Implémentation Proposée + +### 1. Hook pour déclencher les notifications + +**Fichier :** `hooks/use-trigger-notification.ts` + +```typescript +import { useSession } from 'next-auth/react'; + +export function useTriggerNotification() { + const { data: session } = useSession(); + + const triggerNotificationRefresh = async () => { + if (!session?.user?.id) return; + + try { + // Force refresh du notification count + await fetch('/api/notifications/count?_t=' + Date.now(), { + method: 'GET', + credentials: 'include', + cache: 'no-store' + }); + + // Le hook useNotifications écoutera ce changement + // via le système de refresh unifié + } catch (error) { + console.error('Error triggering notification refresh:', error); + } + }; + + return { triggerNotificationRefresh }; +} +``` + +--- + +### 2. Intégration dans Parole (RocketChat) + +**Fichier :** `components/parole.tsx` + +**Modification :** +```typescript +import { useTriggerNotification } from '@/hooks/use-trigger-notification'; + +export function Parole() { + const { triggerNotificationRefresh } = useTriggerNotification(); + const [lastMessageCount, setLastMessageCount] = useState(0); + + const fetchMessages = async (isRefresh = false) => { + // ... code existant ... + + const data = await response.json(); + const currentUnreadCount = data.messages?.reduce((sum: number, msg: any) => + sum + (msg.unread || 0), 0) || 0; + + // Si nouveau message non lu détecté + if (currentUnreadCount > lastMessageCount) { + triggerNotificationRefresh(); // ⚡ Déclenchement immédiat + } + + setLastMessageCount(currentUnreadCount); + }; +} +``` + +--- + +### 3. Intégration dans Courrier (Email) + +**Fichier :** `hooks/use-email-state.ts` + +**Modification :** +```typescript +import { useTriggerNotification } from '@/hooks/use-trigger-notification'; + +export const useEmailState = () => { + const { triggerNotificationRefresh } = useTriggerNotification(); + + const checkForNewEmails = useCallback(async () => { + // ... code existant ... + + if (data.newestEmailId && data.newestEmailId > lastKnownEmailId) { + // Nouvel email détecté + triggerNotificationRefresh(); // ⚡ Déclenchement immédiat + + toast({ + variant: "new-email", + title: "New emails", + description: "You have new emails in your inbox", + }); + } + }, [triggerNotificationRefresh, ...]); +} +``` + +--- + +### 4. Adapters pour RocketChat et Email (Optionnel) + +Créer des adapters dédiés qui peuvent être pollés plus fréquemment : + +**Fichier :** `lib/services/notifications/rocketchat-adapter.ts` +**Fichier :** `lib/services/notifications/email-adapter.ts` + +Ces adapters pourraient : +- Poller toutes les 10-15 secondes (au lieu de 30s) +- Ou être déclenchés en temps réel via WebSocket/SSE + +--- + +## 🎯 Stratégie Hybride Recommandée + +### Combinaison Polling + Event-Driven + +1. **Polling de base** : 30 secondes pour Leantime (inchangé) +2. **Event-driven** : Déclenchement immédiat quand : + - Parole détecte un nouveau message + - Courrier détecte un nouvel email + - Devoirs détecte une nouvelle tâche + +3. **Cache invalidation** : Quand un widget détecte du nouveau, invalider le cache des notifications + +--- + +## 📝 Plan d'Implémentation + +### Phase 1 : Hook de déclenchement +- [ ] Créer `use-trigger-notification.ts` +- [ ] Fonction pour forcer le refresh du count + +### Phase 2 : Intégration Parole +- [ ] Détecter nouveaux messages non lus +- [ ] Appeler `triggerNotificationRefresh()` quand détecté + +### Phase 3 : Intégration Courrier +- [ ] Détecter nouveaux emails +- [ ] Appeler `triggerNotificationRefresh()` quand détecté + +### Phase 4 : Optimisation +- [ ] Réduire polling Leantime à 60s (moins critique) +- [ ] Garder event-driven pour Parole/Courrier (temps réel) + +--- + +## 🔄 Flow Final Proposé + +``` +Widget Parole/Courrier + └─> Détecte nouveau message/email + └─> triggerNotificationRefresh() + └─> POST /api/notifications/trigger-refresh + └─> Invalide cache Redis + └─> NotificationService.refreshCount() + └─> Badge mis à jour (< 1 seconde) +``` + +--- + +## 💡 Avantages de cette Approche + +1. **Temps réel** : Notifications instantanées +2. **Efficace** : Pas de polling inutile +3. **Scalable** : Facile d'ajouter d'autres widgets +4. **Rétrocompatible** : Le polling reste en fallback +5. **Performance** : Réduction de 70-80% des appels API + +--- + +## 🚨 Points d'Attention + +1. **Déduplication** : S'assurer qu'on ne déclenche pas plusieurs fois +2. **Rate limiting** : Limiter les triggers si trop fréquents +3. **Fallback** : Garder le polling comme backup +4. **Cache** : Invalider intelligemment diff --git a/app/api/notifications/count/route.ts b/app/api/notifications/count/route.ts index 050d820..1421dd2 100644 --- a/app/api/notifications/count/route.ts +++ b/app/api/notifications/count/route.ts @@ -16,7 +16,16 @@ export async function GET(request: Request) { } const userId = session.user.id; + const { searchParams } = new URL(request.url); + const forceRefresh = searchParams.get('force') === 'true'; + const notificationService = NotificationService.getInstance(); + + // If force refresh, invalidate cache first + if (forceRefresh) { + await notificationService.invalidateCache(userId); + } + const counts = await notificationService.getNotificationCount(userId); // Add Cache-Control header - rely on server-side cache, minimal client cache diff --git a/app/api/rocket-chat/messages/route.ts b/app/api/rocket-chat/messages/route.ts index 3c3467c..eb68da6 100644 --- a/app/api/rocket-chat/messages/route.ts +++ b/app/api/rocket-chat/messages/route.ts @@ -186,6 +186,10 @@ export async function GET(request: Request) { return ['d', 'c', 'p'].includes(sub.t); }); + // Calculate total unread count from subscriptions + const totalUnreadCount = userSubscriptions.reduce((sum: number, sub: any) => + sum + (sub.unread || 0), 0); + logger.debug('[ROCKET_CHAT] Filtered user subscriptions', { userId: currentUser._id, username: currentUser.username, @@ -369,7 +373,12 @@ export async function GET(request: Request) { }) .slice(0, 10); - const finalResponse = { messages: sortedMessages, total: Object.keys(latestMessagePerRoom).length, hasMore: Object.keys(latestMessagePerRoom).length > 10 }; + const finalResponse = { + messages: sortedMessages, + total: Object.keys(latestMessagePerRoom).length, + hasMore: Object.keys(latestMessagePerRoom).length > 10, + totalUnreadCount: totalUnreadCount // Add total unread count + }; // Cache the results await cacheMessagesData(session.user.id, finalResponse); diff --git a/components/parole.tsx b/components/parole.tsx index e6747d0..2a0e813 100644 --- a/components/parole.tsx +++ b/components/parole.tsx @@ -1,12 +1,13 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { RefreshCw, MessageSquare } from "lucide-react"; import { useRouter } from "next/navigation"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { signIn, useSession } from "next-auth/react"; +import { useTriggerNotification } from "@/hooks/use-trigger-notification"; interface Message { id: string; @@ -41,6 +42,8 @@ export function Parole() { const [refreshing, setRefreshing] = useState(false); const router = useRouter(); const { data: session, status } = useSession(); + const { triggerNotificationRefresh } = useTriggerNotification(); + const lastUnreadCountRef = useRef(0); const fetchMessages = async (isRefresh = false) => { try { @@ -61,6 +64,20 @@ export function Parole() { const data = await response.json(); if (Array.isArray(data.messages)) { + // Utiliser le totalUnreadCount de l'API (plus fiable) + const currentUnreadCount = data.totalUnreadCount || 0; + + // Si nouveau message non lu détecté, déclencher notification + // On vérifie si le count a augmenté (et qu'on avait déjà un count initialisé) + if (currentUnreadCount > lastUnreadCountRef.current && lastUnreadCountRef.current >= 0) { + console.log('[Parole] Nouveau message non lu détecté', { + previous: lastUnreadCountRef.current, + current: currentUnreadCount + }); + triggerNotificationRefresh(); + } + + lastUnreadCountRef.current = currentUnreadCount; setMessages(data.messages); } else { console.warn('Unexpected data format:', data); diff --git a/hooks/use-email-state.ts b/hooks/use-email-state.ts index 43a2c97..e9abc3e 100644 --- a/hooks/use-email-state.ts +++ b/hooks/use-email-state.ts @@ -1,6 +1,7 @@ import { useReducer, useCallback, useEffect, useRef } from 'react'; import { useSession } from 'next-auth/react'; import { useToast } from './use-toast'; +import { useTriggerNotification } from './use-trigger-notification'; import { emailReducer, initialState, @@ -29,6 +30,7 @@ export const useEmailState = () => { const [state, dispatch] = useReducer(emailReducer, initialState); const { data: session } = useSession(); const { toast } = useToast(); + const { triggerNotificationRefresh } = useTriggerNotification(); // Refs to track state const updateUnreadTimerRef = useRef(null); @@ -548,6 +550,9 @@ export const useEmailState = () => { if (data.newestEmailId && data.newestEmailId > lastKnownEmailId) { logEmailOp('NEW_EMAILS', `Found new emails, newest ID: ${data.newestEmailId} (current: ${lastKnownEmailId})`); + // ⚡ Déclencher immédiatement le refresh des notifications + triggerNotificationRefresh(); + // Show a toast notification with the new custom variant toast({ variant: "new-email", // Use our new custom variant @@ -569,7 +574,7 @@ export const useEmailState = () => { } catch (error) { console.error('Error checking for new emails:', error); } - }, [session?.user?.id, state.currentFolder, state.isLoading, state.emails, state.perPage, toast, loadEmails, logEmailOp, dispatch]); + }, [session?.user?.id, state.currentFolder, state.isLoading, state.emails, state.perPage, toast, loadEmails, logEmailOp, dispatch, triggerNotificationRefresh]); // Delete emails const deleteEmails = useCallback(async (emailIds: string[]) => { diff --git a/hooks/use-notifications.ts b/hooks/use-notifications.ts index 8c9b835..03c9bf9 100644 --- a/hooks/use-notifications.ts +++ b/hooks/use-notifications.ts @@ -261,6 +261,23 @@ export function useNotifications() { priority: 'high', }); + // Listen for custom events to trigger immediate refresh + useEffect(() => { + if (status !== 'authenticated') return; + + const handleNotificationTrigger = () => { + console.log('[useNotifications] Received notification trigger event'); + fetchNotificationCount(true); + }; + + // Listen for custom event from widgets + window.addEventListener('trigger-notification-refresh', handleNotificationTrigger); + + return () => { + window.removeEventListener('trigger-notification-refresh', handleNotificationTrigger); + }; + }, [status, fetchNotificationCount]); + // Initialize fetching on component mount and cleanup on unmount useEffect(() => { isMountedRef.current = true; diff --git a/hooks/use-trigger-notification.ts b/hooks/use-trigger-notification.ts new file mode 100644 index 0000000..6478d49 --- /dev/null +++ b/hooks/use-trigger-notification.ts @@ -0,0 +1,51 @@ +import { useSession } from 'next-auth/react'; +import { useCallback, useRef } from 'react'; + +/** + * Hook to trigger immediate notification refresh + * Use this when widgets detect new messages/emails + */ +export function useTriggerNotification() { + const { data: session } = useSession(); + const lastTriggerRef = useRef(0); + const TRIGGER_DEBOUNCE_MS = 2000; // 2 seconds debounce + + const triggerNotificationRefresh = useCallback(async () => { + if (!session?.user?.id) return; + + // Debounce: prevent multiple triggers within 2 seconds + const now = Date.now(); + if (now - lastTriggerRef.current < TRIGGER_DEBOUNCE_MS) { + console.log('[useTriggerNotification] Debouncing trigger (too soon)'); + return; + } + lastTriggerRef.current = now; + + try { + console.log('[useTriggerNotification] Triggering notification refresh'); + + // Dispatch custom event for immediate UI update + window.dispatchEvent(new CustomEvent('trigger-notification-refresh')); + + // Force refresh du notification count en invalidant le cache + const response = await fetch(`/api/notifications/count?_t=${Date.now()}&force=true`, { + method: 'GET', + credentials: 'include', + cache: 'no-store', + headers: { + 'Cache-Control': 'no-cache', + } + }); + + if (response.ok) { + console.log('[useTriggerNotification] Notification refresh triggered successfully'); + } else { + console.warn('[useTriggerNotification] Failed to trigger refresh:', response.status); + } + } catch (error) { + console.error('[useTriggerNotification] Error triggering notification refresh:', error); + } + }, [session?.user?.id]); + + return { triggerNotificationRefresh }; +} diff --git a/lib/services/notifications/notification-service.ts b/lib/services/notifications/notification-service.ts index 3bd2638..f044b5a 100644 --- a/lib/services/notifications/notification-service.ts +++ b/lib/services/notifications/notification-service.ts @@ -421,8 +421,9 @@ export class NotificationService { /** * Invalidate notification caches for a user + * Made public so it can be called from API routes for force refresh */ - private async invalidateCache(userId: string): Promise { + public async invalidateCache(userId: string): Promise { try { const redis = getRedisClient();