Fix WhatsApp instance connection logic

The AI identified that the WhatsApp connection page was not updating correctly, and the previous fixes were not working. It suggests a new approach, analyzing the old and current logic, and checking for other potential issues.

src/hooks/whatsapp/useExistingInstanceCheck.ts

@@ -7,60 +7,71 @@ export const useExistingInstanceCheck = (userEmail: string) => {
   const [checkingExistingInstance, setCheckingExistingInstance] = useState(true);
   const [existingInstanceData, setExistingInstanceData] = useState<any>(null);
 
+  const checkExistingInstance = async () => {
+    if (!userEmail) {
+      console.log('❌ [EXISTING_INSTANCE] Email do usuário não encontrado');
+      setCheckingExistingInstance(false);
+      setHasExistingInstance(false);
+      setExistingInstanceData(null);
+      return;
+    }
+
+    setCheckingExistingInstance(true);
+
+    try {
+      console.log('🔍 [EXISTING_INSTANCE] Verificando se usuário já tem instância CONECTADA:', userEmail);
+      const existingInstance = await getUserWhatsAppInstance(userEmail);
+      
+      console.log('📋 [EXISTING_INSTANCE] Dados da instância encontrados:', existingInstance);
+      
+      // Verificação CORRETA: instancia_zap deve ser igual ao email E status_instancia = 'conectado'
+      const hasValidConnectedInstance = !!(
+        existingInstance && 
+        existingInstance.instancia_zap && 
+        existingInstance.instancia_zap.trim() !== '' &&
+        existingInstance.instancia_zap !== 'null' &&
+        existingInstance.instancia_zap !== null &&
+        existingInstance.instancia_zap.toLowerCase() === userEmail.toLowerCase() &&
+        existingInstance.status_instancia === 'conectado'
+      );
+      
+      console.log('✅ [EXISTING_INSTANCE] Resultado da verificação:', {
+        instancia_zap: existingInstance?.instancia_zap,
+        status_instancia: existingInstance?.status_instancia,
+        userEmail: userEmail,
+        instanceMatchesEmail: existingInstance?.instancia_zap?.toLowerCase() === userEmail.toLowerCase(),
+        isConnected: existingInstance?.status_instancia === 'conectado',
+        hasValidConnectedInstance
+      });
+      
+      setHasExistingInstance(hasValidConnectedInstance);
+      setExistingInstanceData(hasValidConnectedInstance ? existingInstance : null);
+      
+    } catch (error) {
+      console.error('❌ [EXISTING_INSTANCE] Erro ao verificar instância existente:', error);
+      setHasExistingInstance(false);
+      setExistingInstanceData(null);
+    } finally {
+      setCheckingExistingInstance(false);
+    }
+  };
+
   useEffect(() => {
-    const checkExistingInstance = async () => {
-      if (!userEmail) {
-        console.log('❌ [EXISTING_INSTANCE] Email do usuário não encontrado');
-        setCheckingExistingInstance(false);
-        return;
-      }
-
-      try {
-        console.log('🔍 [EXISTING_INSTANCE] Verificando se usuário já tem instância CONECTADA:', userEmail);
-        const existingInstance = await getUserWhatsAppInstance(userEmail);
-        
-        console.log('📋 [EXISTING_INSTANCE] Dados da instância encontrados:', existingInstance);
-        
-        // Verificação CORRETA: instancia_zap deve ser igual ao email E status_instancia = 'conectado'
-        const hasValidConnectedInstance = !!(
-          existingInstance && 
-          existingInstance.instancia_zap && 
-          existingInstance.instancia_zap.trim() !== '' &&
-          existingInstance.instancia_zap !== 'null' &&
-          existingInstance.instancia_zap !== null &&
-          existingInstance.instancia_zap.toLowerCase() === userEmail.toLowerCase() &&
-          existingInstance.status_instancia === 'conectado'
-        );
-        
-        console.log('✅ [EXISTING_INSTANCE] Usuário possui instância CONECTADA:', hasValidConnectedInstance, {
-          instancia_zap: existingInstance?.instancia_zap,
-          status_instancia: existingInstance?.status_instancia,
-          userEmail: userEmail,
-          instanceMatchesEmail: existingInstance?.instancia_zap?.toLowerCase() === userEmail.toLowerCase(),
-          isConnected: existingInstance?.status_instancia === 'conectado',
-          hasValidConnectedInstance
-        });
-        
-        setHasExistingInstance(hasValidConnectedInstance);
-        setExistingInstanceData(existingInstance);
-        
-      } catch (error) {
-        console.error('❌ [EXISTING_INSTANCE] Erro ao verificar instância existente:', error);
-        setHasExistingInstance(false);
-        setExistingInstanceData(null);
-      } finally {
-        setCheckingExistingInstance(false);
-      }
-    };
-
     checkExistingInstance();
   }, [userEmail]);
 
+  // Função para forçar re-verificação
+  const recheckInstance = () => {
+    console.log('🔄 [EXISTING_INSTANCE] Forçando re-verificação da instância');
+    checkExistingInstance();
+  };
+
   return {
     hasExistingInstance,
     checkingExistingInstance,
     existingInstanceData,
     setHasExistingInstance,
-    setExistingInstanceData
+    setExistingInstanceData,
+    recheckInstance
   };
 };

