Initial commit

components/ConnectionStatus.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { getServerStatusService, ServerStatusEvent } from '../services/serverStatusService';
+
+interface ConnectionStatusProps {
+    showToasts?: boolean;
+    showIndicator?: boolean;
+    className?: string;
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ 
+    showToasts = true, 
+    showIndicator = true,
+    className = ''
+}) => {
+    const [isOnline, setIsOnline] = useState(true);
+    const [lastEvent, setLastEvent] = useState<ServerStatusEvent | null>(null);
+    const [isChecking, setIsChecking] = useState(false);
+    const toast = useRef<Toast>(null);
+    const lastStatusRef = useRef<boolean | null>(null);
+
+    useEffect(() => {
+        let unsubscribe: (() => void) | null = null;
+
+        const handleServerStatusChange = (online: boolean, event?: ServerStatusEvent) => {
+            const wasOnline = lastStatusRef.current;
+            
+            if (wasOnline !== null && wasOnline !== online && showToasts) {
+                if (online) {
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Serveur backend reconnecté',
+                        detail: 'Le serveur backend est de nouveau accessible',
+                        life: 4000
+                    });
+                } else {
+                    toast.current?.show({
+                        severity: 'error',
+                        summary: 'Serveur backend inaccessible',
+                        detail: 'Le serveur backend ne répond pas. Vérifiez qu\'il est démarré (mvn quarkus:dev).',
+                        sticky: true
+                    });
+                }
+            }
+            
+            setIsOnline(online);
+            setLastEvent(event || null);
+            lastStatusRef.current = online;
+        };
+
+        // Obtenir l'instance du service côté client
+        const service = getServerStatusService();
+        if (!service) return;
+        
+        // S'abonner aux changements de statut via SSE
+        unsubscribe = service.onStatusChange(handleServerStatusChange);
+        
+        // Statut initial
+        const currentStatus = service.getCurrentStatus();
+        setIsOnline(currentStatus);
+        lastStatusRef.current = currentStatus;
+        
+        return () => {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
+    }, [showToasts]);
+
+    const getStatusText = () => {
+        if (isChecking) return 'Vérification...';
+        return isOnline ? 'Serveur OK' : 'Serveur KO';
+    };
+    
+    const getStatusTooltip = () => {
+        const baseStatus = isOnline ? 'Serveur backend accessible' : 'Serveur backend indisponible';
+        const sseInfo = 'Monitoring via Server-Sent Events';
+        const eventInfo = lastEvent ? `Dernière mise à jour: ${new Date(lastEvent.timestamp).toLocaleTimeString()}` : '';
+        return `${baseStatus} - ${sseInfo}${eventInfo ? ` - ${eventInfo}` : ''}`;
+    };
+
+    if (!showIndicator && showToasts) {
+        return <Toast ref={toast} />;
+    }
+
+    if (!showIndicator) {
+        return null;
+    }
+
+    return (
+        <div className={`flex align-items-center gap-2 ${className}`}>
+            <Toast ref={toast} />
+            
+            <div className="flex align-items-center gap-2">
+                {isChecking ? (
+                    <ProgressSpinner 
+                        style={{ width: '20px', height: '20px' }} 
+                        strokeWidth="4"
+                    />
+                ) : (
+                    <i 
+                        className={`pi ${isOnline ? 'pi-circle-fill text-green-500' : 'pi-circle-fill text-red-500'}`}
+                        style={{ fontSize: '12px' }}
+                    />
+                )}
+                
+                <span 
+                    className={`text-sm font-medium ${isOnline ? 'text-green-700' : 'text-red-700'}`}
+                    title={getStatusTooltip()}
+                >
+                    {getStatusText()}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default ConnectionStatus;