Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { useWebSocket } from '@/context/StableWebSocketContext';

const ConnectionStatus: React.FC = () => {
  const { connected, connectionState, connectionStats, reconnect } = useWebSocket();

  const getStatusColor = () => {
    switch (connectionState) {
      case 'connected': return 'bg-green-500';
      case 'connecting': return 'bg-yellow-500 animate-pulse';
      case 'reconnecting': return 'bg-orange-500 animate-pulse';
      case 'disconnected': return 'bg-red-500';
      default: return 'bg-gray-500';
    }
  };

  const getStatusText = () => {
    switch (connectionState) {
      case 'connected': return 'Connected';
      case 'connecting': return 'Connecting...';
      case 'reconnecting': return `Reconnecting... (${connectionStats.reconnectAttempts})`;
      case 'disconnected': return 'Disconnected';
      default: return 'Unknown';
    }
  };

  const formatLatency = (latency: number | null) => {
    return 'N/A'; // Simplified for compatibility
  };

  return (
    <div className="flex items-center space-x-2 text-xs text-gray-600 dark:text-gray-400">
      <div className="flex items-center space-x-1">
        <div className={`w-2 h-2 rounded-full ${getStatusColor()}`} />
        <span className="font-medium">{getStatusText()}</span>
      </div>

      {connectionState === 'disconnected' && connectionStats.reconnectAttempts >= 10 && (
        <button
          onClick={reconnect}
          className="ml-2 px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
        >
          Reconnect
        </button>
      )}

      {connected && (
        <>
          <span className="text-gray-400">•</span>
          <div className="flex items-center space-x-3">
            <div className="flex items-center space-x-1">
              <span>📶</span>
              <span>{formatLatency(null)}</span>
            </div>
            <div className="flex items-center space-x-1">
              <span>📊</span>
              <span>↑{connectionStats.messagesSent} ↓{connectionStats.messagesReceived}</span>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default ConnectionStatus;