src/pages/WhatsApp.tsx

@@ -10,10 +10,10 @@ import { useWhatsAppInstances } from '@/hooks/useWhatsAppInstances';
 import { useWhatsAppActions } from '@/hooks/useWhatsAppActions';
 import { useWhatsAppInstance, WHATSAPP_INSTANCE_KEY } from '@/hooks/whatsApp/useWhatsAppInstance';
 import { usePeriodicStatusCheck } from '@/hooks/whatsApp/usePeriodicStatusCheck';
-import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService';
+import { useExistingInstanceCheck } from '@/hooks/whatsapp/useExistingInstanceCheck';
 import { Button } from '@/components/ui/button';
 import { RefreshCw } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 const WhatsApp = () => {
   const { 
@@ -49,70 +49,16 @@ const WhatsApp = () => {
     clearInstanceName
   } = useWhatsAppInstance(currentUserId, addInstance);
   
-  const [showCreateForm, setShowCreateForm] = useState(false);
-  const [hasConnectedInstance, setHasConnectedInstance] = useState(false);
-  const [checkingUserInstance, setCheckingUserInstance] = useState(true);
-  
   const userEmail = (localStorage.getItem('userEmail') || '').toLowerCase();
 
-  // Verificar se o usuário tem instância CONECTADA no banco de dados
+  // Usar o hook centralizado para verificação de instância existente
-  useEffect(() => {
+  const {
-    const checkUserConnectedInstance = async () => {
+    hasExistingInstance,
-      if (!userEmail) {
+    checkingExistingInstance,
-        console.log('❌ Email do usuário não encontrado');
+    existingInstanceData,
-        setCheckingUserInstance(false);
+    setHasExistingInstance,
-        setShowCreateForm(true);
+    setExistingInstanceData
-        return;
+  } = useExistingInstanceCheck(userEmail);
-      }
-
-      setCheckingUserInstance(true);
-      
-      try {
-        console.log('🔍 [WHATSAPP] Verificando instância conectada para:', userEmail);
-        const instanceData = await getUserWhatsAppInstance(userEmail);
-        
-        console.log('📋 [WHATSAPP] Dados da instância encontrados:', instanceData);
-        
-        // Verificação CORRETA: instancia_zap deve ser igual ao email E status deve ser 'conectado'
-        const hasConnectedInstanceInDB = !!(
-          instanceData && 
-          instanceData.instancia_zap && 
-          instanceData.instancia_zap.trim() !== '' &&
-          instanceData.instancia_zap !== 'null' &&
-          instanceData.instancia_zap !== null &&
-          instanceData.instancia_zap.toLowerCase() === userEmail.toLowerCase() &&
-          instanceData.status_instancia === 'conectado'
-        );
-        
-        console.log('✅ [WHATSAPP] Verificação da instância conectada:', {
-          instanceData,
-          userEmail,
-          instanceMatchesEmail: instanceData?.instancia_zap?.toLowerCase() === userEmail.toLowerCase(),
-          isConnected: instanceData?.status_instancia === 'conectado',
-          hasConnectedInstanceInDB
-        });
-        
-        setHasConnectedInstance(hasConnectedInstanceInDB);
-        setShowCreateForm(!hasConnectedInstanceInDB); // Mostra formulário APENAS se NÃO tiver instância conectada
-        
-        if (hasConnectedInstanceInDB) {
-          setInstanceFound(true);
-          console.log('✅ [WHATSAPP] Usuário já possui instância conectada, ocultando formulário de criação');
-        } else {
-          console.log('❌ [WHATSAPP] Usuário NÃO possui instância conectada, mostrando formulário de criação');
-        }
-        
-      } catch (error) {
-        console.error('❌ [WHATSAPP] Erro ao verificar instância do usuário:', error);
-        setHasConnectedInstance(false);
-        setShowCreateForm(true);
-      } finally {
-        setCheckingUserInstance(false);
-      }
-    };
-
-    checkUserConnectedInstance();
-  }, [userEmail, setInstanceFound]);
   
   usePeriodicStatusCheck(instances.length, checkAllInstancesStatus);
 
@@ -120,8 +66,8 @@ const WhatsApp = () => {
     console.log('🎉 [WHATSAPP] Nova instância criada:', newInstance);
     addInstance(newInstance);
     setInstanceFound(true);
-    setHasConnectedInstance(true);
+    setHasExistingInstance(true);
-    setShowCreateForm(false);
+    setExistingInstanceData(newInstance);
     
     saveInstanceName(newInstance.instanceName);
     
@@ -146,8 +92,8 @@ const WhatsApp = () => {
       
       if (instanceToDelete.instanceName === instanceName) {
         clearInstanceName();
-        setHasConnectedInstance(false);
+        setHasExistingInstance(false);
-        setShowCreateForm(true);
+        setExistingInstanceData(null);
       }
     } else {
       console.error(`❌ [WHATSAPP] Instância com ID ${instanceId} não encontrada para exclusão`);
@@ -156,7 +102,8 @@ const WhatsApp = () => {
 
   const hasInstances = Array.isArray(instances) && instances.length > 0;
 
-  if (checkingUserInstance || isLoading) {
+  // Mostrar loading enquanto verifica instância existente
+  if (checkingExistingInstance || isLoading) {
     return (
       <Layout>
         <LoadingState message="Verificando suas instâncias..." />
@@ -164,6 +111,13 @@ const WhatsApp = () => {
     );
   }
 
+  console.log('🔍 [WHATSAPP] Estado atual da verificação:', {
+    userEmail,
+    hasExistingInstance,
+    existingInstanceData,
+    checkingExistingInstance
+  });
+
   return (
     <Layout>
       <div className="space-y-6">
@@ -189,17 +143,15 @@ const WhatsApp = () => {
         </div>
         
         {/* Mostra formulário APENAS se NÃO tiver instância conectada */}
-        {showCreateForm && !hasConnectedInstance && (
+        {!hasExistingInstance && (
-          <>
+          <CreateInstanceForm 
-            <CreateInstanceForm 
+            onInstanceCreated={handleInstanceCreated} 
-              onInstanceCreated={handleInstanceCreated} 
+            initialInstanceName={instanceName}
-              initialInstanceName={instanceName}
+          />
-            />
-          </>
         )}
         
         {/* Mensagem informativa quando já possui instância conectada */}
-        {hasConnectedInstance && !showCreateForm && (
+        {hasExistingInstance && existingInstanceData && (
           <div className="bg-green-50 border border-green-200 rounded-lg p-4">
             <div className="flex items-center">
               <div className="flex-shrink-0">
@@ -212,7 +164,8 @@ const WhatsApp = () => {
                   WhatsApp Conectado
                 </h3>
                 <div className="mt-2 text-sm text-green-700">
-                  <p>Você já possui uma instância do WhatsApp conectada. Não é necessário criar uma nova.</p>
+                  <p>Você já possui uma instância do WhatsApp conectada: <strong>{existingInstanceData.instancia_zap}</strong></p>
+                  <p>Status: <strong>{existingInstanceData.status_instancia}</strong></p>
                 </div>
               </div>
             </div>