geodata easter egg: debugging weird template reactivity issue for the bottom menu

packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue

@@ -22,38 +22,48 @@ function onOpenModal(type: ViewTypes, title = '') {
   $e('c:view:create', { view: type })
   emits('openModal', { type, title })
 }
+
+const BAR = ref(true)
+
+setInterval(() => {
+  // alert('jo')
+  BAR.value = !BAR.value
+}, 2000)
 </script>
 
 <template>
-  {{ geodataToggleState.show }}
   <a-menu :selected-keys="[]" class="flex flex-col">
     <div>
       <h3 class="px-3 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
       </h3>
 
-      <a-menu-item
+      <!-- <div v-if="BAR"> -->
-        key="grid"
+        BAR IS TRUE
-        class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
+        <a-menu-item
-        @click="onOpenModal(ViewTypes.GRID)"
+          v-if="BAR"
-      >
+          key="grid"
-        <a-tooltip :mouse-enter-delay="1" placement="left">
+          class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
-          <template #title>
+          @click="onOpenModal(ViewTypes.GRID)"
-            {{ $t('msg.info.addView.grid') }}
+          >GRID BAR
-          </template>
+          <div v-if="BAR">BAR IS TRUE</div>
-
+          <a-tooltip :mouse-enter-delay="1" placement="left">
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+            <template #title>
-            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
+              {{ $t('msg.info.addView.grid') }}
-
+            </template>
-            <div>{{ $t('objects.viewType.grid') }}</div>
+
-
+            <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <div class="flex-1" />
+              <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
-
+
-            <mdi-plus class="group-hover:text-primary" />
+              <div>{{ $t('objects.viewType.grid') }}</div>
-          </div>
+
-        </a-tooltip>
+              <div class="flex-1" />
-      </a-menu-item>
+
-
+              <mdi-plus class="group-hover:text-primary" />
+            </div>
+          </a-tooltip>
+        </a-menu-item>
+      <!-- </div> -->
       <a-menu-item
         key="gallery"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view"
@@ -77,7 +87,6 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-menu-item>
 
       <a-menu-item
-        v-if="!isSqlView"
         key="form"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-form-view"
         @click="onOpenModal(ViewTypes.FORM)"
@@ -98,7 +107,6 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-
       <a-menu-item
         key="kanban"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view"
@@ -120,13 +128,13 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-      <div v-if="geodataToggleState.show">SHOW</div>
+
       <a-menu-item
         key="map"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
         @click="onOpenModal(ViewTypes.MAP)"
       >
-        {{ geodataToggleState.show }}
+        <div id="FOO">FOO: {{ geodataToggleState }}</div>
 
         <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>

packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue

@@ -12,7 +12,7 @@ import { IsGeodataActiveInj, ReadonlyInj, useGlobal } from '#imports'
 // provide(ReadonlyInj, GeoDataToggleRef)
 
 async function toggleGeodataFeature() {
-  geodataToggleState.show = !geodataToggleState.show
+  geodataToggleState.value = !geodataToggleState.value
   // console.log(GeoDataToggleRef.value)
 }
 

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,10 +1,10 @@
-import { reactive } from 'vue';
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import { ref, useInjectionState, useMetas } from '#imports'
 import type { Row } from '~/lib'
 
-export const geodataToggleState = reactive({ show: false })
+// export const geodataToggleState = reactive({ show: false })
+export const geodataToggleState = ref(false)
 
 const formatData = (list: Row[]) =>
   list.map((row) => ({