Updated

frontend/composables/api/auth/useOtp.ts

@@ -13,7 +13,7 @@ export type OtpRequest = {
 // methods
 
 export const handleOtp = async (variables: OtpRequest) => {
-    const { data } = await axios.post<OtpRequest>(`${API_ENDPOINTS.account.send_otp}`, variables);
+    const { data } = await axios.post(`${API_ENDPOINTS.account.send_otp}`, variables);
     return data;
 };
 

frontend/composables/api/auth/useSignIn.ts

@@ -14,7 +14,7 @@ export type SignInRequest = {
 // methods
 
 export const handleSignIn = async (variables: SignInRequest) => {
-    const { data } = await axios.post<SignInRequest>(`${API_ENDPOINTS.auth.signin}/`, variables);
+    const { data } = await axios.post(`${API_ENDPOINTS.auth.signin}/`, variables);
     return data;
 };
 

frontend/composables/api/chat/useCreateChatMessage.ts

@@ -0,0 +1,116 @@
+// 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;

frontend/composables/useImageColor.ts

@@ -0,0 +1,32 @@
+import type { FastAverageColorResult } from "fast-average-color";
+import { FastAverageColor } from "fast-average-color";
+
+export const useImageColor = (img: string) => {
+    const fac = new FastAverageColor();
+    const colorObject = ref<FastAverageColorResult>();
+    const isPending = ref(false);
+
+    const extractImageColor = async () => {
+        isPending.value = true;
+
+        const imageEl = document.querySelector(img) as HTMLImageElement;
+
+        try {
+            const color = await fac.getColorAsync(imageEl);
+            isPending.value = false;
+            colorObject.value = color;
+        } catch (e) {
+            isPending.value = false;
+        }
+    };
+
+    onMounted(() => {
+        extractImageColor();
+    });
+
+    return {
+        colorObject,
+        extractImageColor,
+        isPending
+    };
+};

frontend/composables/useToast.ts

@@ -1,23 +1,22 @@
+export type ToastOptions = {
+    description?: string;
+    duration?: number;
+    status?: "success" | "error" | "info" | "warning",
+}
+
 type Toast = {
     id: number;
     message: string;
-    description?: string;
-    duration?: number;
-}
-
-type Props = {
-    message: string,
-    description?: string,
-    options?: Omit<Toast, "id" | "message">
+    options?: ToastOptions
 }
 
 const toasts = ref<Toast[]>([]);
 
 export function useToast() {
-    const addToast = ({ message, description, options = {} }: Props) => {
+    const addToast = ({ message, options = {} }: Omit<Toast, "id">) => {
         const id = Date.now();
 
-        toasts.value.push({ id, message, description, ...options });
+        toasts.value.push({ id, message, options });
     };
 
     const destroyToast = (id: number) => {