From f47319a2cab202292110c6614a9973ad5f890b5b Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 29 Jul 2022 12:09:35 +0200 Subject: [PATCH] refactor(gui-v2): move useGlobal types to useGlobal dir --- .../composables/useGlobal/actions.ts | 17 +++++----- .../composables/useGlobal/getters.ts | 11 +++---- .../nc-gui-v2/composables/useGlobal/state.ts | 26 +++++++-------- .../nc-gui-v2/composables/useGlobal/types.ts | 32 +++++++++++++++++++ packages/nc-gui-v2/lib/types.ts | 26 --------------- packages/nc-gui-v2/nuxt-shim.d.ts | 7 ++-- 6 files changed, 60 insertions(+), 59 deletions(-) create mode 100644 packages/nc-gui-v2/composables/useGlobal/types.ts diff --git a/packages/nc-gui-v2/composables/useGlobal/actions.ts b/packages/nc-gui-v2/composables/useGlobal/actions.ts index fbbc0ac019..46d2eea964 100644 --- a/packages/nc-gui-v2/composables/useGlobal/actions.ts +++ b/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 } from '~/lib' +import type { Actions, State } from './types' 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, - email: state.payload.value.email, - firstname: state.payload.value.firstname, - lastname: state.payload.value.lastname, - roles: state.payload.value.roles, + id: state.jwtPayload.value.id, + email: state.jwtPayload.value.email, + firstname: state.jwtPayload.value.firstname, + lastname: state.jwtPayload.value.lastname, + roles: state.jwtPayload.value.roles, } } } diff --git a/packages/nc-gui-v2/composables/useGlobal/getters.ts b/packages/nc-gui-v2/composables/useGlobal/getters.ts index 057c9b831a..fcccaa775f 100644 --- a/packages/nc-gui-v2/composables/useGlobal/getters.ts +++ b/packages/nc-gui-v2/composables/useGlobal/getters.ts @@ -1,8 +1,7 @@ -import type { UseGlobalStateReturn } from './state' -import type { Getters } from '~/lib' +import type { Getters, State } from './types' 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.payload.value.exp && - state.payload.value.exp > state.timestamp.value / 1000 + state.jwtPayload.value && + state.jwtPayload.value.exp && + state.jwtPayload.value.exp > state.timestamp.value / 1000 ), ) diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts index b546afb5f5..34f8f74c39 100644 --- a/packages/nc-gui-v2/composables/useGlobal/state.ts +++ b/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 { WritableComputedRef } from '@vue/reactivity' +import type { State, StoredState } from './types' 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 & { - token: WritableComputedRef - payload: ComputedRef<(JwtPayload & User) | null> - sidebarOpen: Ref - timestamp: Ref -} - -export function useGlobalState(): UseGlobalStateReturn { +export function useGlobalState(): State { /** 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 */ - const timestamp = useTimestamp({ immediate: true, interval: 100 }) + /** global loading state */ + const isLoading = ref(false) return { - ...(toRefs(storage) as any), + ...toRefs(storage.value), token, - payload, + jwtPayload: payload, sidebarOpen, timestamp, + isLoading, } } diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts new file mode 100644 index 0000000000..9672f7b14a --- /dev/null +++ b/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 & { + token: WritableComputedRef + jwtPayload: ComputedRef<(JwtPayload & User) | null> + sidebarOpen: Ref + timestamp: Ref + isLoading: Ref +} + +export interface Getters { + signedIn: ComputedRef +} + +export interface Actions { + signOut: () => void + signIn: (token: string) => void +} + +export type ReadonlyState = Readonly> & Omit + +export type GlobalState = Getters & Actions & ReadonlyState diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts index 0691490864..72182b80d6 100644 --- a/packages/nc-gui-v2/lib/types.ts +++ b/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 -} - -export interface Actions { - signOut: () => void - signIn: (token: string) => void -} - -export type ReadonlyState = Readonly> & Omit - -export type GlobalState = Getters & Actions & ToRefs - export type Roles = Record diff --git a/packages/nc-gui-v2/nuxt-shim.d.ts b/packages/nc-gui-v2/nuxt-shim.d.ts index e828030d4c..4733f7f3e0 100644 --- a/packages/nc-gui-v2/nuxt-shim.d.ts +++ b/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 { GlobalState } from './src/lib/types' +import type { I18n } from 'vue-i18n' +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 extends Promise ? Return : never + i18n: I18n['global'] } }