feat: remove pinia (#728)

twirapp · May 9, 2024 · 2246439 · 2246439
1 parent 65cc0bf
commit 2246439
Show file tree

Hide file tree

Showing 147 changed files with 3,965 additions and 4,052 deletions.
diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
@@ -44,7 +44,6 @@
     "lucide-vue-next": "0.368.0",
     "naive-ui": "2.38.1",
     "nested-css-to-flat": "1.0.5",
-    "pinia": "2.1.7",
     "plyr": "3.7.8",
     "radix-vue": "1.7.0",
     "tailwind-merge": "2.2.2",

diff --git a/frontend/dashboard/src/api/auth.ts b/frontend/dashboard/src/api/auth.ts
@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/vue-query'
 import { createRequest, useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useMutation } from '@/composables/use-mutation.js'
@@ -46,15 +46,15 @@ export const profileQuery = createRequest(graphql(`
 
 export const userInvalidateQueryKey = 'UserInvalidateQueryKey'
 
-export const useProfile = defineStore('auth/profile', () => {
+export const useProfile = createGlobalState(() => {
 	const { data: response, executeQuery, fetching } = useQuery({
 		query: profileQuery.query,
 		variables: {
 		},
 		context: {
 			key: profileQuery.key,
-			additionalTypenames: [userInvalidateQueryKey]
-		}
+			additionalTypenames: [userInvalidateQueryKey],
+		},
 	})
 
 	const computedUser = computed(() => {
@@ -75,7 +75,7 @@ export const useProfile = defineStore('auth/profile', () => {
 			selectedDashboardId: user.selectedDashboardId,
 			selectedDashboardTwitchUser: user.selectedDashboardTwitchUser,
 			hideOnLandingPage: user.hideOnLandingPage,
-			availableDashboards: user.availableDashboards
+			availableDashboards: user.availableDashboards,
 		}
 	})
 
@@ -96,11 +96,11 @@ export function useLogout() {
 	}
 
 	return {
-		execute
+		execute,
 	}
 }
 
-export const useUserSettings = defineStore('userSettings', () => {
+export const useUserSettings = createGlobalState(() => {
 	const userPublicSettingsInvalidateKey = 'UserPublicSettingsInvalidateKey'
 
 	const usePublicQuery = () => useQuery({
@@ -117,8 +117,8 @@ export const useUserSettings = defineStore('userSettings', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [userPublicSettingsInvalidateKey]
-		}
+			additionalTypenames: [userPublicSettingsInvalidateKey],
+		},
 	})
 
 	const usePublicMutation = () => useMutation(graphql(`
@@ -143,11 +143,11 @@ export const useUserSettings = defineStore('userSettings', () => {
 		usePublicQuery,
 		usePublicMutation,
 		useApiKeyGenerateMutation,
-		useUserUpdateMutation
+		useUserUpdateMutation,
 	}
 })
 
-export const useDashboard = defineStore('auth/dashboard', () => {
+export const useDashboard = createGlobalState(() => {
 	const urqlClient = useUrqlClient()
 
 	const mutationSetDashboard = useMutation(graphql(`
@@ -166,7 +166,7 @@ export const useDashboard = defineStore('auth/dashboard', () => {
 	}
 
 	return {
-		setDashboard
+		setDashboard,
 	}
 })
 
@@ -215,23 +215,23 @@ export const PERMISSIONS_FLAGS: Flag[] = [
 	{ perm: ChannelRolePermissionEnum.ManageAlerts, description: 'Can manage alerts' },
 	'delimiter',
 	{ perm: ChannelRolePermissionEnum.ViewGames, description: 'Can view games' },
-	{ perm: ChannelRolePermissionEnum.ManageGames, description: 'Can manage games' }
+	{ perm: ChannelRolePermissionEnum.ManageGames, description: 'Can manage games' },
 ]
 
 export function useUserAccessFlagChecker(flag: ChannelRolePermissionEnum) {
-	const profile = useProfile()
+	const { data: profile } = useProfile()
 
 	return computed(() => {
-		if (!profile.data?.availableDashboards || !profile.data?.selectedDashboardId) return false
+		if (!profile.value?.availableDashboards || !profile.value?.selectedDashboardId) return false
 
-		if (profile.data.id === profile.data.selectedDashboardId) {
+		if (profile.value.id === profile.value.selectedDashboardId) {
 			return true
 		}
 
-		if (profile.data.isBotAdmin) return true
+		if (profile.value.isBotAdmin) return true
 
-		const dashboard = profile.data?.availableDashboards.find(dashboard => {
-			return dashboard.id === profile.data?.selectedDashboardId
+		const dashboard = profile.value?.availableDashboards.find(dashboard => {
+			return dashboard.id === profile.value?.selectedDashboardId
 		})
 		if (!dashboard) return false
 

diff --git a/frontend/dashboard/src/api/chat-alerts.ts b/frontend/dashboard/src/api/chat-alerts.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 import { computed } from 'vue'
 
 import type { GetAllChatAlertsQuery } from '@/gql/graphql.js'
@@ -11,7 +11,7 @@ export type ChatAlerts = GetAllChatAlertsQuery['chatAlerts']
 
 const invalidationKey = 'ChatAlertsInvalidateKey'
 
-export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
+export const useChatAlertsApi = createGlobalState(() => {
 	const { data } = useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },
@@ -117,7 +117,7 @@ export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const chatAlerts = computed<ChatAlerts>(() => data.value?.chatAlerts)
@@ -132,6 +132,6 @@ export const useChatAlertsApi = defineStore('api/chat-alerts', () => {
 
 	return {
 		chatAlerts,
-		useMutationUpdateChatAlerts
+		useMutationUpdateChatAlerts,
 	}
 })
diff --git a/frontend/dashboard/src/api/commands/commands-groups.ts b/frontend/dashboard/src/api/commands/commands-groups.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { invalidationKey as commandsInvalidationKey } from './commands.js'
 
@@ -8,7 +8,7 @@ import { graphql } from '@/gql/gql.js'
 
 const invalidationKey = 'CommandsGroupsInvalidateKey'
 
-export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
+export const useCommandsGroupsApi = createGlobalState(() => {
 	const useQueryGroups = () => useQuery({
 		query: graphql(`
 			query GetAllCommandsGroups {
@@ -21,8 +21,8 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [invalidationKey]
-		}
+			additionalTypenames: [invalidationKey],
+		},
 	})
 
 	const useMutationDeleteGroup = () => useMutation(
@@ -31,7 +31,7 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsRemove(id: $id)
 			}
 		`),
-		[invalidationKey, commandsInvalidationKey]
+		[invalidationKey, commandsInvalidationKey],
 	)
 
 	const useMutationCreateGroup = () => useMutation(
@@ -40,7 +40,7 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsCreate(opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationUpdateGroup = () => useMutation(
@@ -49,13 +49,13 @@ export const useCommandsGroupsApi = defineStore('api/commands-groups', () => {
 				commandsGroupsUpdate(id: $id,opts: $opts)
 			}
 		`),
-		[invalidationKey, commandsInvalidationKey]
+		[invalidationKey, commandsInvalidationKey],
 	)
 
 	return {
 		useQueryGroups,
 		useMutationDeleteGroup,
 		useMutationCreateGroup,
-		useMutationUpdateGroup
+		useMutationUpdateGroup,
 	}
 })
diff --git a/frontend/dashboard/src/api/commands/commands.ts b/frontend/dashboard/src/api/commands/commands.ts
@@ -1,12 +1,12 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useMutation } from '@/composables/use-mutation.js'
 import { graphql } from '@/gql/gql.js'
 
 export const invalidationKey = 'CommandsInvalidateKey'
 
