From 30cd0c3d421fa27238fe0a649f8c7dacf2a41506 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 10 Mar 2023 11:59:10 +0530
Subject: [PATCH] refactor: move tab composable to pinia store

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/DateTimePicker.vue |  1 -
 .../nc-gui/components/cell/MultiSelect.vue    |  1 -
 .../nc-gui/components/cell/TimePicker.vue     |  1 -
 .../nc-gui/components/dashboard/TreeView.vue  |  2 +-
 .../dashboard/settings/Metadata.vue           |  2 +-
 .../nc-gui/components/dlg/AirtableImport.vue  |  2 +-
 .../components/smartsheet/sidebar/index.vue   |  2 +-
 .../pages/[projectType]/[projectId]/index.vue |  2 --
 .../[projectType]/[projectId]/index/index.vue |  5 ++++-
 packages/nc-gui/store/tab.ts                  | 22 +++++++++----------
 10 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 25a1d00d99..63931e018a 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { storeToRefs } from 'pinia'
 import {
   ActiveCellInj,
   ColumnInj,
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9b94d99b05..9d6ec72434 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { storeToRefs } from 'pinia'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 7ab2bc30cf..862d7a3036 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { storeToRefs } from 'pinia'
 import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 7d5f9ceeca..cab93036e3 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -41,7 +41,7 @@ const projectStore = useProject()
 const { loadTables } = projectStore
 const { bases, tables, isSharedBase } = storeToRefs(projectStore)
 
-const { activeTab } = useTabs()
+const { activeTab } = storeToRefs(useTabs())
 
 const { deleteTable } = useTable()
 
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index e1fd3ef042..38ac68abc2 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 import { storeToRefs } from 'pinia'
+import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
 const props = defineProps<{
   baseId: string
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 5263fe2fb2..49034ffd64 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -32,7 +32,7 @@ const baseURL = appInfo.ncSiteUrl
 const { $state } = useNuxtApp()
 
 const projectStore = useProject()
-const { loadProject } = projectStore
+
 const { project } = projectStore
 
 const showGoToDashboardButton = ref(false)
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index f212193838..45e8e10ce1 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -22,7 +22,7 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
-const { activeTab } = useTabs()
+const { activeTab } = storeToRefs(useTabs())
 
 const { views, loadViews, isLoading } = useViews(meta)
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index f231a3e021..b8847aaff6 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -581,9 +581,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         v-model:open-key="openDialogKey"
         v-model:data-sources-state="dataSourcesState"
       />
-
       <NuxtPage :page-key="$route.params.projectId" />
-
       <LazyGeneralPreviewAs float />
     </div>
   </NuxtLayout>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 77c004b51f..9408ef9bd5 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { storeToRefs } from 'pinia'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#imports'
 
-const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
+const tabStore = useTabs()
+const { closeTab } = tabStore
+const { tabs, activeTabIndex, activeTab } = storeToRefs(tabStore)
 
 const { isLoading } = useGlobal()
 
diff --git a/packages/nc-gui/store/tab.ts b/packages/nc-gui/store/tab.ts
index 3ae4215178..adc62b199e 100644
--- a/packages/nc-gui/store/tab.ts
+++ b/packages/nc-gui/store/tab.ts
@@ -1,6 +1,6 @@
 import type { WritableComputedRef } from '@vue/reactivity'
-import { storeToRefs } from 'pinia'
-import { computed, createSharedComposable, navigateTo, ref, useProject, useRouter, watch } from '#imports'
+import { defineStore } from 'pinia'
+import { computed, navigateTo, ref, useProject, useRouter, watch } from '#imports'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 
@@ -11,7 +11,7 @@ function getPredicate(key: Partial<TabItem>) {
     (!('type' in key) || tab.type === key.type)
 }
 
-export const useTab = createSharedComposable(() => {
+export const useTabs = defineStore('tabStore', () => {
   const tabs = ref<TabItem[]>([])
 
   const router = useRouter()
@@ -20,8 +20,6 @@ export const useTab = createSharedComposable(() => {
 
   const projectStore = useProject()
 
-  const { bases, tables } = storeToRefs(projectStore)
-
   const projectType = $computed(() => route.params.projectType as string)
 
   const previousActiveTabIndex = ref(-1)
@@ -29,14 +27,14 @@ export const useTab = createSharedComposable(() => {
     get() {
       const routeName = route.name as string
 
-      if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value.length) {
+      if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && projectStore.tables.length) {
         const tab: TabItem = { type: route.params.type as TabType, title: route.params.title as string }
 
-        const currentTable = tables.value.find((t) => t.id === tab.title || t.title === tab.title)
+        const currentTable = projectStore.tables.find((t) => t.id === tab.title || t.title === tab.title)
 
         if (!currentTable) return -1
 
-        const currentBase = bases.value.find((b) => b.id === currentTable.base_id)
+        const currentBase = projectStore.bases.find((b) => b.id === currentTable.base_id)
 
         tab.id = currentTable.id
 
@@ -47,7 +45,7 @@ export const useTab = createSharedComposable(() => {
         tab.meta = currentTable.meta
 
         // append base alias to tab title if duplicate titles exist on other bases
-        if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+        if (projectStore.tables.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
           tab.title = `${tab.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
 
         if (index === -1) {
@@ -94,13 +92,13 @@ export const useTab = createSharedComposable(() => {
     }
     // if tab not found add it
     else {
-      const currentTable = tables.value.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
-      const currentBase = bases.value.find((b) => b.id === currentTable?.base_id)
+      const currentTable = projectStore.tables.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
+      const currentBase = projectStore.bases.find((b) => b.id === currentTable?.base_id)
 
       tabMeta.meta = currentTable?.meta
 
       // append base alias to tab title if duplicate titles exist on other bases
-      if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+      if (projectStore.tables.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
         tabMeta.title = `${tabMeta.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
 
       tabs.value = [...(tabs.value || []), tabMeta]