refactor(gui-v2): move useGlobal types to useGlobal dir

packages/nc-gui-v2/composables/useGlobal/actions.ts

@@ -1,9 +1,8 @@
 import { notification } from 'ant-design-vue'
-import type { UseGlobalStateReturn } from './state'
+import type { Actions, State } from './types'
-import type { Actions } from '~/lib'
 import { useNuxtApp } from '#imports'
 
-export function useGlobalActions(state: UseGlobalStateReturn) {
+export function useGlobalActions(state: State) {
   const { $api } = useNuxtApp()
 
   /** Actions */
@@ -17,13 +16,13 @@ export function useGlobalActions(state: UseGlobalStateReturn) {
   const signIn: Actions['signIn'] = async (newToken) => {
     state.token.value = newToken
 
-    if (state.payload.value) {
+    if (state.jwtPayload.value) {
       state.user.value = {
-        id: state.payload.value.id,
+        id: state.jwtPayload.value.id,
-        email: state.payload.value.email,
+        email: state.jwtPayload.value.email,
-        firstname: state.payload.value.firstname,
+        firstname: state.jwtPayload.value.firstname,
-        lastname: state.payload.value.lastname,
+        lastname: state.jwtPayload.value.lastname,
-        roles: state.payload.value.roles,
+        roles: state.jwtPayload.value.roles,
       }
     }
   }

packages/nc-gui-v2/composables/useGlobal/getters.ts

@@ -1,8 +1,7 @@
-import type { UseGlobalStateReturn } from './state'
+import type { Getters, State } from './types'
-import type { Getters } from '~/lib'
 import { computed } from '#imports'
 
-export function useGlobalGetters(state: UseGlobalStateReturn) {
+export function useGlobalGetters(state: State) {
   /** Getters */
   /** Verify that a user is signed in by checking if token exists and is not expired */
   const signedIn: Getters['signedIn'] = computed(
@@ -10,9 +9,9 @@ export function useGlobalGetters(state: UseGlobalStateReturn) {
       !!(
         !!state.token &&
         state.token.value !== '' &&
-        state.payload.value &&
+        state.jwtPayload.value &&
-        state.payload.value.exp &&
+        state.jwtPayload.value.exp &&
-        state.payload.value.exp > state.timestamp.value / 1000
+        state.jwtPayload.value.exp > state.timestamp.value / 1000
       ),
   )
 

packages/nc-gui-v2/composables/useGlobal/state.ts

@@ -1,27 +1,22 @@
 import { usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import type { ComputedRef, Ref, ToRefs } from 'vue'
+import type { State, StoredState } from './types'
-import type { WritableComputedRef } from '@vue/reactivity'
 import { computed, ref, toRefs, useNuxtApp, useTimestamp } from '#imports'
-import type { StoredState, User } from '~/lib'
+import type { User } from '~/lib'
 
 const storageKey = 'nocodb-gui-v2'
 
-export type UseGlobalStateReturn = ToRefs<StoredState> & {
+export function useGlobalState(): State {
-  token: WritableComputedRef<string | null>
-  payload: ComputedRef<(JwtPayload & User) | null>
-  sidebarOpen: Ref<boolean>
-  timestamp: Ref<number>
-}
-
-export function useGlobalState(): UseGlobalStateReturn {
   /** get the preferred languages of a user, according to browser settings */
   const preferredLanguages = $(usePreferredLanguages())
   /** todo: reimplement; get the preferred dark mode setting, according to browser settings */
   //   const prefersDarkMode = $(usePreferredDark())
   const prefersDarkMode = false
 
+  /** reactive timestamp to check token expiry against */
+  const timestamp = useTimestamp({ immediate: true, interval: 100 })
+
   const {
     vueApp: { i18n },
   } = useNuxtApp()
@@ -73,14 +68,15 @@ export function useGlobalState(): UseGlobalStateReturn {
   /** is sidebar open */
   const sidebarOpen = ref(false)
 
-  /** reactive timestamp to check token expiry against */
+  /** global loading state */
-  const timestamp = useTimestamp({ immediate: true, interval: 100 })
+  const isLoading = ref(false)
 
   return {
-    ...(toRefs(storage) as any),
+    ...toRefs(storage.value),
     token,
-    payload,
+    jwtPayload: payload,
     sidebarOpen,
     timestamp,
+    isLoading,
   }
 }

packages/nc-gui-v2/composables/useGlobal/types.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref, ToRefs } from 'vue'
+import type { WritableComputedRef } from '@vue/reactivity'
+import type { JwtPayload } from 'jwt-decode'
+import type { User } from '~/lib'
+
+export interface StoredState {
+  token: string | null
+  user: User | null
+  lang: string
+  darkMode: boolean
+}
+
+export type State = ToRefs<StoredState> & {
+  token: WritableComputedRef<string | null>
+  jwtPayload: ComputedRef<(JwtPayload & User) | null>
+  sidebarOpen: Ref<boolean>
+  timestamp: Ref<number>
+  isLoading: Ref<boolean>
+}
+
+export interface Getters {
+  signedIn: ComputedRef<boolean>
+}
+
+export interface Actions {
+  signOut: () => void
+  signIn: (token: string) => void
+}
+
+export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>
+
+export type GlobalState = Getters & Actions & ReadonlyState

packages/nc-gui-v2/lib/types.ts

@@ -1,4 +1,3 @@
-import type { ComputedRef, ToRefs } from 'vue'
 import type { Role } from './enums'
 
 export interface User {
@@ -16,29 +15,4 @@ export interface FeedbackForm {
   lastFormPollDate?: string
 }
 
-export interface StoredState {
-  token: string | null
-  user: User | null
-  lang: string
-  darkMode: boolean
-  feedbackForm: FeedbackForm
-}
-
-export interface State extends StoredState {
-  sidebarOpen: boolean
-}
-
-export interface Getters {
-  signedIn: ComputedRef<boolean>
-}
-
-export interface Actions {
-  signOut: () => void
-  signIn: (token: string) => void
-}
-
-export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>
-
-export type GlobalState = Getters & Actions & ToRefs<ReadonlyState>
-
 export type Roles = Record<Role, boolean>

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

@@ -1,6 +1,7 @@
 import type { Api as BaseAPI } from 'nocodb-sdk'
-import type { createI18nPlugin } from 'src/plugins/i18n'
+import type { I18n } from 'vue-i18n'
-import type { GlobalState } from './src/lib/types'
+import type { GlobalState } from './composables/useGlobal/types'
+
 import type en from './lang/en.json'
 
 type MessageSchema = typeof en
@@ -20,6 +21,6 @@ declare module '#app/nuxt' {
 
 declare module '@vue/runtime-core' {
   interface App {
-    i18n: ReturnType<typeof createI18nPlugin> extends Promise<infer Return> ? Return : never
+    i18n: I18n<MessageSchema, unknown, unknown, false>['global']
   }
 }