Fetch city locations only once per website visit

- Centralize location fetching in the store, deduplicating API requests, both in code and in network requests
- Fix filtered location requests not overwriting previous non-filtered requests: When visiting the main page, the locations for Mannheim were loaded without being filtered to "enabled=true". That then set the first array entry with all locations. When then navigating to Mannheim's page, locations were fetched again, but this time filtered to "enabled=true" and added to the store's array. But when querying the locations for a city from the store, only the first array item matching the city name was returned, which was still the unfiltered list of locations.
- Also enable devtools in development (gives you hydration and props warnings in console)
- Use new `only_enabled=1` filter added to the Supabase function for getting city locations

Author: sisou

components/CityCard.vue

@@ -92,32 +92,18 @@ const cityLink = computed(() => {
   return useLocale(`/cities/${props.city.name.toLowerCase()}`)
 })
 
-// useAsyncData('getLocationsByCity', () => store.getLocationsByCity(props.city.name).then(() => true))
+// useAsyncData('loadLocationsByCity', () => store.loadLocationsByCity(props.city.name).then(() => true))
 
-interface Locations {
-  name: string
-}
-// const data = await $fetch(`https://mycbdmurjytbdahjljoh.supabase.co/rest/v1/rpc/get_cryptocity_locations?cryptocity_name=${props.city.name}&apikey=${useRuntimeConfig().public.SUPA_KEY}`)
-// store.locations.push({
-//   name: props.city.name,
-//   cityLocations: data as Array<Locations>
-// })
-const getPosts = async () => {
-  const data = await $fetch(`https://mycbdmurjytbdahjljoh.supabase.co/rest/v1/rpc/get_cryptocity_locations?cryptocity_name=${props.city.name}&apikey=${useRuntimeConfig().public.SUPA_KEY}`)
-  store.locations.push({
-    name: props.city.name,
-    cityLocations: data as Array<Locations>
-  })
-}
-
-// // if you want fetch when component mounts:
-onMounted(getPosts)
+// Fetch when component mounts:
+onMounted(() => {
+  store.loadLocationsByCity(props.city.name)
+})
 
 const locations = computed(() => {
   const locations = store.getLocations(props.city.name)
   if (!locations) { return null }
   const numOfLocations = locations.length
-  if (numOfLocations.toString().length < 4) {
+  if (numOfLocations < 1000) {
     return numOfLocations
   } else {
     return Math.round(numOfLocations / 1000) + 'k+'

components/block/MapBusiness.vue

@@ -47,7 +47,7 @@
           </li>
           <transition-group name="fade" mode="out-in">
             <li
-              v-for="(location) in locations"
+              v-for="location in locations"
               :key="`card-${location.name}`"
               ref="slides"
               class="w-[clamp(320px,370px,calc(100vw-40px))] shrink-0 snap-center snap-always"
@@ -79,7 +79,7 @@
           </svg>
         </button>
         <button
-          v-if="activeIndex < locations?.length - visibleCards"
+          v-if="activeIndex < (locations?.length || 0) - visibleCards"
           class="hocus:bg-blue-dark/30 absolute right-32 top-1/2 z-10 -mt-24 hidden size-48 cursor-pointer items-center justify-center rounded bg-blue-dark/20 text-white transition-[background-color] active:bg-blue-dark/40 sm:flex"
           @click="goToNext"
         >
@@ -92,7 +92,7 @@
         </button>
       </div>
     </div>
-    <div v-if="visibleCards < locations?.length" class="flex flex-col">
+    <div v-if="visibleCards < (locations?.length || 0)" class="flex flex-col">
       <div class="relative mx-auto mt-8 flex">
         <button
           v-for="(_, i) in locations"
@@ -141,30 +141,14 @@ const cityName = computed(() => {
   return name.charAt(0).toUpperCase() + name.slice(1)
 })
 
-// await useAsyncData('getLocationsByCity', () => store.getLocationsByCity(cityName.value).then(() => true),
-//   {
-//     lazy: true
-//   })
-interface LocationItem {
-  address: string
-  category: string
-  enabled: boolean
-  gmaps: string
-  name: string
-  photo: string
-  id: number
-}
-const getPosts = async () => {
-  const data: Array<LocationItem> = await $fetch(`https://mycbdmurjytbdahjljoh.supabase.co/rest/v1/rpc/get_cryptocity_locations?cryptocity_name=${cityName.value}&apikey=${useRuntimeConfig().public.SUPA_KEY}`)
-  const filteredData = data.filter((location: LocationItem) => location.enabled === true)
-  store.locations.push({
-    name: cityName.value,
-    cityLocations: filteredData as Array<LocationItem>
-  })
-}
+// await useAsyncData('loadLocationsByCity', () => store.loadLocationsByCity(cityName.value).then(() => true), {
+//   lazy: true
+// })
 
-// // if you want fetch when component mounts:
-onMounted(getPosts)
+// Fetch when component mounts:
+onMounted(() => {
+  store.loadLocationsByCity(cityName.value)
+})
 
 const locations = computed(() => {
   return store.getLocations(cityName.value)

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: {
-    enabled: false
+    enabled: true,
   },
   nitro: {
     compressPublicAssets: {

store/store.ts

@@ -8,12 +8,14 @@ import type { Page } from '@/types/dato-models/Page'
 import type { Region } from '@/types/dato-models/Region'
 import type { Global } from '@/types/dato-models/Global'
 
-interface Locations {
+interface Location {
   name: string
-}
-interface CityLocations {
-  name: string,
-  cityLocations: Array<Locations>
+  gmaps: string
+  photo: string
+  rating: number
+  address: string
+  enabled: boolean
+  category: string
 }
 export const useWebsiteStore = defineStore('websiteStore', {
   state: () => {
@@ -26,15 +28,15 @@ export const useWebsiteStore = defineStore('websiteStore', {
         siteLocales: undefined as Array<string> | undefined,
         translations: undefined as JSON | undefined
       },
-      locations: [] as Array<CityLocations>
+      locations: new Map<string, Location[]>()
     }
   },
   getters: {
     getGlobalData (state): Global | null { return state.global },
     getCurrentRegion (state): Region | null { return state.region },
     getPages (state): Array<Page> | null { return state.pages },
-    getLocations (state): any {
-      return (cityName: string) => state.locations.find(x => x.name === cityName)?.cityLocations || null
+    getLocations (state): (cityName: string) => (Location[] | null) {
+      return (cityName: string) => (state.locations.get(cityName) || null)
     }
   },
   actions: {
@@ -131,18 +133,15 @@ export const useWebsiteStore = defineStore('websiteStore', {
         this.localization.siteLocales = body.region._locales
       }
     },
-    async getLocationsByCity (cityName: string) {
-      if (this.locations.find(x => x.name === cityName)) { return }
-      const { data: { value: response } } = await useFetch(
-        `https://mycbdmurjytbdahjljoh.supabase.co/rest/v1/rpc/get_cryptocity_locations?cryptocity_name=${cityName}&apikey=${useRuntimeConfig().public.SUPA_KEY}`) as AsyncData<Array<Locations>, RTCError>
-      if (response) {
-        this.locations.push(
-          {
-            name: cityName,
-            cityLocations: response as Array<Locations>
-          }
-        )
+    async loadLocationsByCity (cityName: string) {
+      if (this.locations.has(cityName)) {
+        console.debug("Already have locations for city", cityName, this.locations.get(cityName))
+        return
       }
+      console.debug("Fetching locations for city", cityName)
+      const locations = await $fetch<Array<Location>>(
+        `https://mycbdmurjytbdahjljoh.supabase.co/rest/v1/rpc/get_cryptocity_locations?cryptocity_name=${cityName}&only_enabled=1&apikey=${useRuntimeConfig().public.SUPA_KEY}`)
+      this.locations.set(cityName, locations)
     }
   }
 })