From ef5955cea234e6ac9d4cbfc60d806d8a417d7bcb Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 4 Mar 2026 16:03:11 -0500
Subject: [PATCH] fix: corregir race condition en favoritos con Supabase
 INITIAL_SESSION

---
 frontend/src/App.vue                       | 19 ++++++++++++++-----
 frontend/src/components/FavoriteButton.vue | 22 ++++++++++++++--------
 frontend/src/views/FavoritesView.vue       | 17 +++++++++++++----
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f9c9546..a22a69f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { RouterView, useRoute } from "vue-router";
 import { useI18n } from 'vue-i18n'
 import MainLayout from "./components/layouts/MainLayout.vue";
@@ -155,15 +155,24 @@ onMounted(() => {
     event_name: 'app_open',
     properties: { language: locale.value }
   })
-  // Load favorites if the user is already logged in
-  if (authStore.isAuthenticated) {
-    favoritesStore.loadFavorites()
-  }
   document.addEventListener('visibilitychange', handleVisibilityChange)
   window.addEventListener('pageshow', handlePageShow)
   window.addEventListener('focus', handleWindowFocus)
 })
 
+// Cargar favoritos cuando Supabase confirme la sesión (puede ser después de onMounted)
+// immediate:true cubre el caso donde la sesión ya está lista al arrancar
+const stopFavWatcher = watch(
+  () => authStore.isAuthenticated,
+  (authenticated) => {
+    if (authenticated && favoritesStore.favorites.length === 0 && !favoritesStore.isLoading) {
+      favoritesStore.loadFavorites()
+      stopFavWatcher() // Solo necesitamos cargarlo una vez al inicio
+    }
+  },
+  { immediate: true }
+)
+
 onUnmounted(() => {
   document.removeEventListener('visibilitychange', handleVisibilityChange)
   window.removeEventListener('pageshow', handlePageShow)
diff --git a/frontend/src/components/FavoriteButton.vue b/frontend/src/components/FavoriteButton.vue
index 19cef7d..55ddbb0 100644
--- a/frontend/src/components/FavoriteButton.vue
+++ b/frontend/src/components/FavoriteButton.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useAuthStore } from '@/stores/auth'
 
@@ -31,16 +31,22 @@ const isFavorited = computed(() => {
   return favoritesStore.isFavorite(props.itemType, props.itemId)
 })
 
-onMounted(() => {
-  // Load favorites if authenticated and not loaded yet
-  if (authStore.isAuthenticated && favoritesStore.favorites.length === 0) {
-    favoritesStore.loadFavorites()
-  }
-})
+// Observamos isAuthenticated con immediate:true para cubrir 2 casos:
+// 1. El usuario ya estaba autenticado cuando el componente montó.
+// 2. Supabase completó INITIAL_SESSION DESPUÉS de que el componente montó
+//    (race condition común al navegar directamente a una URL).
+watch(
+  () => authStore.isAuthenticated,
+  (authenticated) => {
+    if (authenticated && favoritesStore.favorites.length === 0 && !favoritesStore.isLoading) {
+      favoritesStore.loadFavorites()
+    }
+  },
+  { immediate: true }
+)
 
 async function handleToggle() {
   if (!authStore.isAuthenticated) {
-    // Optionally redirect to login or show message
     alert('Debes iniciar sesión para agregar favoritos')
     return
   }
diff --git a/frontend/src/views/FavoritesView.vue b/frontend/src/views/FavoritesView.vue
index 5dc17eb..0f40b9f 100644
--- a/frontend/src/views/FavoritesView.vue
+++ b/frontend/src/views/FavoritesView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoritesStore } from '@/stores/favorites'
+import { useAuthStore } from '@/stores/auth'
 import { useI18n } from 'vue-i18n'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
 import LoadingBranded from '@/components/common/LoadingBranded.vue'
@@ -9,6 +10,7 @@ import LoadingBranded from '@/components/common/LoadingBranded.vue'
 const router = useRouter()
 const { t } = useI18n()
 const favoritesStore = useFavoritesStore()
+const authStore = useAuthStore()
 const selectedFilter = ref('all')
 
 const filters = computed(() => [
@@ -20,9 +22,16 @@ const filters = computed(() => [
   { key: 'stops',     label: t('navigation.routes'),  icon: 'location_on' }, // Reusing navigation.routes or adding a specific one
 ])
 
-onMounted(async () => {
-  await favoritesStore.loadFavorites()
-})
+// Mismo patrón que FavoriteButton: esperar a que Supabase complete INITIAL_SESSION
+watch(
+  () => authStore.isAuthenticated,
+  (authenticated) => {
+    if (authenticated) {
+      favoritesStore.loadFavorites()
+    }
+  },
+  { immediate: true }
+)
 
 function getImageUrl(path?: string) {
   return utilGetImageUrl(path, 'business')