chore(gui-v2): correct usage of `useGlobal`

packages/nc-gui-v2/app.vue

@@ -5,23 +5,22 @@ import MdiDotsVertical from '~icons/mdi/dots-vertical'
 import MaterialSymbolsMenu from '~icons/material-symbols/menu'
 import MdiReload from '~icons/mdi/reload'
 import { navigateTo } from '#app'
+import { useGlobal } from '#imports'
 
-const { $state } = useNuxtApp()
+const state = useGlobal()
-
-const { isLoading } = useApi({ useGlobalInstance: true })
 
 const sidebar = ref<HTMLDivElement>()
 
-const email = computed(() => $state.user?.value?.email ?? '---')
+const email = computed(() => state.user.value?.email ?? '---')
 
 const signOut = () => {
-  $state.signOut()
+  state.signOut()
   navigateTo('/signin')
 }
 
 const sidebarCollapsed = computed({
-  get: () => !$state.sidebarOpen.value,
+  get: () => !state.sidebarOpen.value,
-  set: (val) => ($state.sidebarOpen.value = !val),
+  set: (val) => (state.sidebarOpen.value = !val),
 })
 
 const toggleSidebar = () => {
@@ -32,7 +31,7 @@ const toggleSidebar = () => {
 <template>
   <a-layout class="min-h-[100vh]">
     <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
-      <MaterialSymbolsMenu v-if="$state.signedIn.value" class="text-xl cursor-pointer" @click="toggleSidebar" />
+      <MaterialSymbolsMenu v-if="state.signedIn.value" class="text-xl cursor-pointer" @click="toggleSidebar" />
 
       <div class="flex-1" />
 
@@ -42,8 +41,9 @@ const toggleSidebar = () => {
           <span class="prose-xl">NocoDB</span>
         </div>
 
-        <div v-show="isLoading" class="text-gray-400 ml-3">
+        <div v-show="state.isLoading.value" class="text-gray-400 ml-3">
-          {{ $t('general.loading') }} <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+          {{ $t('general.loading') }}
+          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': state.isLoading.value }" />
         </div>
       </div>
 
@@ -52,7 +52,7 @@ const toggleSidebar = () => {
       <div class="flex justify-end gap-4">
         <general-language class="mr-3" />
 
-        <template v-if="$state.signedIn.value">
+        <template v-if="state.signedIn.value">
           <a-dropdown :trigger="['click']">
             <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />
 

packages/nc-gui-v2/composables/useApi/index.ts

@@ -32,7 +32,7 @@ interface UseApiProps<D = any> {
 }
 
 export function useApi<Data = any, RequestConfig = any>(props: UseApiProps<Data> = {}): UseApiReturn<Data, RequestConfig> {
-  const state = $(useGlobal())
+  const state = useGlobal()
 
   const isLoading = ref(false)
 
@@ -47,11 +47,11 @@ export function useApi<Data = any, RequestConfig = any>(props: UseApiProps<Data>
   const api = createApiInstance(props.apiOptions)
 
   function addRequest() {
-    state.runningRequests.push(state.runningRequests.length + 1)
+    state.runningRequests.value.push(state.runningRequests.value.length + 1)
   }
 
   function removeRequest() {
-    state.runningRequests.pop()
+    state.runningRequests.value.pop()
   }
 
   api.instance.interceptors.request.use(

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

@@ -4,14 +4,14 @@ import { navigateTo, useGlobal, useRoute, useRouter } from '#imports'
 const DbNotFoundMsg = 'Database config not found'
 
 export function addAxiosInterceptors(api: Api<any>) {
-  const state = $(useGlobal())
+  const state = useGlobal()
   const router = useRouter()
   const route = useRoute()
 
   api.instance.interceptors.request.use((config) => {
     config.headers['xc-gui'] = 'true'
 
-    if (state.token) config.headers['xc-auth'] = state.token
+    if (state.token.value) config.headers['xc-auth'] = state.token.value
 
     if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
       // config.headers['xc-preview'] = store.state.users.previewAs

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

@@ -18,7 +18,7 @@ export function useGlobalGetters(state: State): Getters {
   let loading = $ref(false)
   const isLoading = computed({
     get: () => state.runningRequests.value.length > 0 || loading,
-    set: (_loading) => (loading = _loading),
+    set: (_loading) => (loading = !_loading),
   })
 
   return { signedIn, isLoading }

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

@@ -63,7 +63,7 @@ export function useGlobalState(): State {
   })
 
   /** reactive token payload */
-  const { payload } = useJwt<JwtPayload & User>(token.value)
+  const { payload } = useJwt<JwtPayload & User>(token)
 
   /** is sidebar open */
   const sidebarOpen = ref(false)
@@ -76,6 +76,7 @@ export function useGlobalState(): State {
 
   return {
     ...toRefs(storage.value),
+    storage,
     token,
     jwtPayload: payload,
     sidebarOpen,

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

@@ -11,7 +11,8 @@ export interface StoredState {
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
-  token: WritableComputedRef<string>
+  storage: Ref<StoredState>
+  token: WritableComputedRef<StoredState['token']>
   jwtPayload: ComputedRef<(JwtPayload & User) | null>
   sidebarOpen: Ref<boolean>
   timestamp: Ref<number>

packages/nc-gui-v2/middleware/auth.global.ts

@@ -1,4 +1,5 @@
-import { defineNuxtRouteMiddleware, navigateTo, useNuxtApp } from '#app'
+import { defineNuxtRouteMiddleware, navigateTo } from '#app'
+import { useGlobal } from '#imports'
 
 /**
  * Global auth middleware
@@ -20,12 +21,13 @@ import { defineNuxtRouteMiddleware, navigateTo, useNuxtApp } from '#app'
  * ```
  */
 export default defineNuxtRouteMiddleware((to, from) => {
-  const { $state } = useNuxtApp()
+  const state = useGlobal()
 
   /** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
-  if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !$state.signedIn.value) {
+  if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
+    console.log('tosignin')
     return navigateTo('/signin')
-  } else if (to.meta.requiresAuth === false && $state.signedIn.value) {
+  } else if (to.meta.requiresAuth === false && state.signedIn.value) {
     /**
      * if user was turned away from non-auth page but also came from a non-auth page (e.g. user went to /signin and reloaded the page)
      * redirect to home page