use axios for client side requests

api/API.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const config = {
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  headers: {
+    "X-Requested-With": "XMLHttpRequest",
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+};
+
+const API = axios.create(config);
+
+export default API;

package.json

@@ -21,6 +21,7 @@
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "axios": "^1.3.4",
     "cookies-next": "^2.1.1",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",

pages/signIn.tsx

@@ -1,3 +1,4 @@
+import API from "@/api/API";
 import { type IPage } from "@/models/AppModel";
 import {
   Button,
@@ -44,14 +45,7 @@ const SignInPage: IPage = () => {
       console.error("API_URL not found");
       return;
     }
-    fetch(`${API_URL}/signIn`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(values),
-    })
-      .then(async (response) => await response.json())
+    API.post("/signIn", JSON.stringify(values))
       .then(() => {
         reload();
       })

pages/signUp.tsx

@@ -12,6 +12,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useForm, isEmail, hasLength } from "@mantine/form";
+import API from "@/api/API";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
@@ -47,16 +48,9 @@ const SignUpPage: IPage = () => {
       console.error("API_URL not found");
       return;
     }
-    fetch(`${API_URL}/signUp`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(values),
-    })
-      .then(async (response) => await response.json())
-      .then(({ user }) => {
-        setUser(user);
+    API.post("/signUp", JSON.stringify(values))
+      .then(({ data }) => {
+        setUser(data.user);
       })
       .catch((error) => {
         // TODO: add error notifications