feat: use shared composable for useProject and useTabs

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/composables/useApi/interceptors.ts

@@ -1,12 +1,12 @@
 import type { Api } from 'nocodb-sdk'
-import { navigateTo, useGlobal, useRoute, useRouter } from '#imports'
+import { navigateTo, useGlobal, useRouter } from '#imports'
 
 const DbNotFoundMsg = 'Database config not found'
 
 export function addAxiosInterceptors(api: Api<any>) {
   const state = useGlobal()
   const router = useRouter()
-  const route = useRoute()
+  const route = $(router.currentRoute)
 
   api.instance.interceptors.request.use((config) => {
     config.headers['xc-gui'] = 'true'

packages/nc-gui/composables/useCellUrlConfig.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
-import { computed, unref, useRoute } from '#imports'
+import { computed, unref, useRouter } from '#imports'
 
 export interface CellUrlOptions {
   behavior?: string
@@ -21,7 +21,9 @@ const parseUrlRules = (serialized?: string): ParsedRules[] | undefined => {
 }
 
 export function useCellUrlConfig(url?: MaybeRef<string>) {
-  const route = useRoute()
+  const router = useRouter()
+
+  const route = $(router.currentRoute)
 
   const config = $computed(() => ({
     behavior: route.query.url_behavior as string | undefined,

packages/nc-gui/composables/useDashboard.ts

@@ -1,7 +1,9 @@
-import { computed, useRoute } from '#imports'
+import { computed, useRouter } from '#imports'
 
 export function useDashboard() {
-  const route = useRoute()
+  const router = useRouter()
+
+  const route = $(router.currentRoute)
 
   const dashboardUrl = computed(() => {
     // todo: test in different scenarios

packages/nc-gui/composables/useLTARStore.ts

@@ -16,6 +16,7 @@ import {
   useMetas,
   useNuxtApp,
   useProject,
+  useRouter,
   useSharedView,
   watch,
 } from '#imports'
@@ -107,7 +108,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const loadChildrenExcludedList = async () => {
       try {
         if (isPublic) {
-          const route = useRoute()
+          const router = useRouter()
+
+          const route = $(router.currentRoute)
+
           childrenExcludedList.value = await $api.public.dataRelationList(
             route.params.viewId as string,
             column.value.id,

packages/nc-gui/composables/useProject.ts

@@ -5,31 +5,30 @@ import {
   ClientType,
   computed,
   createEventHook,
+  createSharedComposable,
   ref,
   useApi,
   useGlobal,
-  useInjectionState,
   useNuxtApp,
   useRoles,
-  useRoute,
   useRouter,
   useTheme,
 } from '#imports'
 import type { ProjectMetaInfo, ThemeConfig } from '~/lib'
 
-const [setup, use] = useInjectionState(() => {
+export const useProject = createSharedComposable(() => {
   const { $e } = useNuxtApp()
 
   const { api, isLoading } = useApi()
 
-  const route = useRoute()
+  const router = useRouter()
+
+  const route = $(router.currentRoute)
 
   const { includeM2M } = useGlobal()
 
   const { setTheme, theme } = useTheme()
 
-  const router = useRouter()
-
   const { projectRoles, loadProjectRoles } = useRoles()
 
   const projectLoadedHook = createEventHook<ProjectType>()
@@ -178,6 +177,14 @@ const [setup, use] = useInjectionState(() => {
     setTheme()
   }
 
+  watch(
+    () => route.params.projectType,
+    (n) => {
+      if (!n) reset()
+    },
+    { immediate: true },
+  )
+
   return {
     project,
     bases,
@@ -201,16 +208,4 @@ const [setup, use] = useInjectionState(() => {
     lastOpenedViewMap,
     isXcdbBase,
   }
-}, 'useProject')
-
-export const provideProject = setup
-
-export function useProject() {
-  const state = use()
-
-  if (!state) {
-    return setup()
-  }
-
-  return state
-}
+})

packages/nc-gui/composables/useTabs.ts

@@ -1,5 +1,5 @@
 import type { WritableComputedRef } from '@vue/reactivity'
-import { computed, navigateTo, ref, useInjectionState, useProject, useRoute, useRouter, watch } from '#imports'
+import { computed, createSharedComposable, navigateTo, ref, useProject, useRouter, watch } from '#imports'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 
@@ -10,13 +10,13 @@ function getPredicate(key: Partial<TabItem>) {
     (!('type' in key) || tab.type === key.type)
 }
 
-const [setup, use] = useInjectionState(() => {
+export const useTabs = createSharedComposable(() => {
   const tabs = ref<TabItem[]>([])
 
-  const route = useRoute()
-
   const router = useRouter()
 
+  const route = $(router.currentRoute)
+
   const { bases, tables } = useProject()
 
   const projectType = $computed(() => route.params.projectType as string)
@@ -157,13 +157,3 @@ const [setup, use] = useInjectionState(() => {
 
   return { tabs, addTab, activeTabIndex, activeTab, clearTabs, closeTab, updateTab }
 })
-
-export function useTabs() {
-  const state = use()
-
-  if (!state) {
-    return setup()
-  }
-
-  return state
-}

packages/nc-gui/composables/useViewData.ts

@@ -29,7 +29,6 @@ import {
   useMetas,
   useNuxtApp,
   useProject,
-  useRoute,
   useRouter,
   useSharedView,
   useSmartsheetStoreOrThrow,
@@ -59,7 +58,7 @@ export function useViewData(
 
   const router = useRouter()
 
-  const route = useRoute()
+  const route = $(router.currentRoute)
 
   const { appInfo } = $(useGlobal())
 

packages/nc-gui/plugins/tele.ts

@@ -1,12 +1,12 @@
 import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
-import { defineNuxtPlugin, useGlobal, useRoute, useRouter, watch } from '#imports'
+import { defineNuxtPlugin, useGlobal, useRouter, watch } from '#imports'
 
 // todo: ignore init if tele disabled
 export default defineNuxtPlugin(async (nuxtApp) => {
   const router = useRouter()
 
-  const route = useRoute()
+  const route = $(router.currentRoute)
 
   const { appInfo } = $(useGlobal())