feat: mise en place de la messagerie [#17]

2026-01-28 23:43:22 +00:00 · 2025-05-26 13:24:42 +02:00
parent e2df29d851
commit d37145b73e
64 changed files with 13113 additions and 853 deletions
--- a/Front-End/src/components/Chat/ConnectionStatus.js
+++ b/Front-End/src/components/Chat/ConnectionStatus.js
@ -0,0 +1,79 @@
+import React from 'react';
+import { Wifi, WifiOff, RotateCcw } from 'lucide-react';
+
+const ConnectionStatus = ({ status, onReconnect }) => {
+  const getStatusInfo = () => {
+    switch (status) {
+      case 'connected':
+        return {
+          icon: <Wifi className="w-4 h-4" />,
+          text: 'Connecté',
+          className: 'text-green-600 bg-green-50 border-green-200',
+        };
+      case 'disconnected':
+        return {
+          icon: <WifiOff className="w-4 h-4" />,
+          text: 'Déconnecté',
+          className: 'text-red-600 bg-red-50 border-red-200',
+        };
+      case 'reconnecting':
+        return {
+          icon: <RotateCcw className="w-4 h-4 animate-spin" />,
+          text: 'Reconnexion...',
+          className: 'text-yellow-600 bg-yellow-50 border-yellow-200',
+        };
+      case 'error':
+        return {
+          icon: <WifiOff className="w-4 h-4" />,
+          text: 'Erreur de connexion',
+          className: 'text-red-600 bg-red-50 border-red-200',
+        };
+      case 'failed':
+        return {
+          icon: <WifiOff className="w-4 h-4" />,
+          text: 'Connexion échouée',
+          className: 'text-red-600 bg-red-50 border-red-200',
+        };
+      default:
+        return {
+          icon: <WifiOff className="w-4 h-4" />,
+          text: 'Inconnu',
+          className: 'text-gray-600 bg-gray-50 border-gray-200',
+        };
+    }
+  };
+
+  if (status === 'connected') {
+    return (
+      <div className="flex items-center justify-between px-3 py-2 border rounded-lg text-green-600 bg-green-50 border-green-200">
+        <div className="flex items-center space-x-2">
+          <Wifi className="w-4 h-4" />
+          <span className="text-sm font-medium">Connecté</span>
+        </div>
+      </div>
+    );
+  }
+
+  const { icon, text, className } = getStatusInfo();
+
+  return (
+    <div
+      className={`flex items-center justify-between px-3 py-2 border rounded-lg ${className}`}
+    >
+      <div className="flex items-center space-x-2">
+        {icon}
+        <span className="text-sm font-medium">{text}</span>
+      </div>
+      {(status === 'failed' || status === 'error') && onReconnect && (
+        <button
+          onClick={onReconnect}
+          className="text-sm underline hover:no-underline"
+        >
+          Réessayer
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ConnectionStatus;