Removed axios and use custom useFetch

frontend/composables/axios.ts

@@ -1,8 +0,0 @@
-import axios from 'axios'
-
-const request = axios.create({
-    baseURL: 'http://localhost:8080',
-    withCredentials: true,
-})
-
-export { request }

frontend/composables/fetch.ts

@@ -0,0 +1,25 @@
+import type { UseFetchOptions } from 'nuxt/app'
+
+const useCustomFetch = async <T>(
+    path: string,
+    options: UseFetchOptions<T> = {}
+) => {
+    let headers: any = {}
+    const token = useCookie('XSRF-TOKEN')
+
+    if (token.value) {
+        headers['X-XSRF-TOKEN'] = token.value as string
+    }
+
+    return useFetch('http://localhost:8080' + path, {
+        credentials: 'include',
+        watch: false,
+        ...options,
+        headers: {
+            ...headers,
+            ...options?.headers,
+        },
+    })
+}
+
+export { useCustomFetch }

frontend/composables/post.ts

@@ -33,7 +33,10 @@ const createNewPost = async (data: unknown) => {
 
     if (!parsedNewPost.success) return
 
-    const res = await request.post('/api/posts', parsedNewPost.data)
+    const { data: post } = await useCustomFetch('/api/posts', {
+        method: 'POST',
+        body: parsedNewPost.data,
+    })
 
     await fetchPosts()
 }
@@ -51,11 +54,11 @@ const fetchPosts = async (refresh: Boolean = false) => {
             ? posts.value[posts.value.length - 1].sequence
             : 0
 
-    const data = await request.get('/api/posts', {
+    const { data } = await useCustomFetch('/api/posts', {
         params: { lastPost: lastPost },
     })
 
-    const response = responseValidator.safeParse(data.data)
+    const response = responseValidator.safeParse(data.value)
 
     if (!response.success) return
 
@@ -63,10 +66,10 @@ const fetchPosts = async (refresh: Boolean = false) => {
 }
 
 export {
+    createNewPost,
+    fetchPosts,
     parsePost,
     parsePosts,
     PostValidator,
-    createNewPost,
     usePosts,
-    fetchPosts,
 }

frontend/composables/user.ts

@@ -17,8 +17,8 @@ const userLogin = async (email: String, password: String) => {
 
     if (!user.success) return user.error.format()
 
-    await request.get('/sanctum/csrf-cookie')
+    await useCustomFetch('/sanctum/csrf-cookie')
-    await request.post('/login', user.data)
+    await useCustomFetch('/login', { method: 'POST', body: user.data })
 
     await getUser()
 }
@@ -35,29 +35,26 @@ const userSignup = async (data: unknown) => {
 
     if (!newUser.success) return newUser.error.format()
 
-    await request.post('/register', newUser.data)
+    await useCustomFetch('/register', { method: 'POST', body: newUser.data })
 
     await getUser()
 }
 
 const getUser = async () => {
-    await request
+    const { data, error } = await useCustomFetch('/api/user')
-        .get('/api/user')
+
-        .then(({ data }) => {
+    if (error.value) return
-            const parsed = loggedInUserSchema.safeParse(data)
+
+    const parsed = loggedInUserSchema.safeParse(data.value)
     if (!parsed.success) return
     useUser().value = parsed.data.name
-        })
-        .catch((error) => {
-            console.log(error)
-        })
 }
 
 const userLogout = async () => {
-    await request.post('/logout')
+    await useCustomFetch('/logout', { method: 'POST' })
     useUser().value = ''
 }
 
 const useUser = () => useState<String>('user', () => '')
 
-export { userLogin, useUser, getUser, userLogout, userSignup }
+export { getUser, userLogin, userLogout, userSignup, useUser }