widget courrier refactor

components/parole.tsx

@@ -3,11 +3,14 @@
 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 { RefreshCw, MessageSquare, Loader2 } 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";
+import { useUnifiedRefresh } from "@/hooks/use-unified-refresh";
+import { REFRESH_INTERVALS } from "@/lib/constants/refresh-intervals";
+import { Badge } from "@/components/ui/badge";
 
 interface Message {
   id: string;
@@ -40,19 +43,23 @@ export function Parole() {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
+  const [unreadCount, setUnreadCount] = useState<number>(0);
   const router = useRouter();
   const { data: session, status } = useSession();
   const { triggerNotificationRefresh } = useTriggerNotification();
   const lastUnreadCountRef = useRef<number>(-1); // Initialize to -1 to detect first load
   const isInitializedRef = useRef<boolean>(false);
 
-  const fetchMessages = async (isRefresh = false) => {
-    try {
-      if (isRefresh) {
-        setRefreshing(true);
-      }
+  const fetchMessages = async (forceRefresh = false) => {
+    // Only show loading spinner on initial load, not on auto-refresh
+    if (!messages.length) {
+      setLoading(true);
+    }
+    setRefreshing(true);
+    setError(null);
 
-      const response = await fetch('/api/rocket-chat/messages' + (isRefresh ? '?refresh=true' : ''), {
+    try {
+      const response = await fetch('/api/rocket-chat/messages' + (forceRefresh ? '?refresh=true' : ''), {
         cache: 'no-store',
         next: { revalidate: 0 },
         credentials: 'include',
@@ -68,6 +75,9 @@ export function Parole() {
         // Utiliser le totalUnreadCount de l'API (plus fiable)
         const currentUnreadCount = data.totalUnreadCount || 0;
         
+        // Update unread count state for badge display
+        setUnreadCount(currentUnreadCount);
+        
         // On initialise le count au premier chargement
         if (!isInitializedRef.current) {
           isInitializedRef.current = true;
@@ -110,15 +120,32 @@ export function Parole() {
     }
   };
 
+  // Initial fetch on mount
   useEffect(() => {
     if (status === 'authenticated') {
-      fetchMessages();
-      // Set up polling every 30 seconds with force refresh to bypass cache
-      const interval = setInterval(() => fetchMessages(true), 30000);
-      return () => clearInterval(interval);
+      fetchMessages(false); // Use cache on initial load
     }
   }, [status]);
 
+  // Integrate unified refresh for automatic polling
+  const { refresh } = useUnifiedRefresh({
+    resource: 'parole',
+    interval: REFRESH_INTERVALS.PAROLE, // 30 seconds
+    enabled: status === 'authenticated',
+    onRefresh: async () => {
+      await fetchMessages(false); // Use cache for auto-refresh
+    },
+    priority: 'high',
+  });
+
+  // Manual refresh handler (bypasses cache)
+  const handleManualRefresh = async (e?: React.MouseEvent) => {
+    if (e) {
+      e.stopPropagation();
+    }
+    await fetchMessages(true); // Force refresh, bypass cache
+  };
+
   if (status === 'loading') {
     return (
       <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
@@ -172,41 +199,43 @@ export function Parole() {
         <CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
           <MessageSquare className="h-5 w-5 text-gray-600" />
           Parole
+          {unreadCount > 0 && (
+            <Badge variant="destructive" className="ml-1 text-xs">
+              {unreadCount}
+            </Badge>
+          )}
         </CardTitle>
         <Button 
           variant="ghost" 
           size="icon"
-          onClick={(e) => {
-            e.stopPropagation();
-            fetchMessages(true);
-          }}
+          onClick={handleManualRefresh}
           disabled={refreshing}
-          className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`}
+          className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
         >
-          <RefreshCw className="h-4 w-4" />
+          <RefreshCw className={`h-3.5 w-3.5 text-gray-600 ${refreshing ? 'animate-spin' : ''}`} />
         </Button>
       </CardHeader>
       <CardContent className="p-4">
-        {loading && <p className="text-center text-gray-500">Loading messages...</p>}
-        {error && (
-          <div className="text-center">
-            <p className="text-red-500">Error: {error}</p>
+        {loading && messages.length === 0 ? (
+          <div className="text-center py-6 flex flex-col items-center">
+            <Loader2 className="h-6 w-6 animate-spin text-gray-400 mb-2" />
+            <p className="text-gray-500">Chargement des messages...</p>
+          </div>
+        ) : error ? (
+          <div className="text-center py-4">
+            <p className="text-red-500 text-sm mb-2">{error}</p>
             <Button 
               variant="outline" 
-              onClick={(e) => {
-                e.stopPropagation();
-                fetchMessages(true);
-              }}
+              onClick={handleManualRefresh}
               className="mt-2"
             >
-              Try Again
+              Réessayer
             </Button>
           </div>
-        )}
-        {!loading && !error && (
+        ) : (
           <div className="space-y-4 max-h-[400px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
             {messages.length === 0 ? (
-              <p className="text-center text-gray-500">No messages found</p>
+              <p className="text-center text-gray-500 py-6">Aucun message</p>
             ) : (
               messages.map((message) => (
                 <div key={message.id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">