[PE-6064] Migrate authorized apps to tan-query

packages/common/src/api/index.ts

@@ -1,6 +1,5 @@
 // Audius query
 // TODO: migrate all of these to tan-query
-export * from './authorizedApps'
 export * from './library'
 export * from './suggestedTracks'
 export * from './trending'
@@ -23,7 +22,7 @@ export * from './tan-query/collection/useCollectionTracksWithUid'
 export * from './tan-query/collection/useFeaturedPlaylists'
 
 // Developer Apps
-export * from './tan-query/developer-apps/developerApps'
+export * from '../schemas/developerApps'
 export * from './tan-query/developer-apps/useDeveloperApps'
 export * from './tan-query/developer-apps/useAddDeveloperApp'
 export * from './tan-query/developer-apps/useEditDeveloperApp'
@@ -140,3 +139,7 @@ export * from './tan-query/wallets/useUSDCBalance'
 // Saga fetch utils, remove when migration is complete
 export * from './tan-query/saga-utils'
 export * from './tan-query/utils/defaultConfig'
+
+// New authorized-apps exports
+export * from './tan-query/authorized-apps/useAuthorizedApps'
+export * from './tan-query/authorized-apps/useRemoveAuthorizedApp'

packages/common/src/api/reducer.ts

@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux'
 
