Updated

frontend/composables/api/auth/useOtp.ts

@@ -1,7 +1,6 @@
 // imports
 
 import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
 import { API_ENDPOINTS } from "~/constants";
 
 // types
@@ -10,16 +9,19 @@ export type OtpRequest = {
     phone: string;
 };
 
-// methods
-
-export const handleOtp = async (variables: OtpRequest) => {
-    const { data } = await axios.post(`${API_ENDPOINTS.account.send_otp}`, variables);
-    return data;
-};
-
-// composable
-
 const useOtp = () => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleOtp = async (variables: OtpRequest) => {
+        const { data } = await axios.post(`${API_ENDPOINTS.account.send_otp}`, variables);
+        return data;
+    };
+
     return useMutation({
         mutationFn: (variables: OtpRequest) => handleOtp(variables)
     });

frontend/composables/api/auth/useSignIn.ts

@@ -1,7 +1,6 @@
 // imports
 
 import { useMutation } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
 import { API_ENDPOINTS } from "~/constants";
 
 // types
@@ -11,16 +10,19 @@ export type SignInRequest = {
     phone: string;
 };
 
-// methods
-
-export const handleSignIn = async (variables: SignInRequest) => {
-    const { data } = await axios.post(`${API_ENDPOINTS.auth.signin}/`, variables);
-    return data;
-};
-
-// composable
-
 const useSignIn = () => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleSignIn = async (variables: SignInRequest) => {
+        const { data } = await axios.post(`${API_ENDPOINTS.auth.signin}/`, variables);
+        return data;
+    };
+
     return useMutation({
         mutationFn: (variables: SignInRequest) => handleSignIn(variables)
     });

frontend/composables/api/chat/useCreateChatMessage.ts

@@ -2,7 +2,6 @@
 
 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
@@ -14,20 +13,20 @@ export type CreateChatMessageRequest = {
 
 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) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // method
+
+    const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => {
+
+        const { data } = await axios.post<CreateChatMessageResponse>(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables);
+        return data;
+    };
+
     return useMutation({
         mutationKey: [MUTATION_KEYS.create_chat],
         mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables),

frontend/composables/api/chat/useGetChat.ts

@@ -1,39 +1,41 @@
 // imports
 
-import { useInfiniteQuery, useQuery } from "@tanstack/vue-query";
+import { useInfiniteQuery } from "@tanstack/vue-query";
-import axios from "~/configs/axios.config";
 import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
-import type { ComputedRef } from "vue";
 
 // types
 
 export type GetBranchResponse = ApiPaginated<Chat>;
 
-// methods
-
-export const handleGetChat = async ({ productId, limit, offset }: {
-    productId: number | string,
-    limit: number,
-    offset: number
-}) => {
-    const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.chat.messages}/${productId}`, {
-        params: {
-            offset,
-            limit
-        },
-        headers: {
-            Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
-        }
-    });
-    return data;
-};
-
-// composable
-
 const useGetBranch = (
-    productId: Ref<string | number>,
+    productId: string | number,
     enabled: Ref<boolean>
 ) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // method
+
+    const handleGetChat = async ({ productId, limit, offset }: {
+        productId: number | string,
+        limit: number,
+        offset: number
+    }) => {
+
+        const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.chat.messages}/${productId}`, {
+            params: {
+                offset,
+                limit
+            },
+            headers: {
+                Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
+            }
+        });
+        return data;
+    };
+
     return useInfiniteQuery({
         enabled,
         queryKey: [QUERY_KEYS.chat],
@@ -44,7 +46,7 @@ const useGetBranch = (
         queryFn: ({ pageParam }) => handleGetChat({
             limit: pageParam.limit,
             offset: pageParam.offset,
-            productId: productId.value
+            productId: productId
         }),
         getNextPageParam: (lastPage, pages) => {
             if (!lastPage.next) return undefined;