fix(nc-gui): add missing remove event listner

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -380,7 +380,7 @@ const handleAddNewConnection = () => {
   pageMode.value = IntegrationsPageMode.LIST
 }
 
-const eventBusHandler = (event, payload) => {
+const eventBusHandler = (event: IntegrationStoreEvents, payload: any) => {
   if (event === IntegrationStoreEvents.INTEGRATION_ADD && payload?.id) {
     formState.value.fk_integration_id = payload.id
     until(() => selectedIntegration.value?.id === payload.id)

packages/nc-gui/components/extensions/Pane.vue

@@ -137,7 +137,7 @@ const handleAutoScroll = async (id: string) => {
   }
 }
 
-const extensionEventBusEvent = (event: ExtensionsEvents, payload) => {
+const extensionEventBusEvent = (event: ExtensionsEvents, payload: any) => {
   if ([ExtensionsEvents.DUPLICATE, ExtensionsEvents.ADD].includes(event) && payload) {
     handleAutoScroll(payload)
   }

packages/nc-gui/components/smartsheet/Form.vue

@@ -98,18 +98,18 @@ const { preFillFormSearchParams } = storeToRefs(useViewsStore())
 const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook())
 const { withLoading } = useLoadingTrigger()
 
-reloadEventHook.on(
-  withLoading(async (params) => {
-    if (params?.isFormFieldFilters) {
-      setTimeout(() => {
-        checkFieldVisibility()
-      }, 100)
-    } else {
-      await Promise.all([loadFormView(), loadReleatedMetas()])
-      setFormData()
-    }
-  }),
-)
+const reloadEventHookHandler = withLoading(async (params) => {
+  if (params?.isFormFieldFilters) {
+    setTimeout(() => {
+      checkFieldVisibility()
+    }, 100)
+  } else {
+    await Promise.all([loadFormView(), loadReleatedMetas()])
+    setFormData()
+  }
+})
+
+reloadEventHook.on(reloadEventHookHandler)
 
 const smartsheetEventHandler = (event: SmartsheetStoreEvents) => {
   if (event === SmartsheetStoreEvents.COPIED_VIEW_CONFIG) {
@@ -121,6 +121,7 @@ eventBus.on(smartsheetEventHandler)
 
 onBeforeUnmount(() => {
   eventBus.off(smartsheetEventHandler)
+  reloadEventHook.off(reloadEventHookHandler)
 })
 
 const { fields, showAll, hideAll } = useViewColumnsOrThrow()

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -179,13 +179,15 @@ openNewRecordFormHook?.on(openNewRecordFormHookHandler)
 
 const reloadAttachments = ref(false)
 
-reloadViewMetaHook?.on(async () => {
+const reloadViewMetaListener = async () => {
   reloadAttachments.value = true
 
   await nextTick(() => {
     reloadAttachments.value = false
   })
-})
+}
+
+reloadViewMetaHook?.on(reloadViewMetaListener)
 
 const CHUNK_SIZE = 50
 const BUFFER_SIZE = 100
@@ -364,13 +366,13 @@ watch(
   },
 )
 
-reloadViewDataHook?.on(
-  withLoading(async () => {
-    clearCache(Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY)
-    await syncCount()
-    calculateSlices()
-  }),
-)
+const reloadViewDataListener = withLoading(async () => {
+  clearCache(Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY)
+  await syncCount()
+  calculateSlices()
+})
+
+reloadViewDataHook?.on(reloadViewDataListener)
 
 const smartsheetEventHandler = (event: SmartsheetStoreEvents) => {
   if (event === SmartsheetStoreEvents.DATA_RELOAD) {
@@ -383,6 +385,8 @@ eventBus.on(smartsheetEventHandler)
 onBeforeUnmount(() => {
   openNewRecordFormHook.off(openNewRecordFormHookHandler)
   eventBus.off(smartsheetEventHandler)
+  reloadViewMetaHook?.off(reloadViewMetaListener)
+  reloadViewDataHook?.off(reloadViewDataListener)
 })
 
 const handleOpenNewRecordForm = () => {

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -126,11 +126,11 @@ const kanbanContainerRef = ref()
 
 const selectedStackTitle = ref('')
 
-reloadViewDataHook?.on(
-  withLoading(async () => {
-    await loadKanbanData()
-  }),
-)
+const reloadViewDataListener = withLoading(async () => {
+  await loadKanbanData()
+})
+
+reloadViewDataHook?.on(reloadViewDataListener)
 
 const smartsheetEventHandler = (event: SmartsheetStoreEvents) => {
   if (event === SmartsheetStoreEvents.DATA_RELOAD) {
@@ -164,13 +164,15 @@ const attachments = (record: any): Attachment[] => {
 
 const reloadAttachments = ref(false)
 
-reloadViewMetaHook?.on(async () => {
+const reloadViewMetaListener = async () => {
   reloadAttachments.value = true
 
   nextTick(() => {
     reloadAttachments.value = false
   })
-})
+}
+
+reloadViewMetaHook?.on(reloadViewMetaListener)
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
@@ -411,6 +413,8 @@ openNewRecordFormHook?.on(openNewRecordFormHookHandler)
 onBeforeUnmount(() => {
   openNewRecordFormHook.off(openNewRecordFormHookHandler)
   eventBus.off(smartsheetEventHandler)
+  reloadViewMetaHook?.off(reloadViewMetaListener)
+  reloadViewDataHook?.off(reloadViewDataListener)
 })
 
 // reset context menu target on hide

packages/nc-gui/components/smartsheet/Map.vue

@@ -68,10 +68,12 @@ const expandForm = (row: Row, state?: Record<string, any>) => {
   }
 }
 
-openNewRecordFormHook?.on(async () => {
+const openNewRecordFormListener = async () => {
   const newRow = await addEmptyRow()
   expandForm(newRow)
-})
+}
+
+openNewRecordFormHook?.on(openNewRecordFormListener)
 
 const expandedFormOnRowIdDlg = computed({
   get() {
@@ -168,15 +170,23 @@ onMounted(async () => {
   })
 })
 
-reloadViewMetaHook?.on(async () => {
+const reloadViewMetaListener = async () => {
   await loadMapMeta()
+}
+
+reloadViewMetaHook?.on(reloadViewMetaListener)
+
+const reloadViewDataListener = withLoading(async () => {
+  await loadMapData()
 })
 
-reloadViewDataHook?.on(
-  withLoading(async () => {
-    await loadMapData()
-  }),
-)
+reloadViewDataHook?.on(reloadViewDataListener)
+
+onBeforeUnmount(() => {
+  openNewRecordFormHook?.off(openNewRecordFormListener)
+  reloadViewMetaHook?.off(reloadViewMetaListener)
+  reloadViewDataHook?.off(reloadViewDataListener)
+})
 
 provide(ReloadRowDataHookInj, reloadViewDataHook!)
 

packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { isVirtualCol, type ColumnType } from 'nocodb-sdk'
 
 const props = defineProps<{
   fields: ColumnType[]

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -119,15 +119,19 @@ onMounted(async () => {
   }
 })
 
-reloadViewDataHook?.on(
-  withLoading(async (params: void | { shouldShowLoading?: boolean }) => {
-    await Promise.all([
-      loadCalendarData(params?.shouldShowLoading ?? false),
-      loadSidebarData(params?.shouldShowLoading ?? false),
-      fetchActiveDates(),
-    ])
-  }),
-)
+const reloadViewDataListener = withLoading(async (params: void | { shouldShowLoading?: boolean }) => {
+  await Promise.all([
+    loadCalendarData(params?.shouldShowLoading ?? false),
+    loadSidebarData(params?.shouldShowLoading ?? false),
+    fetchActiveDates(),
+  ])
+})
+
+reloadViewDataHook?.on(reloadViewDataListener)
+
+onBeforeUnmount(() => {
+  reloadViewDataHook?.off(reloadViewDataListener)
+})
 
 // on filter param changes reload the data
 // In calendar view we don't have toolbar search component, so we have to listen to route query changes to reload the data

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -157,33 +157,34 @@ watch(activeViewMode, async (v) => {
 
 const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value?.includes(c)) ?? null)
 
-reloadViewDataTrigger.on(
-  withLoading(async (params) => {
-    // Skip loading deleted record again
-    if (params?.skipLoadingRowId && params?.skipLoadingRowId === primaryKey.value) {
-      return
-    }
+const reloadViewDataListener = withLoading(async (params) => {
+  // Skip loading deleted record again
+  if (params?.skipLoadingRowId && params?.skipLoadingRowId === primaryKey.value) {
+    return
+  }
 
-    const isSameRecordUpdated =
-      params?.relatedTableMetaId &&
-      params?.rowId &&
-      params?.relatedTableMetaId === meta.value?.id &&
-      params?.rowId === rowId.value
+  const isSameRecordUpdated =
+    params?.relatedTableMetaId && params?.rowId && params?.relatedTableMetaId === meta.value?.id && params?.rowId === rowId.value
 
-    // If relatedTableMetaId & rowId is present that means some nested record is updated
+  // If relatedTableMetaId & rowId is present that means some nested record is updated
 
-    // If same nested record udpated then udpate whole row
-    if (isSameRecordUpdated) {
-      await _loadRow(rowId.value)
-    } else if (params?.relatedTableMetaId && params?.rowId) {
-      // If it is not same record updated but it has relatedTableMetaId & rowId then update only virtual columns
-      await _loadRow(rowId.value, true)
-    } else {
-      // Else update only new/duplicated/renamed columns
-      await _loadRow(rowId.value, false, true)
-    }
-  }),
-)
+  // If same nested record udpated then udpate whole row
+  if (isSameRecordUpdated) {
+    await _loadRow(rowId.value)
+  } else if (params?.relatedTableMetaId && params?.rowId) {
+    // If it is not same record updated but it has relatedTableMetaId & rowId then update only virtual columns
+    await _loadRow(rowId.value, true)
+  } else {
+    // Else update only new/duplicated/renamed columns
+    await _loadRow(rowId.value, false, true)
+  }
+})
+
+reloadViewDataTrigger.on(reloadViewDataListener)
+
+onBeforeUnmount(() => {
+  reloadViewDataTrigger.off(reloadViewDataListener)
+})
 
 const duplicatingRowInProgress = ref(false)
 

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -73,7 +73,7 @@ const viewDisplayField = computed(() => {
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
-reloadAggregate?.on(async (_fields) => {
+const reloadAggregateListener = async (_fields: any) => {
   if (!fields.value?.length) return
   if (!_fields || !_fields?.fields?.length) {
     await props.loadGroupAggregation(vGroup.value)
@@ -93,11 +93,13 @@ reloadAggregate?.on(async (_fields) => {
       vGroup.value,
       Object.entries(fieldAggregateMapping).map(([field, type]) => ({
         field,
-        type,
+        type: type as string,
       })),
     )
   }
-})
+}
+
+reloadAggregate?.on(reloadAggregateListener)
 
 const _loadGroupData = async (group: Group, force?: boolean, params?: any) => {
   isViewDataLoading.value = true
@@ -181,6 +183,7 @@ onMounted(async () => {
 
 onBeforeUnmount(async () => {
   reloadViewDataHook?.off(reloadViewDataHandler)
+  reloadAggregate?.off(reloadAggregateListener)
 })
 
 watch([() => vGroup.value.key], async (n, o) => {

packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue

@@ -1794,7 +1794,7 @@ const resetProgress = (payload: { type: 'table' | 'row' | 'cell'; data: { rowId?
   }
 }
 
-const smartsheetEvents = async (event: SmartsheetStoreEvents, payload) => {
+const smartsheetEvents = async (event: SmartsheetStoreEvents, payload: any) => {
   if (event === SmartsheetStoreEvents.FIELD_ADD) {
     columnOrder.value = payload
     addColumnDropdown.value = true

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -130,9 +130,15 @@ const checkForCurrentUserFilter = (currentFilters: FilterType[] = []) => {
 }
 
 if (isEeUI) {
-  reloadViewDataEventHook.on(async (params) => {
+  const reloadViewDataListener = async (params: any) => {
     if (params?.isFormFieldFilters) return
     isCurrentUserFilterPresent.value = checkForCurrentUserFilter(Object.values(allFilters.value).flat(Infinity) as FilterType[])
+  }
+
+  reloadViewDataEventHook.on(reloadViewDataListener)
+
+  onBeforeUnmount(() => {
+    reloadViewDataEventHook.off(reloadViewDataListener)
   })
 
   watch(

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -238,6 +238,7 @@ onMounted(() => {
 onUnmounted(() => {
   onDivDataCellEventHook?.off(toggleDropdown)
   cellClickHook?.off(toggleDropdown)
+  cellEventHook?.off(onCellEvent)
 })
 
 watch(dropdownVisible, (val) => {

packages/nc-gui/components/virtual-cell/components/LinkedItems.vue

@@ -163,14 +163,18 @@ const addNewRecord = () => {
   isNewRecord.value = true
 }
 
-reloadViewDataTrigger.on(
-  withLoading((params) => {
-    if (params?.isFromLinkRecord) {
-      refreshCurrentRow()
-      loadChildrenList()
-    }
-  }),
-)
+const reloadViewDataListener = withLoading((params) => {
+  if (params?.isFromLinkRecord) {
+    refreshCurrentRow()
+    loadChildrenList()
+  }
+})
+
+reloadViewDataTrigger.on(reloadViewDataListener)
+
+onBeforeUnmount(() => {
+  reloadViewDataTrigger.off(reloadViewDataListener)
+})
 
 const onCreatedRecord = async (record: any) => {
   reloadTrigger?.trigger({

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -1208,6 +1208,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       if (activeDataListener.value) {
         $ncSocket.offMessage(activeDataListener.value)
       }
+
       eventBus.off(smartsheetEventHandler)
     })
 

packages/nc-gui/composables/useGridViewData.ts

@@ -154,7 +154,7 @@ export function useGridViewData(
     }
   }
 
-  reloadAggregate?.on((v: Record<string, any> = {}) => {
+  const reloadAggregateListener = (v: Record<string, any> = {}) => {
     const { path, fields } = v
     if (!path?.length && isGroupBy.value) {
       const allGroups: CanvasGroup[] = []
@@ -176,6 +176,12 @@ export function useGridViewData(
         updateGroupAggregations(allGroups, fields)
       }
     }
+  }
+
+  reloadAggregate?.on(reloadAggregateListener)
+
+  onBeforeUnmount(() => {
+    reloadAggregate?.off(reloadAggregateListener)
   })
 
   function getCount(path?: Array<number>) {

packages/nc-gui/composables/useKanbanViewStore.ts

@@ -931,6 +931,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
 
     onBeforeUnmount(() => {
       eventBus.off(smartsheetStoreEventHandler)
+
       if (activeDataListener.value) {
         $ncSocket.offMessage(activeDataListener.value)
       }

packages/nc-gui/composables/useViewAggregate.ts

@@ -154,7 +154,7 @@ const [useProvideViewAggregate, useViewAggregate] = useInjectionState(
         })
     })
 
-    reloadAggregate?.on(async (_fields) => {
+    const reloadAggregateListener = async (_fields: any) => {
       if (!_fields || !_fields?.fields?.length) {
         await loadViewAggregate()
       }
@@ -178,10 +178,16 @@ const [useProvideViewAggregate, useViewAggregate] = useInjectionState(
         await loadViewAggregate(
           Object.entries(fieldAggregateMapping).map(([field, type]) => ({
             field,
-            type,
+            type: type as string,
           })),
         )
       }
+    }
+
+    reloadAggregate?.on(reloadAggregateListener)
+
+    onBeforeUnmount(() => {
+      reloadAggregate?.off(reloadAggregateListener)
     })
 
     return {

packages/nc-gui/extensions/data-exporter/index.vue

@@ -250,7 +250,7 @@ const filterOption = (input: string, option: { key: string }) => {
   return option.key?.toLowerCase()?.includes(input?.toLowerCase())
 }
 
-const extensionEvents = async (event: string, payload) => {
+const extensionEvents = async (event: ExtensionsEvents, payload: any) => {
   if (event === ExtensionsEvents.CLEARDATA && payload && extension.value.id && payload === extension.value.id) {
     const deleteExportsPayload = exportedFiles.value.map((exp) => exp.id)
 

packages/nc-gui/nuxt-shim.d.ts

@@ -40,7 +40,7 @@ declare module '#app' {
       offMessage: (listenerId: string) => void
     }
     $eventBus: {
-      smartsheetStoreEventBus: UseEventBusReturn<string, any>
+      smartsheetStoreEventBus: UseEventBusReturn<SmartsheetStoreEvents, any>
       realtimeBaseUserEventBus: UseEventBusReturn<string, any>
       realtimeViewMetaEventBus: UseEventBusReturn<string, any>
     }