Fix: Instance cards not rendering

The commit addresses the issue where instance cards were not appearing after creation. It revisits the `WhatsApp.tsx` file and related components to ensure instances are correctly added to the state and displayed.

src/components/whatsapp/CreateInstanceForm.tsx

@@ -63,7 +63,7 @@ const CreateInstanceForm = ({ onInstanceCreated }: CreateInstanceFormProps) => {
       // Create new instance object with user ID
       const newInstance: WhatsAppInstance = {
         instanceName,
-        instanceId: data.instance?.instanceId || Date.now().toString(), // Fallback if instanceId not provided
+        instanceId: data.instance?.instanceId || instanceName, // Use instanceName as fallback ID
         phoneNumber,
         userId: currentUserId, // Associate with current user
         status: data.instance?.status || 'created',

src/hooks/useWhatsAppInstances.ts

@@ -30,7 +30,7 @@ export const useWhatsAppInstances = () => {
 
   // Save instances to localStorage whenever they change
   useEffect(() => {
-    if (currentUserId) {
+    if (currentUserId && instances.length > 0) {
       console.log('Saving instances to localStorage:', instances);
       saveInstancesToLocalStorage(instances, currentUserId);
     }
@@ -38,6 +38,8 @@ export const useWhatsAppInstances = () => {
   
   // Function to check connection status for all instances
   const checkAllInstancesStatus = async () => {
+    if (instances.length === 0) return;
+    
     try {
       const updatedInstances = await Promise.all(
         instances.map(async (instance) => {

src/pages/WhatsApp.tsx

@@ -51,10 +51,11 @@ const WhatsApp = () => {
         clearInterval(interval);
       }
     };
-  }, [instances.length]);
+  }, [instances.length, checkAllInstancesStatus]);
 
   // Handler for when a new instance is created
   const handleInstanceCreated = async (newInstance: WhatsAppInstance) => {
+    console.log('New instance to be added:', newInstance);
     addInstance(newInstance);
     
     // If there's a QR code in the response, show it
@@ -74,6 +75,8 @@ const WhatsApp = () => {
     }
   };
 
+  console.log('Current instances in WhatsApp component:', instances);
+
   return (
     <Layout>
       <div className="space-y-6">

src/services/whatsAppService.ts

@@ -4,6 +4,9 @@ import { WhatsAppInstance } from '@/types/whatsAppTypes';
 const SERVER_URL = "evolutionapi2.innova1001.com.br";
 const API_KEY = "beeb77fbd7f48f91db2cd539a573c130";
 
+// Local storage key
+const STORAGE_KEY = 'whatsappInstances';
+
 export const createWhatsAppInstance = async (
   instanceName: string, 
   phoneNumber: string
@@ -188,48 +191,59 @@ export const saveInstancesToLocalStorage = (
   instances: WhatsAppInstance[], 
   currentUserId: string
 ): void => {
-  // We need to save ALL instances (not just current user's) to maintain everyone's data
+  try {
-  const savedInstances = localStorage.getItem('whatsappInstances');
+    // Get existing instances from localStorage
-  let allInstances: WhatsAppInstance[] = [];
+    const savedInstancesStr = localStorage.getItem(STORAGE_KEY);
+    let allInstances: WhatsAppInstance[] = [];
     
-  if (savedInstances) {
+    if (savedInstancesStr) {
-    try {
+      // Parse saved instances
-      const parsedInstances = JSON.parse(savedInstances);
+      const savedInstances = JSON.parse(savedInstancesStr);
-      // Filter out current user's instances from saved data (we'll add updated ones)
+      
-      allInstances = parsedInstances.filter(
+      // If it's an array, filter out current user's old instances
-        (instance: WhatsAppInstance) => instance.userId !== currentUserId
+      if (Array.isArray(savedInstances)) {
-      );
+        allInstances = savedInstances.filter(
-    } catch (error) {
+          (instance: WhatsAppInstance) => instance.userId !== currentUserId
-      console.error("Error parsing saved instances:", error);
+        );
+      }
     }
-  }
     
-  // Add current user's instances to the array
+    // Add current user's instances to the array
-  const updatedInstances = [...allInstances, ...instances];
+    const updatedInstances = [...allInstances, ...instances];
-  localStorage.setItem('whatsappInstances', JSON.stringify(updatedInstances));
+    
-  console.log('All WhatsApp instances saved to localStorage:', updatedInstances);
+    // Save back to localStorage
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedInstances));
+    console.log('All WhatsApp instances saved to localStorage:', updatedInstances);
+  } catch (error) {
+    console.error('Error saving instances to localStorage:', error);
+  }
 };
 
 export const loadInstancesFromLocalStorage = (
   userId: string
 ): WhatsAppInstance[] => {
-  const savedInstances = localStorage.getItem('whatsappInstances');
+  try {
-  console.log('Raw saved instances from localStorage:', savedInstances);
+    const savedInstancesStr = localStorage.getItem(STORAGE_KEY);
+    console.log('Raw saved instances from localStorage:', savedInstancesStr);
     
-  if (savedInstances && userId) {
+    if (savedInstancesStr && userId) {
-    try {
+      // Parse saved instances
-      const allInstances = JSON.parse(savedInstances);
+      const allInstances = JSON.parse(savedInstancesStr);
-      // Filter instances to only show those belonging to the current user
+      
-      const userInstances = allInstances.filter(
+      // If it's an array, filter by user ID
-        (instance: WhatsAppInstance) => instance.userId === userId
+      if (Array.isArray(allInstances)) {
-      );
+        // Filter instances to only show those belonging to the current user
-      console.log(`Found ${userInstances.length} instances for user ${userId}:`, userInstances);
+        const userInstances = allInstances.filter(
-      return userInstances;
+          (instance: WhatsAppInstance) => instance.userId === userId
-    } catch (error) {
+        );
-      console.error("Error parsing saved instances:", error);
+        console.log(`Found ${userInstances.length} instances for user ${userId}:`, userInstances);
-      return [];
+        return userInstances;
+      }
     }
+    console.log(`No instances found for user ${userId}`);
+    return [];
+  } catch (error) {
+    console.error("Error loading instances from localStorage:", error);
+    return [];
   }
-  console.log(`No instances found for user ${userId}`);
-  return [];
 };