From 44e8569b6ccd57448c864d7ffb89b6f14d329db1 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 19 May 2025 14:33:33 +0000
Subject: [PATCH] Add instance connection status check

Implement automatic connection status checks for each instance card, displaying "Conectado" or "Desconectado" based on the API response. Includes periodic updates and visual status indication.
---
 src/pages/WhatsApp.tsx | 100 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 90 insertions(+), 10 deletions(-)

diff --git a/src/pages/WhatsApp.tsx b/src/pages/WhatsApp.tsx
index 51512c5..2d51425 100644
--- a/src/pages/WhatsApp.tsx
+++ b/src/pages/WhatsApp.tsx
@@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label';
 import { MessageCircle, QrCode, RefreshCw, Smartphone } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
 
 interface WhatsAppInstance {
   instanceName: string;
@@ -16,6 +17,7 @@ interface WhatsAppInstance {
   phoneNumber: string;
   status?: string;
   qrcode?: string;
+  connectionState?: 'open' | 'closed' | 'connecting';
 }
 
 const WhatsApp = () => {
@@ -33,6 +35,7 @@ const WhatsApp = () => {
   const [qrCodeData, setQrCodeData] = useState<string | null>(null);
   const [qrError, setQrError] = useState<string | null>(null);
   const [qrDialogOpen, setQrDialogOpen] = useState(false);
+  const [statusCheckInterval, setStatusCheckInterval] = useState<NodeJS.Timeout | null>(null);
 
   // Load saved instances from localStorage on component mount
   useEffect(() => {
@@ -53,6 +56,72 @@ const WhatsApp = () => {
     }
   }, [instances]);
 
+  // Set up periodic status checks
+  useEffect(() => {
+    // Check status initially
+    if (instances.length > 0) {
+      checkAllInstancesStatus();
+    }
+
+    // Set up interval for periodic checks (every 60 seconds)
+    const interval = setInterval(() => {
+      if (instances.length > 0) {
+        checkAllInstancesStatus();
+      }
+    }, 60000); // 60 seconds
+
+    setStatusCheckInterval(interval);
+
+    // Clean up interval when component unmounts
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [instances.length]);
+
+  // Function to check connection status for all instances
+  const checkAllInstancesStatus = async () => {
+    const updatedInstances = await Promise.all(
+      instances.map(async (instance) => {
+        try {
+          const state = await fetchConnectionState(instance.instanceName);
+          return { ...instance, connectionState: state };
+        } catch (error) {
+          console.error(`Error checking status for ${instance.instanceName}:`, error);
+          return { ...instance, connectionState: 'closed' };
+        }
+      })
+    );
+    setInstances(updatedInstances);
+  };
+
+  // Function to fetch connection state for an instance
+  const fetchConnectionState = async (instanceName: string): Promise<'open' | 'closed' | 'connecting'> => {
+    try {
+      const serverUrl = "evolutionapi2.innova1001.com.br";
+      const apiKey = "beeb77fbd7f48f91db2cd539a573c130";
+
+      const response = await fetch(`https://${serverUrl}/instance/connectionState/${encodeURIComponent(instanceName)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'apikey': apiKey
+        }
+      });
+
+      if (!response.ok) {
+        return 'closed';
+      }
+
+      const data = await response.json();
+      return data.instance?.state || 'closed';
+    } catch (error) {
+      console.error("Error fetching connection state:", error);
+      return 'closed';
+    }
+  };
+
   const createInstance = async () => {
     // Validate form fields
     if (!instanceName.trim()) {
@@ -103,10 +172,11 @@ const WhatsApp = () => {
       // Create new instance object
       const newInstance: WhatsAppInstance = {
         instanceName,
-        instanceId: data.instanceId,
+        instanceId: data.instance.instanceId,
         phoneNumber,
-        status: data.status,
-        qrcode: data.qrcode
+        status: data.instance.status,
+        qrcode: data.qrcode,
+        connectionState: 'connecting'
       };
       
       // Add new instance to the list
@@ -124,9 +194,12 @@ const WhatsApp = () => {
       // If there's a QR code in the response, show it
       if (data.qrcode) {
         setActiveInstance(newInstance);
-        setQrCodeData(data.qrcode);
+        setQrCodeData(data.qrcode.base64);
         setQrDialogOpen(true);
       }
+
+      // Trigger a status check for all instances
+      checkAllInstancesStatus();
     } catch (error) {
       console.error("Error creating WhatsApp instance:", error);
       toast({
@@ -269,12 +342,19 @@ const WhatsApp = () => {
                         <Smartphone className="h-4 w-4 mr-2 text-gray-500" />
                         <span>{instance.phoneNumber}</span>
                       </div>
-                      {instance.status && (
-                        <div className="flex items-center text-sm">
-                          <span className="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
-                          <span>Status: {instance.status}</span>
-                        </div>
-                      )}
+                      <div className="flex items-center text-sm">
+                        {instance.connectionState === 'open' ? (
+                          <Badge variant="success" className="flex items-center gap-1">
+                            <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
+                            Status: Conectado
+                          </Badge>
+                        ) : (
+                          <Badge variant="outline" className="flex items-center gap-1 text-red-500 border-red-300">
+                            <span className="inline-block w-2 h-2 rounded-full bg-red-500"></span>
+                            Status: Desconectado
+                          </Badge>
+                        )}
+                      </div>
                     </div>
                   </CardContent>
                   <CardFooter className="flex justify-between">