refactor: apply script setup style to MapFeatures #362

teritorio · Sep 23, 2024 · 787f736 · 787f736
1 parent a4943dc
commit 787f736
Show file tree

Hide file tree

Showing 6 changed files with 354 additions and 420 deletions.
diff --git a/components/Home/Embedded.vue b/components/Home/Embedded.vue
@@ -42,7 +42,7 @@ const { t } = useI18n()
 // Data
 //
 const initialBbox = ref<LngLatBounds | null>(null)
-const mapFeaturesRef = ref<InstanceType<typeof MapFeatures>>()
+const mapFeaturesRef = ref<InstanceType<typeof MapFeatures> | null>(null)
 
 //
 // Hooks
@@ -108,14 +108,11 @@ const mapFeatures = computed((): ApiPoi[] => {
 
 const poiFilters = computed(() => {
   return (
-    (
-      isModeExplorer.value
-      && (Object.values(apiMenuCategory.value || {})
-        .map(c => c.category?.style_class)
-        .filter(s => s !== undefined) as string[][])
-    )
-    || null
-  )
+    isModeExplorer.value
+    && (Object.values(apiMenuCategory.value || {})
+      .map(c => c.category?.style_class)
+      .filter(s => s !== undefined) as string[][])
+  ) || undefined
 })
 
 // Store Subscribers
@@ -144,8 +141,7 @@ watch(selectedCategoryIds, (a, b) => {
 // Methods
 //
 function goToSelectedFeature() {
-  if (mapFeaturesRef.value)
-    mapFeaturesRef.value.goToSelectedFeature()
+  mapFeaturesRef.value?.goToSelectedFeature()
 }
 
 function onMenuChange(newCategoryId: number) {

diff --git a/components/Home/Home.vue b/components/Home/Home.vue
@@ -208,14 +208,11 @@ const menuItemsToIcons = computed(() => {
 
 const poiFilters = computed(() => {
   return (
-    (
-      isModeExplorer.value
-      && (Object.values(apiMenuCategory.value || {})
-        .map(c => c.category?.style_class)
-        .filter(s => s !== undefined) as string[][])
-    )
-    || null
-  )
+    isModeExplorer.value
+    && (Object.values(apiMenuCategory.value || {})
+      .map(c => c.category?.style_class)
+      .filter(s => s !== undefined) as string[][])
+  ) || undefined
 })
 
 const siteName = computed(() => {
@@ -291,8 +288,7 @@ watch(isModeFavorites, async (isEnabled) => {
 // Methods
 //
 function goToSelectedFeature() {
-  if (mapFeaturesRef.value)
-    mapFeaturesRef.value.goToSelectedFeature()
+  mapFeaturesRef.value?.goToSelectedFeature()
 }
 
 async function fetchAddress(hash: string) {

diff --git a/components/MainMap/MapFeatures.story.vue b/components/MainMap/MapFeatures.story.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { LngLatBounds } from 'maplibre-gl'
+import { LngLatBounds, type LngLatBoundsLike } from 'maplibre-gl'
 
 import MapFeatures from '~/components/MainMap/MapFeatures.vue'
 import type { ApiMenuCategory } from '~/lib/apiMenu'
@@ -12,7 +12,7 @@ const defaultProps = {
   defaultBounds: new LngLatBounds([
     [-1.4755803, 43.4916681],
     [-1.4735674, 43.4902015],
-  ]),
+  ]) as LngLatBoundsLike,
   categories: [
     {
       id: 1,
@@ -35,6 +35,7 @@ const defaultProps = {
     } as ApiMenuCategory,
   ],
   explorerModeEnabled: false,
+  selectedCategoriesIds: [],
 }
 
 const feature1: ApiPoi = {