refactor: set explorer mode feature flag in store #403

Author: wazolab

components/Home/Embedded.vue

@@ -74,10 +74,6 @@ onMounted(() => {
 //
 // Computed
 //
-const explorerModeEnabled = computed(() => {
-  return settings!.themes[0]?.explorer_mode ?? true
-})
-
 const filters = computed(() => {
   return route.query.menuItemIds
     ? route.query.menuItemIds
@@ -189,7 +185,6 @@ function toggleExploreAroundSelectedPoi() {
       <PoiCardContent
         :details-is-external="true"
         :poi="selectedFeature"
-        :explorer-mode-enabled="explorerModeEnabled"
         :favorites-mode-enabled="false"
         @explore-click="toggleExploreAroundSelectedPoi"
         @zoom-click="goToSelectedFeature"
@@ -209,7 +204,6 @@ function toggleExploreAroundSelectedPoi() {
           :features="mapFeatures"
           :selected-categories-ids="selectedCategoryIds"
           :style-icon-filter="poiFilters"
-          :explorer-mode-enabled="explorerModeEnabled"
           :cooperative-gestures="false"
           :boundary-area="boundaryArea || settings!.polygon.data"
         />

components/Home/Home.vue

@@ -143,10 +143,6 @@ onMounted(async () => {
 //
 // Computed
 //
-const explorerModeEnabled = computed(() => {
-  return settings!.themes[0]?.explorer_mode ?? true
-})
-
 const favoritesModeEnabled = computed(() => {
   return settings!.themes[0]?.favorites_mode ?? true
 })
@@ -565,7 +561,6 @@ function handlePoiCardClose() {
             :explore-around-selected-poi="toggleExploreAroundSelectedPoi"
             :go-to-selected-poi="goToSelectedFeature"
             :toggle-favorite="toggleFavorite"
-            :explorer-mode-enabled="explorerModeEnabled"
             @toggle-favorite-mode="toggleFavoriteMode"
             @toggle-note-book-mode="toggleNoteBookMode"
           />
@@ -590,7 +585,6 @@ function handlePoiCardClose() {
           :features="mapFeatures"
           :selected-categories-ids="isModeExplorer ? [] : selectedCategoryIds"
           :style-icon-filter="poiFilters"
-          :explorer-mode-enabled="explorerModeEnabled"
           :enable-filter-route-by-categories="!isModeFavorites"
           :enable-filter-route-by-features="isModeFavorites"
           :boundary-area="boundaryArea || settings!.polygon.data"
@@ -630,7 +624,6 @@ function handlePoiCardClose() {
           "
           :poi="selectedFeature"
           class="tw-grow-0"
-          :explorer-mode-enabled="explorerModeEnabled"
           :favorites-mode-enabled="favoritesModeEnabled"
           @explore-click="toggleExploreAroundSelectedPoi(undefined)"
           @favorite-click="toggleFavorite"
@@ -661,7 +654,6 @@ function handlePoiCardClose() {
             "
             :poi="selectedFeature"
             class="tw-grow-0 tw-text-left tw-h-full"
-            :explorer-mode-enabled="explorerModeEnabled"
             :favorites-mode-enabled="favoritesModeEnabled"
             @explore-click="toggleExploreAroundSelectedPoi(undefined)"
             @favorite-click="toggleFavorite"

components/MainMap/FavoriteMenu.vue

@@ -11,7 +11,6 @@ import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 
 const props = defineProps<{
   exploreAroundSelectedPoi: Function
-  explorerModeEnabled: boolean
   goToSelectedPoi: Function
   toggleFavorite: Function
 }>()
@@ -108,7 +107,6 @@ async function toggleNoteBookMode() {
         max-width="80rem"
       >
         <FavoriteNoteBook
-          :explorer-mode-enabled="explorerModeEnabled"
           @explore-click="explore"
           @favorite-click="handleFavorite"
           @zoom-click="onZoomClick"

components/MainMap/FavoriteNoteBook.vue

@@ -10,10 +10,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { siteStore as useSiteStore } from '~/stores/site'
 
-defineProps<{
-  explorerModeEnabled: boolean
-}>()
-
 defineEmits<{
   (e: 'onClose'): void
   (e: 'exploreClick', poi: ApiPoi): void
@@ -131,7 +127,6 @@ function removeFavorites() {
     <PoisDeck
       :pois="favoriteFeatures"
       :is-card-light="false"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="true"
       class="tw-pb-4"
       @explore-click="$emit('exploreClick', $event)"

components/MainMap/MapFeatures.stories.ts

@@ -39,7 +39,6 @@ const defaultProps = {
       },
     } as ApiMenuCategory,
   ],
-  explorerModeEnabled: false,
 }
 
 export const Default = bind(

components/MainMap/MapFeatures.story.vue

@@ -34,7 +34,6 @@ const defaultProps = {
       },
     } as ApiMenuCategory,
   ],
-  explorerModeEnabled: false,
 }
 
 const feature1: ApiPoi = {

components/MainMap/MapFeatures.vue

@@ -94,10 +94,6 @@ export default defineNuxtComponent({
       type: Array as PropType<Array<string[]> | null>,
       default: null,
     },
-    explorerModeEnabled: {
-      type: Boolean,
-      required: true,
-    },
     enableFilterRouteByCategories: {
       type: Boolean,
       default: true,
@@ -122,7 +118,9 @@ export default defineNuxtComponent({
 
   setup() {
     const device = useDevice()
-    const { config } = storeToRefs(useSiteStore())
+    const siteStore = useSiteStore()
+    const { config } = siteStore
+    const { explorerModeEnabled } = storeToRefs(useSiteStore())
     const mapStore = useMapStore()
     const { center, selectedFeature, teritorioCluster } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
@@ -131,6 +129,7 @@ export default defineNuxtComponent({
       center,
       config,
       device,
+      explorerModeEnabled,
       mapBase: ref<InstanceType<typeof MapBase>>(),
       mapStore,
       mapStyleLoaded,

components/PoisCard/PoiCard.stories.ts

@@ -11,7 +11,6 @@ export default {
 
 const defaultProps = {
   poi,
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoiCard.story.vue

@@ -5,7 +5,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 
 const defaultProps = {
   poi: poi as ApiPoi,
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoiCard.vue

@@ -11,7 +11,6 @@ import type { ApiPoi } from '~/lib/apiPois'
 withDefaults(defineProps<{
   canClose?: boolean
   poi: ApiPoi
-  explorerModeEnabled: boolean
   favoritesModeEnabled: boolean
   showImage?: boolean
 }>(), {
@@ -85,7 +84,6 @@ const closeBtnStyles = reactive({
 
     <PoiCardContent
       :poi="poi"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="favoritesModeEnabled"
       class="tw-px-4 tw-py-5 tw-flex tw-flex-col md:tw-overflow-y-auto tw-flex-grow md:tw-max-h-full tw-box-border tw-w-full md:tw-h-80 md:tw-w-96"
       @explore-click="$emit('exploreClick', $event)"

components/PoisCard/PoiCardContent.vue

@@ -8,6 +8,7 @@ import type { ApiPoi } from '~/lib/apiPois'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoriteStore as useFavoriteStore } from '~/stores/favorite'
 import { mapStore as useMapStore } from '~/stores/map'
+import { siteStore as useSiteStore } from '~/stores/site'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import useDevice from '~/composables/useDevice'
 import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
@@ -17,7 +18,6 @@ import IsochroneTrigger from '~/components/Isochrone/IsochroneTrigger.vue'
 //
 const props = withDefaults(defineProps<{
   detailsIsExternal?: boolean
-  explorerModeEnabled: boolean
   favoritesModeEnabled: boolean
   poi: ApiPoi
 }>(), {
@@ -44,6 +44,7 @@ const { isModeExplorer } = storeToRefs(useMapStore())
 const device = useDevice()
 const { enabled: isochroneEnabled, isochroneCurrentFeature } = useIsochrone()
 const { featureName, featureCategoryName } = useFeature(toRef(() => props.poi), { type: 'popup' })
+const { explorerModeEnabled } = storeToRefs(useSiteStore())
 
 //
 // Data

components/PoisCard/PoisDeck.stories.ts

@@ -25,7 +25,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id),
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 }
 

components/PoisCard/PoisDeck.story.vue

@@ -18,7 +18,6 @@ const defaultProps = {
     ),
   ),
   selectedPoiIds: points.map(feature => feature.properties.id as ApiPoiId),
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
   isCardLight: true,
 }

components/PoisCard/PoisDeck.vue

@@ -4,12 +4,10 @@ import PoiCard from '~/components/PoisCard/PoiCard.vue'
 import PoiCardLight from '~/components/PoisCard/PoiCardLight.vue'
 
 withDefaults(defineProps<{
-  explorerModeEnabled?: boolean
   favoritesModeEnabled?: boolean
   pois: ApiPoi[]
   isCardLight: boolean
 }>(), {
-  explorerModeEnabled: false,
   favoritesModeEnabled: false,
 })
 
@@ -38,7 +36,6 @@ defineEmits<{
       :can-close="false"
       :poi="item"
       class="tw-grow-1 poi-deck"
-      :explorer-mode-enabled="explorerModeEnabled"
       :favorites-mode-enabled="favoritesModeEnabled"
       @explore-click="$emit('exploreClick', $event)"
       @favorite-click="$emit('favoriteClick', $event)"

stores/site.ts

@@ -8,6 +8,7 @@ import type { VidoConfig } from '~/utils/types-config'
 interface State {
   locale: string | null
   config: VidoConfig | undefined
+  explorerModeEnabled: boolean
   settings: Settings | undefined
   contents: ContentEntry[] | undefined
   translations: PropertyTranslations | undefined
@@ -17,6 +18,7 @@ export const siteStore = defineStore('site', {
   state: (): State => ({
     locale: null,
     config: undefined,
+    explorerModeEnabled: false,
     settings: undefined,
     contents: undefined,
     translations: undefined,
@@ -25,6 +27,7 @@ export const siteStore = defineStore('site', {
     async init(headers: Record<string, string>) {
       this.config = vidoConfig(headers)
       this.settings = await getSettings(this.config)
+      this.explorerModeEnabled = this.settings?.themes[0]?.explorer_mode || true
       this.contents = await getContents(this.config)
       this.translations = await getPropertyTranslations(this.config)
     },