refactor: move event from prop to emit #401

teritorio · Oct 28, 2024 · a2d71ab · a2d71ab
1 parent 42a6aa5
commit a2d71ab
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
@@ -284,7 +284,10 @@ watch(isModeFavorites, async (isEnabled) => {
 //
 // Methods
 //
-function goToSelectedFeature() {
+function goToSelectedFeature(feature?: ApiPoi) {
+  if (feature)
+    mapStore.setSelectedFeature(feature)
+
   if (mapFeaturesRef.value)
     mapFeaturesRef.value.goToSelectedFeature()
 }
@@ -553,11 +556,11 @@ function handlePoiCardClose() {
         >
           <FavoriteMenu
             v-if="favoritesModeEnabled"
-            :explore-around-selected-poi="toggleExploreAroundSelectedPoi"
-            :go-to-selected-poi="goToSelectedFeature"
-            :toggle-favorite="toggleFavorite"
+            @explore-click="toggleExploreAroundSelectedPoi"
+            @favorite-click="toggleFavorite"
             @toggle-favorite-mode="toggleFavoriteMode"
             @toggle-note-book-mode="toggleNoteBookMode"
+            @zoom-click="goToSelectedFeature"
           />
           <NavMenu
             id="nav-menu"

diff --git a/components/MainMap/FavoriteMenu.vue b/components/MainMap/FavoriteMenu.vue
@@ -9,13 +9,17 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { mapStore as useMapStore } from '~/stores/map'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 
-const props = defineProps<{
-  exploreAroundSelectedPoi: Function
-  goToSelectedPoi: Function
-  toggleFavorite: Function
+defineProps<{
+  explorerModeEnabled: boolean
 }>()
 
-const emit = defineEmits(['toggleFavoriteMode', 'toggleNoteBookMode'])
+const emit = defineEmits<{
+  (e: 'exploreClick', poi: ApiPoi): void
+  (e: 'favoriteClick', poi: ApiPoi): void
+  (e: 'toggleFavoriteMode'): void
+  (e: 'toggleNoteBookMode'): void
+  (e: 'zoomClick', poi: ApiPoi): void
+}>()
 
 const device = useDevice()
 const notebookModal = ref<boolean>(false)
@@ -24,9 +28,9 @@ const mapStore = useMapStore()
 const { isModeFavorites } = storeToRefs(mapStore)
 const { favoriteCount } = storeToRefs(useFavoriteStore())
 
-function explore(poi: ApiPoi) {
+function onExploreClick(poi: ApiPoi) {
   notebookModal.value = false
-  props.exploreAroundSelectedPoi(poi)
+  emit('exploreClick', poi)
 }
 
 function onClose() {
@@ -35,13 +39,8 @@ function onClose() {
 }
 
 function onZoomClick(poi: ApiPoi) {
-  mapStore.setSelectedFeature(poi)
   notebookModal.value = false
-  props.goToSelectedPoi(poi)
-}
-
-function handleFavorite(poi: ApiPoi) {
-  props.toggleFavorite(poi)
+  emit('zoomClick', poi)
 }
 
 const { $tracking } = useNuxtApp()
@@ -107,8 +106,8 @@ async function toggleNoteBookMode() {
         max-width="80rem"
       >
         <FavoriteNoteBook
-          @explore-click="explore"
-          @favorite-click="handleFavorite"
+          @explore-click="onExploreClick"
+          @favorite-click="$emit('favoriteClick', $event)"
           @zoom-click="onZoomClick"
           @on-close="onClose"
         />