From 02796743cb863fc0c72df03c34ec1a53c10ab5ae Mon Sep 17 00:00:00 2001 From: Mamalizz Date: Tue, 14 Jan 2025 20:47:44 +0330 Subject: [PATCH] added chat api composables again --- .../api/chat/useCreateChatMessage.ts | 115 ++++++++++++++++++ frontend/composables/api/chat/useGetChat.ts | 62 ++++++++++ 2 files changed, 177 insertions(+) create mode 100644 frontend/composables/api/chat/useCreateChatMessage.ts create mode 100644 frontend/composables/api/chat/useGetChat.ts diff --git a/frontend/composables/api/chat/useCreateChatMessage.ts b/frontend/composables/api/chat/useCreateChatMessage.ts new file mode 100644 index 0000000..87f5da6 --- /dev/null +++ b/frontend/composables/api/chat/useCreateChatMessage.ts @@ -0,0 +1,115 @@ +// imports + +import { QueryClient, useMutation } from "@tanstack/vue-query"; +import type { InfiniteData } from "@tanstack/vue-query"; +import { API_ENDPOINTS, MUTATION_KEYS, QUERY_KEYS } from "~/constants"; + +// types + +export type CreateChatMessageRequest = { + productId: string | number; + new_message: string; +}; + +export type CreateChatMessageResponse = Chat[] + +const useCreateChatMessage = (queryClient: QueryClient) => { + + // state + + const { $axios: axios } = useNuxtApp(); + + // method + + const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => { + + const { data } = await axios.post(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables); + return data; + }; + + return useMutation({ + mutationKey: [MUTATION_KEYS.create_chat], + mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables), + onMutate: (newMessage) => { + const prevData = queryClient.getQueriesData({ queryKey: [QUERY_KEYS.chat] }); + + queryClient.setQueryData>>([QUERY_KEYS.chat], (oldData) => { + const lastPage = oldData!.pages[oldData!.pages.length - 1]; + + return { + pages: [ + { + count: lastPage.count, + next: lastPage.next, + previous: lastPage.previous, + results: [ + { + id: Date.now(), + content: newMessage.new_message, + sender: "user" + } + ] + }, + ...oldData!.pages + ], + pageParams: [ + ...oldData!.pageParams, + { + limit: 10, + offset: 0 + } + ] + }; + }); + + + return { prevData: prevData ? prevData[0][1] : undefined }; + }, + onSuccess: (response) => { + + queryClient.setQueryData>>([QUERY_KEYS.chat], (oldData) => { + if (oldData) { + const lastPage = oldData!.pages[oldData!.pages.length - 1]; + + return { + pages: [ + { + count: lastPage.count, + next: lastPage.next, + previous: lastPage.previous, + results: { + ...response[0], + id: Date.now() + } + }, + ...oldData!.pages + ], + pageParams: [ + ...oldData!.pageParams, + { + limit: 10, + offset: 0 + } + ] + }; + } + + return oldData; + }); + + }, + onError: (err, newMessage, context) => { + if (context) { + queryClient.setQueryData( + [QUERY_KEYS.chat], + context.prevData + ); + } + }, + onSettled: (newMessage) => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.chat] }); + } + }); +}; + +export default useCreateChatMessage; diff --git a/frontend/composables/api/chat/useGetChat.ts b/frontend/composables/api/chat/useGetChat.ts new file mode 100644 index 0000000..32a6da1 --- /dev/null +++ b/frontend/composables/api/chat/useGetChat.ts @@ -0,0 +1,62 @@ +// imports + +import { useInfiniteQuery } from "@tanstack/vue-query"; +import { API_ENDPOINTS, QUERY_KEYS } from "~/constants"; + +// types + +export type GetBranchResponse = ApiPaginated; + +const useGetBranch = ( + productId: string | number, + enabled: Ref +) => { + + // state + + const { $axios: axios } = useNuxtApp(); + + // method + + const handleGetChat = async ({ productId, limit, offset }: { + productId: number | string, + limit: number, + offset: number + }) => { + + const { data } = await axios.get(`${API_ENDPOINTS.chat.messages}/${productId}`, { + params: { + offset, + limit + }, + headers: { + Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo` + } + }); + return data; + }; + + return useInfiniteQuery({ + enabled, + queryKey: [QUERY_KEYS.chat], + initialPageParam: { + limit: 10, + offset: 0 + }, + queryFn: ({ pageParam }) => handleGetChat({ + limit: pageParam.limit, + offset: pageParam.offset, + productId: productId + }), + getNextPageParam: (lastPage, pages) => { + if (!lastPage.next) return undefined; + + return { + limit: 10, + offset: pages.length * 10 + }; + } + }); +}; + +export default useGetBranch;