feat(axios): configured axios

package.json

@@ -10,6 +10,7 @@
     "@mui/material": "^5.5.0",
     "@redux-saga/core": "^1.1.3",
     "@reduxjs/toolkit": "^1.8.0",
+    "axios": "^0.26.1",
     "history": "^5.3.0",
     "i18next": "^21.6.14",
     "react": "^17.0.2",

src/features/posts/api/index.ts

@@ -1,30 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Env } from 'config/Env'
 import { Post } from 'features/posts/types'
+import makeApi from "libs/core/configureAxios";
 
-const POSTS_BASE_URL = `${Env.API_BASE_URL}/posts`
+const api = makeApi(`${Env.API_BASE_URL}`);
 
-export const getPosts = async (): Promise<Post[]> => fetch(POSTS_BASE_URL).then(res => res.json())
+const POSTS_BASE_URL = `/posts`
 
-export const createPost = async (post: Post): Promise<Post> =>
-  fetch(POSTS_BASE_URL, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(post),
-  }).then(res => res.json())
+export const getPosts = (): Promise<Post[]> => api.get(POSTS_BASE_URL)
 
-export const updatePost = async (post: Post): Promise<Post> =>
-  fetch(`${POSTS_BASE_URL}/${post.id}`, {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(post),
-  }).then(res => res.json())
+export const createPost = (post: Post): Promise<Post> => api.post(POSTS_BASE_URL, post);
 
-export const deletePost = async (post: Post): Promise<Post> =>
-  fetch(`${POSTS_BASE_URL}/${post.id}`, {
-    method: 'DELETE',
-  }).then(() => post)
+export const updatePost = (post: Post): Promise<Post> => api.put(`${POSTS_BASE_URL}/${post.id}`, post)
+
+export const deletePost =  (post: Post): Promise<Post> => api.delete(`${POSTS_BASE_URL}/${post.id}`, { data: post})

src/libs/core/configureAxios.ts

@@ -0,0 +1,30 @@
+import axios from 'axios'
+
+
+export default function makeApi(baseURL: string) {
+  const api = axios.create({
+    baseURL,
+  })
+
+  api.defaults.headers.post['Content-Type'] = "application/json";
+  api.defaults.headers.put['Content-Type'] = "application/json";
+  api.defaults.headers.delete['Content-Type'] = "application/json";
+
+  api.interceptors.request.use(
+    (config) => {
+
+      if(localStorage.getItem('authToken')) {
+        config.headers = {...config.headers, Authorization: `Bearer ${localStorage.getItem('authToken')}`}
+      }
+
+      return config;
+    },
+    (error) => Promise.reject(error)
+  )
+
+  api.interceptors.response.use(
+    (response) => response.data, // return data object
+    (error) => Promise.reject(error)
+  )
+  return api
+}

yarn.lock

@@ -5078,6 +5078,13 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -8553,7 +8560,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==