refactor(gui-v2): add actions & getters to state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/app.vue

@@ -5,12 +5,11 @@ import MdiDotsVertical from '~icons/mdi/dots-vertical'
 import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
-const email = computed(() => $state.value.user?.email ?? '---')
+const email = computed(() => $state.user?.value?.email ?? '---')
 
-const signOut = () => {
+const signOut = async () => {
-  $state.value.token = undefined
+  $state.signOut()
-  $state.value.user = undefined
+  await navigateTo('/signin')
-  navigateTo('/signin')
 }
 </script>
 
@@ -46,7 +45,7 @@ const signOut = () => {
 
           <general-language class="mr-3" />
 
-          <template v-if="$state.token && $state.user">
+          <template v-if="$state.signedIn.value">
             <v-menu>
               <template #activator="{ props }">
                 <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />

packages/nc-gui-v2/components/general/Language.vue

@@ -11,7 +11,7 @@ const languages = $computed(() => {
   return availableLocales.sort()
 })
 
-const isRtlLang = $computed(() => ['fa'].includes($state.value.lang))
+const isRtlLang = $computed(() => ['fa'].includes($state.lang.value))
 
 function applyDirection() {
   const targetDirection = isRtlLang ? 'rtl' : 'ltr'
@@ -22,8 +22,9 @@ function applyDirection() {
 }
 
 function changeLanguage(lang: string) {
-  $state.value.lang = lang
+  $state.lang.value = lang
   locale.value = lang
+  applyDirection()
   $e('c:navbar:lang', { lang })
 }
 

packages/nc-gui-v2/composables/useGlobalState.ts

@@ -1,15 +1,28 @@
-import { createGlobalState, usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
-import type { GlobalState } from '~/lib/types'
+import { computed, toRefs } from '#build/imports'
+import type { GlobalState, State } from '~/lib/types'
 
 const storageKey = 'nocodb-gui-v2'
 
 /**
  * Global State is injected by state plugin, so manual initialization is unnecessary and should be avoided
  */
-export const useGlobalState = () => {
+export const useGlobalState = (): GlobalState => {
   const preferredLanguages = $(usePreferredLanguages())
   const darkMode = $(usePreferredDark())
-  return createGlobalState(() =>
+
-    useStorage<GlobalState>(storageKey, { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en', darkMode }),
+  const initialState = { token: undefined, user: undefined, lang: preferredLanguages[0] || 'en', darkMode }
-  )
+
+  const storage = useStorage<State>(storageKey, initialState)
+
+  // getters
+  const signedIn = computed(() => storage.value.token !== undefined && storage.value.user !== undefined)
+
+  // actions
+  function signOut() {
+    storage.value.token = undefined
+    storage.value.user = undefined
+  }
+
+  return { ...toRefs(storage.value), signedIn, signOut }
 }

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

@@ -1,4 +1,6 @@
-export interface GlobalState {
+import type { ComputedRef, ToRefs } from 'vue'
+
+export interface State {
   token?: string
   user?: {
     email?: string
@@ -6,3 +8,13 @@ export interface GlobalState {
   lang: string
   darkMode: boolean
 }
+
+export interface Getters {
+  signedIn: ComputedRef<boolean>
+}
+
+export interface Actions {
+  signOut: () => void
+}
+
+export type GlobalState = Getters & Actions & ToRefs<State>

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

@@ -11,6 +11,6 @@ declare module '#app/nuxt' {
     }
     // tele.emit
     $e: (event: string, data?: any) => void
-    $state: RemovableRef<GlobalState>
+    $state: GlobalState
   }
 }

packages/nc-gui-v2/plugins/i18n.ts

@@ -49,31 +49,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   })
 
   ;(nuxtApp.vueApp as any).i18n = i18n
+
   nuxtApp.vueApp.use(i18n)
 })
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- * @author Sebastien Gellet <sebastien.gellet@gmail.com>
- * @author Alejandro Moreno <info@pixplix.com>
- * @author Bruno Moreira <arq.bruno.moreira@gmail.com>
-
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */

packages/nc-gui-v2/plugins/state.ts

@@ -2,11 +2,10 @@ import { defineNuxtPlugin } from '#app'
 import { useGlobalState } from '~/composables/useGlobalState'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const createGlobalState = useGlobalState()
+  const storage = useGlobalState()
-  const globalState = createGlobalState()
 
   // set initial app language to the first preferred language (found in state)
-  ;(nuxtApp.vueApp as any).i18n.global.locale.value = globalState.value.lang
+  ;(nuxtApp.vueApp as any).i18n.global.locale.value = storage.lang.value
 
-  nuxtApp.provide('state', globalState)
+  nuxtApp.provide('state', storage)
 })