-export const useCommandsApi = defineStore('api/commands', () => {
+export const useCommandsApi = createGlobalState(() => {
 	const useQueryCommands = () => useQuery({
 		query: graphql(`
 			query GetAllCommands {
@@ -48,9 +48,9 @@ export const useCommandsApi = defineStore('api/commands', () => {
 			}
 		`),
 		context: {
-			additionalTypenames: [invalidationKey]
+			additionalTypenames: [invalidationKey],
 		},
-		variables: {}
+		variables: {},
 	})
 
 	const useMutationDeleteCommand = () => useMutation(
@@ -59,7 +59,7 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsRemove(id: $id)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationCreateCommand = () => useMutation(
@@ -68,7 +68,7 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsCreate(opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	const useMutationUpdateCommand = () => useMutation(
@@ -77,13 +77,13 @@ export const useCommandsApi = defineStore('api/commands', () => {
 				commandsUpdate(id: $id, opts: $opts)
 			}
 		`),
-		[invalidationKey]
+		[invalidationKey],
 	)
 
 	return {
 		useQueryCommands,
 		useMutationDeleteCommand,
 		useMutationCreateCommand,
-		useMutationUpdateCommand
+		useMutationUpdateCommand,
 	}
 })
diff --git a/frontend/dashboard/src/api/community-users.ts b/frontend/dashboard/src/api/community-users.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { CommunityUsersOpts, GetAllCommunityUsersQuery } from '@/gql/graphql.js'
 import type { Ref } from 'vue'
@@ -11,14 +11,14 @@ export type CommunityUser = GetAllCommunityUsersQuery['communityUsers']['users']
 
 const invalidationKey = 'CommunityInvalidateKey'
 
-export const useCommunityUsersApi = defineStore('api/community-users', () => {
+export const useCommunityUsersApi = createGlobalState(() => {
 	const useCommunityUsers = (variables: Ref<CommunityUsersOpts>) => useQuery({
 		context: {
-			additionalTypenames: [invalidationKey]
+			additionalTypenames: [invalidationKey],
 		},
 		get variables() {
 			return {
-				opts: variables.value
+				opts: variables.value,
 			}
 		},
 		query: graphql(`
@@ -39,7 +39,7 @@ export const useCommunityUsersApi = defineStore('api/community-users', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCommunityReset = () => useMutation(graphql(`
@@ -50,6 +50,6 @@ export const useCommunityUsersApi = defineStore('api/community-users', () => {
 
 	return {
 		useCommunityUsers,
-		useMutationCommunityReset
+		useMutationCommunityReset,
 	}
 })
diff --git a/frontend/dashboard/src/api/games/games.ts b/frontend/dashboard/src/api/games/games.ts
@@ -1,12 +1,12 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import { useMutation } from '@/composables/use-mutation'
 import { graphql } from '@/gql'
 
 const gamesInvalidationKey = 'gamesInvalidationKey'
 
-export const useGamesApi = defineStore('games/8ball', () => {
+export const useGamesApi = createGlobalState(() => {
 	const useGamesQuery = () => useQuery({
 		query: graphql(`
 			query Games {
@@ -42,8 +42,8 @@ export const useGamesApi = defineStore('games/8ball', () => {
 		`),
 		variables: {},
 		context: {
-			additionalTypenames: [gamesInvalidationKey]
-		}
+			additionalTypenames: [gamesInvalidationKey],
+		},
 	})
 
 	const useEightBallMutation = () => useMutation(
@@ -55,7 +55,7 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	const useDuelMutation = () => useMutation(
@@ -66,7 +66,7 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	const useRussianRouletteMutation = () => useMutation(
@@ -77,13 +77,13 @@ export const useGamesApi = defineStore('games/8ball', () => {
 				}
 			}
 		`),
-		[gamesInvalidationKey]
+		[gamesInvalidationKey],
 	)
 
 	return {
 		useGamesQuery,
 		useEightBallMutation,
 		useDuelMutation,
-		useRussianRouletteMutation
+		useRussianRouletteMutation,
 	}
 })
diff --git a/frontend/dashboard/src/api/greetings.ts b/frontend/dashboard/src/api/greetings.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@urql/vue'
-import { defineStore } from 'pinia'
+import { createGlobalState } from '@vueuse/core'
 
 import type { GetAllGreetingsQuery } from '@/gql/graphql.js'
 
@@ -10,7 +10,7 @@ export type Greetings = GetAllGreetingsQuery['greetings'][0]
 
 const invalidationKey = 'GreetingsInvalidateKey'
 
-export const useGreetingsApi = defineStore('api/greetings', () => {
+export const useGreetingsApi = createGlobalState(() => {
 	const useQueryGreetings = () => useQuery({
 		variables: {},
 		context: { additionalTypenames: [invalidationKey] },