diff --git a/web/src/api/buster_socket/chats/chatRequests.ts b/web/src/api/buster_socket/chats/chatRequests.ts index 65568077d..36997da30 100644 --- a/web/src/api/buster_socket/chats/chatRequests.ts +++ b/web/src/api/buster_socket/chats/chatRequests.ts @@ -93,7 +93,7 @@ export type ChatDeleteChat = BusterSocketRequestBase< { /** The unique identifier of the chat to delete */ id: string; - } + }[] >; /** diff --git a/web/src/hooks/useSocketQueryNew/types.ts b/web/src/hooks/useSocketQueryNew/types.ts index 06332aa82..35f30bbd4 100644 --- a/web/src/hooks/useSocketQueryNew/types.ts +++ b/web/src/hooks/useSocketQueryNew/types.ts @@ -1,4 +1,10 @@ -import type { BusterSocketResponse, BusterSocketResponseRoute } from '@/api/buster_socket'; +import type { + BusterSocketRequest, + BusterSocketResponse, + BusterSocketResponseRoute +} from '@/api/buster_socket'; + +//RESPONSE TYPES export type BusterSocketResponseConfig = { route: TRoute; @@ -14,3 +20,16 @@ export type InferBusterSocketResponseData['callback'] extends (d: infer D) => void ? D : never; + +//REQUEST TYPES + +export type BusterSocketRequestRoute = BusterSocketRequest['route']; + +export type BusterSocketRequestConfig = { + route: TRoute; +}; + +export type InferBusterSocketRequestPayload = Extract< + BusterSocketRequest, + { route: TRoute } +>['payload']; diff --git a/web/src/hooks/useSocketQueryNew/useSocketMutation.tsx b/web/src/hooks/useSocketQueryNew/useSocketMutation.tsx new file mode 100644 index 000000000..70aabbea3 --- /dev/null +++ b/web/src/hooks/useSocketQueryNew/useSocketMutation.tsx @@ -0,0 +1,79 @@ +'use client'; + +import { + type QueryFunction, + type QueryKey, + type UseQueryOptions, + type UseMutationOptions, + useMutation, + useQueryClient +} from '@tanstack/react-query'; +import type { + BusterSocketRequest, + BusterSocketResponse, + BusterSocketResponseRoute +} from '@/api/buster_socket'; +import { useBusterWebSocket } from '@/context/BusterWebSocket'; +import { useMemoizedFn } from 'ahooks'; +import { queryOptionsConfig } from './queryKeyConfig'; +import type { + BusterSocketRequestConfig, + BusterSocketRequestRoute, + BusterSocketResponseConfig, + InferBusterSocketRequestPayload, + InferBusterSocketResponseData +} from './types'; + +export function useSocketMutation< + TRequestRoute extends BusterSocketRequestRoute, + TRoute extends BusterSocketResponseRoute, + TError = unknown, + TData = InferBusterSocketResponseData, + TPayload = InferBusterSocketRequestPayload +>( + socketRequest: BusterSocketRequestConfig, + socketResponse: BusterSocketResponseConfig, + options?: Omit, 'mutationFn'> +) { + const busterSocket = useBusterWebSocket(); + const queryClient = useQueryClient(); + + const mutationFn = useMemoizedFn(async (variables: TPayload): Promise => { + try { + const result = await busterSocket.emitAndOnce({ + emitEvent: { + route: socketRequest.route, + payload: variables + } as BusterSocketRequest, + responseEvent: { + route: socketResponse.route, + onError: socketResponse.onError, + callback: (d: unknown) => d + } as BusterSocketResponse + }); + + return result as TData; + } catch (error) { + throw error; + } + }); + + return useMutation({ + mutationFn, + ...options + }); +} + +const ExampleComponent = () => { + const { mutate } = useSocketMutation<'/chats/delete', '/chats/delete:deleteChat'>( + { route: '/chats/delete' }, + { route: '/chats/delete:deleteChat' }, + { + onSuccess: (data) => { + console.log(data); + } + } + ); + + mutate([{ id: '123' }]); +}; diff --git a/web/src/hooks/useSocketQueryNew/useSocketQueryEmitAndOnce.tsx b/web/src/hooks/useSocketQueryNew/useSocketQueryEmitAndOnce.tsx index b062e7779..ffb3bc56e 100644 --- a/web/src/hooks/useSocketQueryNew/useSocketQueryEmitAndOnce.tsx +++ b/web/src/hooks/useSocketQueryNew/useSocketQueryEmitAndOnce.tsx @@ -1,11 +1,11 @@ 'use client'; import { - QueryFunction, - QueryKey, + type QueryFunction, + type QueryKey, + type UseQueryOptions, useQuery, - useQueryClient, - UseQueryOptions + useQueryClient } from '@tanstack/react-query'; import type { BusterSocketRequest, @@ -13,16 +13,10 @@ import type { BusterSocketResponseRoute } from '@/api/buster_socket'; import { useBusterWebSocket } from '@/context/BusterWebSocket'; -import type { - UseBusterSocketQueryResult, - InferBusterSocketResponseData, - BusterSocketResponseConfig -} from '../useSocketQuery/types'; import { useMemoizedFn } from 'ahooks'; -import { createQueryKey } from '../useSocketQuery/helpers'; -import { useMemo } from 'react'; import { queryOptionsConfig } from './queryKeyConfig'; -import { BusterChat } from '@/api/asset_interfaces'; +import type { BusterChat } from '@/api/asset_interfaces'; +import { InferBusterSocketResponseData } from './types'; export function useSocketQueryEmitAndOnce< TRoute extends BusterSocketResponseRoute, @@ -34,34 +28,32 @@ export function useSocketQueryEmitAndOnce< socketResponse: TRoute, options: UseQueryOptions, callback?: (currentData: TData | null, newData: InferBusterSocketResponseData) => TData -): UseBusterSocketQueryResult { +) { const busterSocket = useBusterWebSocket(); const queryClient = useQueryClient(); - const queryFn: QueryFunction = useMemoizedFn( - async ({ queryKey, ...rest }): Promise => { - try { - const result = await busterSocket.emitAndOnce({ - emitEvent: socketRequest, - responseEvent: { - route: socketResponse, - callback: (d: unknown) => { - const socketData = d as InferBusterSocketResponseData; - if (callback) { - const currentData = queryClient.getQueryData(queryKey) ?? null; - return callback(currentData, socketData); - } - return socketData as TData; + const queryFn: QueryFunction = useMemoizedFn(async ({ queryKey }): Promise => { + try { + const result = await busterSocket.emitAndOnce({ + emitEvent: socketRequest, + responseEvent: { + route: socketResponse, + callback: (d: unknown) => { + const socketData = d as InferBusterSocketResponseData; + if (callback) { + const currentData = queryClient.getQueryData(queryKey) ?? null; + return callback(currentData, socketData); } - } as BusterSocketResponse - }); + return socketData as TData; + } + } as BusterSocketResponse + }); - return result as TData; - } catch (error) { - throw error; - } + return result as TData; + } catch (error) { + throw error; } - ); + }); return useQuery({ queryFn,