hossein-por-shop/frontend/composables/api/chat/useCreateChatMessage.ts

// imports

import { QueryClient, useMutation } from "@tanstack/vue-query";
import type { InfiniteData } from "@tanstack/vue-query";
import axios from "~/configs/axios.config";
import { API_ENDPOINTS, MUTATION_KEYS, QUERY_KEYS } from "~/constants";

// types

export type CreateChatMessageRequest = {
    productId: string | number;
    new_message: string;
};

export type CreateChatMessageResponse = Chat[]

// methods

export const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => {
    const { data } = await axios.post<CreateChatMessageResponse>(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables, {
        headers: {
            Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
        }
    });
    return data;
};

// composable

const useCreateChatMessage = (queryClient: QueryClient) => {
    return useMutation({
        mutationKey: [MUTATION_KEYS.create_chat],
        mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables),
        onMutate: (newMessage) => {
            const prevData = queryClient.getQueriesData({ queryKey: [QUERY_KEYS.chat] });

            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([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<InfiniteData<ApiPaginated<Chat>>>([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;