From a4943dc4b90084faebbc9c40a1d407b9aff69204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 23 Sep 2024 16:47:34 +0200
Subject: [PATCH] chore: improve types on map store + use store subscriber
 instead of watcher #362

---
 components/Home/Embedded.vue       | 38 +++++++++++++--
 components/Home/Home.vue           | 74 ++++++++++++++++++++----------
 components/MainMap/MapFeatures.vue | 17 ++++---
 pages/embedded.vue                 | 17 +------
 pages/index.vue                    | 18 +-------
 stores/map.ts                      | 29 ++++++------
 6 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/components/Home/Embedded.vue b/components/Home/Embedded.vue
index d6f52cd0..4683a967 100644
--- a/components/Home/Embedded.vue
+++ b/components/Home/Embedded.vue
@@ -22,6 +22,7 @@ import { flattenFeatures } from '~/utils/utilities'
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
   initialCategoryIds?: number[]
+  initialPoi?: string
 }>()
 
 //
@@ -32,6 +33,7 @@ const { isModeExplorer, mode, selectedFeature } = storeToRefs(mapStore)
 const menuStore = useMenuStore()
 const { apiMenuCategory, features, selectedCategoryIds, menuItems } = storeToRefs(menuStore)
 const { config, settings } = useSiteStore()
+const { API_ENDPOINT, API_PROJECT, API_THEME } = config!
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
@@ -116,13 +118,16 @@ const poiFilters = computed(() => {
   )
 })
 
+// Store Subscribers
+mapStore.$onAction(({ name, after }) => {
+  if (name === 'setSelectedFeature') {
+    after(() => routerPushUrl())
+  }
+})
+
 //
 // Watchers
 //