-import { authorizedAppsApiReducer } from './authorizedApps'
 import { favoritesApiReducer } from './favorites'
 import { libraryApiReducer } from './library'
 import { trendingApiReducer } from './trending'
 import { userApiReducer } from './user'
 
 export default combineReducers({
-  authorizedAppsApi: authorizedAppsApiReducer,
   favoritesApi: favoritesApiReducer,
   libraryApi: libraryApiReducer,
   trendingApi: trendingApiReducer,

packages/common/src/api/tan-query/authorized-apps/useRemoveAuthorizedApp.ts

@@ -1,49 +1,52 @@
-import { Id } from '@audius/sdk'
+import { AuthorizedApp, Id } from '@audius/sdk'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { cloneDeep } from 'lodash'
 
 import { useAudiusQueryContext } from '~/audius-query/AudiusQueryContext'
 import { ID } from '~/models'
 
-import { DeveloperApp } from '../developer-apps/developerApps'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
 
 export type UseRemoveAuthorizedAppArgs = {
-  apiKey: string
+  address: string
   userId: ID
 }
 
 export const getRemoveAuthorizedAppQueryKey = (userId: ID) => {
   return [QUERY_KEYS.authorizedApps, userId] as unknown as QueryKey<
-    DeveloperApp[]
+    AuthorizedApp[]
   >
 }
 
 export const useRemoveAuthorizedApp = () => {
   const { audiusSdk } = useAudiusQueryContext()
   const queryClient = useQueryClient()
+  const { data: currentUserId } = useCurrentUserId()
 
   return useMutation({
-    mutationFn: async (args: UseRemoveAuthorizedAppArgs) => {
-      const { apiKey, userId } = args
+    mutationFn: async (address: string) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       const sdk = await audiusSdk()
 
       await sdk.grants.revokeGrant({
-        userId: Id.parse(userId),
-        appApiKey: apiKey
+        userId: Id.parse(currentUserId),
+        appApiKey: address.slice(2)
       })
     },
-    onMutate: (args) => {
-      const { apiKey, userId } = args
-
+    onMutate: (address) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       queryClient.invalidateQueries({
-        queryKey: getRemoveAuthorizedAppQueryKey(userId)
+        queryKey: getRemoveAuthorizedAppQueryKey(currentUserId)
       })
 
-      const previousApps: DeveloperApp[] | undefined = queryClient.getQueryData(
-        getRemoveAuthorizedAppQueryKey(userId)
-      )
+      const previousApps: AuthorizedApp[] | undefined =
+        queryClient.getQueryData(getRemoveAuthorizedAppQueryKey(currentUserId))
 
       if (previousApps === undefined) {
         return {
@@ -52,17 +55,23 @@ export const useRemoveAuthorizedApp = () => {
       }
 
       // Splice out the removed app
-      const appIndex = previousApps?.findIndex((app) => app.apiKey === apiKey)
+      const appIndex = previousApps?.findIndex((app) => app.address === address)
       const newApps = cloneDeep(previousApps).splice(appIndex, 1)
 
-      queryClient.setQueryData(getRemoveAuthorizedAppQueryKey(userId), newApps)
+      queryClient.setQueryData(
+        getRemoveAuthorizedAppQueryKey(currentUserId),
+        newApps
+      )
 
       // Return context with the previous apps
       return { previousApps }
     },
-    onError: (_error, args, context) => {
+    onError: (_error, _address, context) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       queryClient.setQueryData(
-        getRemoveAuthorizedAppQueryKey(args.userId),
+        getRemoveAuthorizedAppQueryKey(currentUserId),
         context?.previousApps
       )
     }

packages/common/src/api/tan-query/developer-apps/useAddDeveloperApp.ts

@@ -2,18 +2,24 @@ import { Id } from '@audius/sdk'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useAudiusQueryContext } from '~/audius-query'
+import { DeveloperApp, NewAppPayload } from '~/schemas/developerApps'
+
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
 
-import { DeveloperApp, NewAppPayload } from './developerApps'
 import { getDeveloperAppsQueryKey } from './useDeveloperApps'
 
 export const useAddDeveloperApp = () => {
   const { audiusSdk } = useAudiusQueryContext()
   const queryClient = useQueryClient()
+  const { data: currentUserId } = useCurrentUserId()
 
   return useMutation({
     mutationFn: async (newApp: NewAppPayload) => {
-      const { name, description, imageUrl, userId } = newApp
-      const encodedUserId = Id.parse(userId)
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
+      const { name, description, imageUrl } = newApp
+      const encodedUserId = Id.parse(currentUserId)
       const sdk = await audiusSdk()
 
       const { apiKey, apiSecret } = await sdk.developerApps.createDeveloperApp({
@@ -30,17 +36,17 @@ export const useAddDeveloperApp = () => {
 
       return { name, description, imageUrl, apiKey, apiSecret }
     },
-    onSuccess: (newApp: DeveloperApp, newAppArgs: NewAppPayload) => {
-      const { userId } = newAppArgs
+    onSuccess: (newApp: DeveloperApp) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       const { apiSecret: apiSecretIgnored, ...restNewApp } = newApp
 
       queryClient.setQueryData(
-        getDeveloperAppsQueryKey(userId),
-        (oldData: { apps: DeveloperApp[] } | undefined) => {
-          if (!oldData) return { apps: [restNewApp] }
-          return {
-            apps: [...oldData.apps, restNewApp]
-          }
+        getDeveloperAppsQueryKey(currentUserId),
+        (oldData: DeveloperApp[] | undefined) => {
+          if (!oldData) return [restNewApp]
+          return [...oldData, restNewApp]
         }
       )
     }

packages/common/src/api/tan-query/developer-apps/useDeleteDeveloperApp.ts

@@ -2,36 +2,39 @@ import { Id } from '@audius/sdk'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useAudiusQueryContext } from '~/audius-query'
+import { DeveloperApp } from '~/schemas/developerApps'
+
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
 
-import { DeleteDeveloperAppArgs, DeveloperApp } from './developerApps'
 import { getDeveloperAppsQueryKey } from './useDeveloperApps'
 
 export const useDeleteDeveloperApp = () => {
   const { audiusSdk } = useAudiusQueryContext()
   const queryClient = useQueryClient()
+  const { data: currentUserId } = useCurrentUserId()
 
   return useMutation({
-    mutationFn: async (args: DeleteDeveloperAppArgs) => {
-      const { userId, apiKey } = args
-      const encodedUserId = Id.parse(userId)
+    mutationFn: async (apiKey: string) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       const sdk = await audiusSdk()
 
       await sdk.developerApps.deleteDeveloperApp({
-        userId: encodedUserId,
+        userId: Id.parse(currentUserId),
         appApiKey: apiKey
       })
       return {}
     },
-    onSuccess: (_response, args) => {
-      const { userId, apiKey } = args
-
+    onSuccess: (_response, apiKey) => {
+      if (!currentUserId) {
+        throw new Error('No current user ID')
+      }
       queryClient.setQueryData(
-        getDeveloperAppsQueryKey(userId),
-        (oldData: { apps: DeveloperApp[] } | undefined) => {
-          if (!oldData) return { apps: [] }
-          return {
-            apps: oldData.apps.filter((app) => app.apiKey !== apiKey)
-          }
+        getDeveloperAppsQueryKey(currentUserId),
+        (oldData: DeveloperApp[] | undefined) => {
+          if (!oldData) return []
+          return oldData.filter((app) => app.apiKey !== apiKey)
         }
       )
     }

packages/common/src/api/tan-query/developer-apps/useDeveloperApps.ts

@@ -3,22 +3,21 @@ import { useQuery } from '@tanstack/react-query'
 
 import { useAudiusQueryContext } from '~/audius-query'
 import { ID } from '~/models'
+import { DeveloperApp } from '~/schemas/developerApps'
 import { Nullable } from '~/utils/typeUtils'
 
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, SelectableQueryOptions } from '../types'
 
-import { DeveloperApp } from './developerApps'
-
 export const getDeveloperAppsQueryKey = (userId: Nullable<ID>) => {
-  return [QUERY_KEYS.developerApps, userId] as unknown as QueryKey<{
-    apps: DeveloperApp[]
-  }>
+  return [QUERY_KEYS.developerApps, userId] as unknown as QueryKey<
+    DeveloperApp[]
+  >
 }
 
-export const useDeveloperApps = <TResult = { apps: DeveloperApp[] }>(
+export const useDeveloperApps = <TResult = DeveloperApp[]>(
   userId: Nullable<ID>,
-  options?: SelectableQueryOptions<{ apps: DeveloperApp[] }, TResult>
+  options?: SelectableQueryOptions<DeveloperApp[], TResult>
 ) => {
   const { audiusSdk } = useAudiusQueryContext()
 
@@ -30,16 +29,14 @@ export const useDeveloperApps = <TResult = { apps: DeveloperApp[] }>(
         id: Id.parse(userId)
       })
 
-      return {
-        apps: data.map(
-          ({ address, name, description, imageUrl }): DeveloperApp => ({
-            name,
-            description,
-            imageUrl,
-            apiKey: address.slice(2)
-          })
-        )
-      }
+      return data.map(
+        ({ address, name, description, imageUrl }): DeveloperApp => ({
+          name,
+          description,
+          imageUrl,
+          apiKey: address.slice(2)
+        })
+      )
     },
     ...options,
     enabled: options?.enabled !== false && !!userId