diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue index 77afc2e..ce7fe3c 100644 --- a/src/components/layout/Navbar.vue +++ b/src/components/layout/Navbar.vue @@ -29,6 +29,7 @@ const navigation = computed(() => [ { name: t('nav.home'), href: '/' }, { name: t('nav.events'), href: '/events' }, { name: t('nav.market'), href: '/market' }, + { name: 'Market Test', href: '/market-test' }, ]) // Compute total wallet balance diff --git a/src/composables/useMarket.ts b/src/composables/useMarket.ts index 3d6bfb1..8e4c073 100644 --- a/src/composables/useMarket.ts +++ b/src/composables/useMarket.ts @@ -17,7 +17,6 @@ export function useMarket() { const marketStore = useMarketStore() const isLoading = ref(false) - const error = ref(null) const isConnected = ref(false) // Market loading state @@ -25,7 +24,7 @@ export function useMarket() { try { isLoading.value = true marketStore.setLoading(true) - error.value = null + marketStore.setError(null) console.log('Loading market with naddr:', naddr) @@ -37,12 +36,14 @@ export function useMarket() { throw new Error('Invalid market naddr') } + console.log('About to load market data...') // Load market data from Nostr await loadMarketData(data) + console.log('Market data loaded successfully') } catch (err) { console.error('Error loading market:', err) - error.value = err instanceof Error ? err.message : 'Failed to load market' + marketStore.setError(err instanceof Error ? err.message : 'Failed to load market') // Don't throw error, let the UI handle it gracefully } finally { isLoading.value = false @@ -52,20 +53,35 @@ export function useMarket() { const loadMarketData = async (marketData: any) => { try { + console.log('Starting loadMarketData...') // Get Nostr client const client = nostrStore.getClient() + console.log('Got Nostr client') // Load market configuration + console.log('Loading market config...') await loadMarketConfig(marketData) + console.log('Market config loaded') // Load stalls for this market + console.log('Loading stalls...') await loadStalls(marketData.pubkey) + console.log('Stalls loaded') // Load products for all stalls + console.log('Loading products...') await loadProducts() + console.log('Products loaded') // Subscribe to real-time updates - subscribeToMarketUpdates() + console.log('Subscribing to updates...') + try { + subscribeToMarketUpdates() + console.log('Subscribed to updates') + } catch (err) { + console.warn('Failed to subscribe to updates:', err) + // Don't fail the entire load process if subscription fails + } } catch (err) { console.error('Error loading market data:', err) @@ -113,7 +129,8 @@ export function useMarket() { opts: { name: 'Default Market', description: 'A default market', - merchants: [] + merchants: [], + ui: {} } } @@ -132,7 +149,8 @@ export function useMarket() { opts: { name: 'Default Market', description: 'A default market', - merchants: [] + merchants: [], + ui: {} } } @@ -340,6 +358,8 @@ export function useMarket() { } catch (err) { console.error('Error subscribing to market updates:', err) + // Return a no-op function if subscription fails + return () => {} } } @@ -462,11 +482,17 @@ export function useMarket() { const connectToMarket = async () => { try { + console.log('Checking Nostr connection...') + console.log('Current connection state:', nostrStore.isConnected) + if (!nostrStore.isConnected) { + console.log('Connecting to Nostr relays...') await nostrStore.connect() + console.log('Connected to Nostr relays') } isConnected.value = nostrStore.isConnected + console.log('Final connection state:', isConnected.value) if (!isConnected.value) { throw new Error('Failed to connect to Nostr relays') @@ -486,7 +512,6 @@ export function useMarket() { return { // State isLoading: readonly(isLoading), - error: readonly(error), isConnected: readonly(isConnected), // Actions diff --git a/src/pages/Market.vue b/src/pages/Market.vue index e9c3ccf..a4305b8 100644 --- a/src/pages/Market.vue +++ b/src/pages/Market.vue @@ -9,10 +9,10 @@ -
+

Failed to load market

-

{{ market.error }}

+

{{ marketStore.error }}

@@ -117,18 +117,25 @@ const loadMarket = async () => { throw new Error('No market naddr configured') } + console.log('Connecting to market...') await market.connectToMarket() + console.log('Connected to market') + + console.log('Loading market...') await market.loadMarket(naddr) + console.log('Market loaded') // Subscribe to real-time updates unsubscribe = market.subscribeToMarketUpdates() } catch (error) { console.error('Failed to load market:', error) + marketStore.setError(error instanceof Error ? error.message : 'Failed to load market') } } const retryLoadMarket = () => { + marketStore.setError(null) loadMarket() } diff --git a/src/pages/MarketTest.vue b/src/pages/MarketTest.vue new file mode 100644 index 0000000..b8b24de --- /dev/null +++ b/src/pages/MarketTest.vue @@ -0,0 +1,85 @@ + + + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 490aa71..f17e5bc 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -48,6 +48,15 @@ const router = createRouter({ title: 'Market', requiresAuth: true } + }, + { + path: '/market-test', + name: 'market-test', + component: () => import('@/pages/MarketTest.vue'), + meta: { + title: 'Market Test', + requiresAuth: true + } } ] }) diff --git a/src/stores/market.ts b/src/stores/market.ts index 7255363..cf04a46 100644 --- a/src/stores/market.ts +++ b/src/stores/market.ts @@ -14,7 +14,7 @@ export interface Market { logo?: string banner?: string merchants: string[] - ui: Record + ui?: Record } } @@ -87,6 +87,7 @@ export const useMarketStore = defineStore('market', () => { // UI state const isLoading = ref(false) + const error = ref(null) const searchText = ref('') const showFilterDetails = ref(false) @@ -214,6 +215,10 @@ export const useMarketStore = defineStore('market', () => { const setLoading = (loading: boolean) => { isLoading.value = loading } + + const setError = (errorMessage: string | null) => { + error.value = errorMessage + } const setSearchText = (text: string) => { searchText.value = text @@ -335,6 +340,7 @@ export const useMarketStore = defineStore('market', () => { activeStall: readonly(activeStall), activeProduct: readonly(activeProduct), isLoading: readonly(isLoading), + error: readonly(error), searchText: readonly(searchText), showFilterDetails: readonly(showFilterDetails), filterData: readonly(filterData), @@ -349,6 +355,7 @@ export const useMarketStore = defineStore('market', () => { // Actions setLoading, + setError, setSearchText, setActiveMarket, setActiveStall,