-watch(selectedFeature, () => {
-  routerPushUrl()
-})
-
 watch(selectedCategoryIds, (a, b) => {
   if (a !== b) {
     routerPushUrl()
@@ -152,6 +157,7 @@ function routerPushUrl() {
   const id = selectedFeature.value?.properties?.metadata?.id?.toString()
     || selectedFeature.value?.id?.toString()
     || null
+
   router.push({
     path: `/embedded${categoryIds ? `/${categoryIds}/` : '/'}${id ? `${id}` : ''}`,
     query: router.currentRoute.value.query,
@@ -168,6 +174,28 @@ function toggleExploreAroundSelectedPoi() {
     mode.value = Mode.BROWSER
   }
 }
+
+// Fetch inital POI
+const { data, error } = await useFetch<ApiPoi>(
+  () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${props.initialPoi}.geojson`,
+  {
+    query: {
+      geometry_as: 'bbox',
+      short_description: false,
+    },
+    immediate: !!props.initialPoi,
+  },
+)
+
+if (props.initialPoi) {
+  if (error.value)
+    throw createError(error.value)
+
+  if (!data.value)
+    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
+
+  mapStore.setSelectedFeature(data.value)
+}
 </script>
 
 <template>
@@ -180,7 +208,7 @@ function toggleExploreAroundSelectedPoi() {
         <UIButton
           :label="t('ui.close')"
           icon="times"
-          @click="mapStore.setSelectedFeature(null)"
+          @click="mapStore.setSelectedFeature()"
         />
       </div>
       <PoiCardContent
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index 59da0e3d..c8c7a5ff 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -36,6 +36,7 @@ import type { ApiAddrSearchResult, ApiSearchResult } from '~/lib/apiSearch'
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
   initialCategoryIds?: number[]
+  initialPoi?: string
 }>()
 
 //
@@ -48,6 +49,7 @@ const { apiMenuCategory, features, selectedCategoryIds } = storeToRefs(menuStore
 const favoriteStore = useFavoriteStore()
 const { favoritesIds, favoriteAddresses, favoriteFeatures, favoriteCount } = storeToRefs(favoriteStore)
 const { config, settings, contents } = useSiteStore()
+const { API_ENDPOINT, API_PROJECT, API_THEME } = config!
 const { $tracking } = useNuxtApp()
 const route = useRoute()
 const router = useRouter()
@@ -220,28 +222,33 @@ const siteName = computed(() => {
   return settings!.themes[0]?.title.fr || ''
 })
 
+// Store Subscribers
+mapStore.$onAction(({ name, after }) => {
+  if (name === 'setSelectedFeature') {
+    after((feature) => {
+      isPoiCardShown.value = !!feature
+
+      if (process.client) {
+        routerPushUrl()
+
+        if (feature) {
+          $tracking({
+            type: 'popup',
+            poiId: feature.properties.metadata.id || feature.properties?.id,
+            title: feature.properties?.name,
+            location: window.location.href,
+            path: route.path,
+            categoryIds: feature.properties?.metadata?.category_ids || [],
+          })
+        }
+      }
+    })
+  }
+})
+
 //
 // Watchers
 //
-watch(selectedFeature, (newFeature) => {
-  isPoiCardShown.value = !!newFeature
-
-  if (process.client) {
-    routerPushUrl()
-
-    if (newFeature) {
-      $tracking({
-        type: 'popup',
-        poiId: newFeature.properties.metadata.id || newFeature.properties?.id,
-        title: newFeature.properties?.name,
-        location: window.location.href,
-        path: route.path,
-        categoryIds: newFeature.properties?.metadata?.category_ids || [],
-      })
-    }
-  }
-}, { immediate: true })
-
 watch(selectedCategoryIds, (a, b) => {
   if (a !== b) {
     routerPushUrl()
@@ -349,7 +356,7 @@ function onBottomMenuButtonClick() {
 
 function onQuitExplorerFavoriteMode() {
   mode.value = Mode.BROWSER
-  mapStore.setSelectedFeature(null)
+  mapStore.setSelectedFeature()
 }
 
 function toggleFavoriteMode() {
@@ -396,8 +403,7 @@ function routerPushUrl(hashUpdate: { [key: string]: string | null } = {}) {
 }
 
 function toggleExploreAroundSelectedPoi(feature?: ApiPoi) {
-  if (feature)
-    mapStore.setSelectedFeature(feature)
+  mapStore.setSelectedFeature(feature)
 
   if (!isModeExplorer.value) {
     mode.value = Mode.EXPLORER
@@ -440,7 +446,29 @@ function scrollTop() {
 }
 
 function handlePoiCardClose() {
-  mapStore.setSelectedFeature(null)
+  mapStore.setSelectedFeature()
+}
+
+// Fetch inital POI
+const { data, error } = await useFetch<ApiPoi>(
+  () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${props.initialPoi}.geojson`,
+  {
+    query: {
+      geometry_as: 'bbox',
+      short_description: true,
+    },
+    immediate: !!props.initialPoi,
+  },
+)
+
+if (props.initialPoi) {
+  if (error.value)
+    throw createError(error.value)
+
+  if (!data.value)
+    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
+
+  mapStore.setSelectedFeature(data.value)
 }
 </script>
 
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 0e1962b0..ba12c160 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -288,11 +288,11 @@ export default defineNuxtComponent({
         this.showSelectedFeature()
       }
       else {
-        this.updateSelectedFeature(null, undefined)
+        this.updateSelectedFeature()
       }
     },
 
-    updateSelectedFeature(feature: ApiPoi | null, marker?: Marker, fetch = false) {
+    updateSelectedFeature(feature?: ApiPoi, marker?: Marker, fetch = false) {
       if (this.selectedFeature !== feature) {
         this.mapStore.setSelectedFeature(feature)
         this.setSelectedFeatureMarker(marker)
@@ -343,12 +343,11 @@ export default defineNuxtComponent({
           zoom
             = this.categories.find(
               category =>
-                category.id === this.selectedFeature?.properties.vido_cat,
+                category.id === this.selectedFeature!.properties.vido_cat,
             )?.category.zoom || 17
         }
         this.map.flyTo({
-          center: this.selectedFeature.geometry
-            .coordinates as unknown as LatLng,
+          center: this.selectedFeature.geometry.coordinates as unknown as LatLng,
           zoom: zoom === undefined ? Math.max(this.map.getZoom(), 17) : zoom,
         })
       }
@@ -411,13 +410,13 @@ export default defineNuxtComponent({
       if (
         this.selectedFeature
         && (this.selectedFeature.properties?.metadata?.id
-        || this.selectedFeature?.id
-        || this.selectedFeature?.properties?.id)
+        || this.selectedFeature.id
+        || this.selectedFeature.properties?.id)
       ) {
         filterRouteByPoiIds(this.map as Map, [
           this.selectedFeature.properties?.metadata?.id
-          || this.selectedFeature?.id
-          || this.selectedFeature?.properties?.id,
+          || this.selectedFeature.id
+          || this.selectedFeature.properties?.id,
         ])
       }
       else {
diff --git a/pages/embedded.vue b/pages/embedded.vue
index 350809f0..6e3a0200 100644
--- a/pages/embedded.vue
+++ b/pages/embedded.vue
@@ -2,18 +2,14 @@
 import type { GeoJSON, MultiPolygon, Polygon } from 'geojson'
 import { storeToRefs } from 'pinia'
 import Embedded from '~/components/Home/Embedded.vue'
-import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
-import { mapStore as useMapStore } from '~/stores/map'
 
 //
 // Composables
 //
 const { params, query, path } = useRoute()
 const siteStore = useSiteStore()
-const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
-const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
 const { $trackingInit } = useNuxtApp()
 
 //
@@ -66,24 +62,13 @@ else {
 }
 
 categoryIds.value = categoryIdsJoin.value?.split(',').map(id => Number.parseInt(id))
-
-const { data, error } = await useFetch<ApiPoi>(`${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson?geometry_as=bbox&short_description=false`)
-
-if (categoryIds.value && poiId.value) {
-  if (error.value)
-    throw createError(error.value)
-
-  if (!data.value)
-    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
-
-  mapStore.setSelectedFeature(data.value!)
-}
 </script>
 
 <template>
   <Embedded
     :boundary-area="boundaryGeojson"
     :initial-category-ids="categoryIds"
+    :initial-poi="poiId"
   />
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 5c46f0cb..92bc246f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,18 +2,14 @@
 import type { GeoJSON, MultiPolygon, Polygon } from 'geojson'
 import { storeToRefs } from 'pinia'
 import Home from '~/components/Home/Home.vue'
-import type { ApiPoi } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
-import { mapStore as useMapStore } from '~/stores/map'
 
 //
 // Composables
 //
 const { params, query, path } = useRoute()
 const siteStore = useSiteStore()
-const mapStore = useMapStore()
 const { config, settings } = storeToRefs(siteStore)
-const { API_ENDPOINT, API_PROJECT, API_THEME } = config.value!
 const { $trackingInit } = useNuxtApp()
 
 //
@@ -66,25 +62,13 @@ else {
 }
 
 categoryIds.value = categoryIdsJoin.value?.split(',').map(id => Number.parseInt(id))
-
-// Fetch inital POI
-const { data, error } = await useFetch<ApiPoi>(`${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${poiId.value}.geojson?geometry_as=bbox&short_description=true`)
-
-if (categoryIds.value && poiId.value) {
-  if (error.value)
-    throw createError(error.value)
-
-  if (!data.value)
-    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
-
-  mapStore.setSelectedFeature(data.value!)
-}
 </script>
 
 <template>
   <Home
     :boundary-area="boundaryGeojson"
     :initial-category-ids="categoryIds"
+    :initial-poi="poiId"
   />
 </template>
 
diff --git a/stores/map.ts b/stores/map.ts
index e2bede0b..8a6b6a87 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -10,9 +10,21 @@ interface State {
   selectedFeature: ApiPoi | null
 }
 
+function isJsonObject(item: string): boolean {
+  let value = false
+  try {
+    value = JSON.parse(item)
+  }
+  catch (e) {
+    return false
+  }
+
+  return typeof value === 'object' && value !== null
+}
+
 export const mapStore = defineStore('map', {
   state: (): State => ({
-    center: { lng: 0, lat: 0 },
+    center: { lng: 0, lat: 0 } as LatLng,
     mode: Mode.BROWSER,
     pitch: 0,
     selectedFeature: null,
@@ -26,25 +38,13 @@ export const mapStore = defineStore('map', {
   },
 
   actions: {
-    setSelectedFeature(feature: ApiPoi | null) {
+    setSelectedFeature(feature?: ApiPoi) {
       if (!feature) {
         this.selectedFeature = null
       }
       else {
         const goodFeature = feature
 
-        function isJsonObject(item: string): boolean {
-          let value = false
-          try {
-            value = JSON.parse(item)
-          }
-          catch (e) {
-            return false
-          }
-
-          return typeof value === 'object' && value !== null
-        }
-
         if (feature?.properties) {
           const cleanProperties: ApiPoiProperties = {} as ApiPoiProperties
 
@@ -58,6 +58,7 @@ export const mapStore = defineStore('map', {
         }
 
         this.selectedFeature = goodFeature
+        return this.selectedFeature
       }
     },
   },