feat: common api client

encryptedge · Jan 3, 2024 · 00e9cbd · 00e9cbd
1 parent d9b69fb
commit 00e9cbd
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 70 deletions.
diff --git a/apps/web/src/libs/api.client.js b/apps/web/src/libs/api.client.js
@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+    baseURL: import.meta.env.VITE_API_URL,
+})
+
+export default {
+    get: apiClient.get,
+    post: apiClient.post,
+    put: apiClient.put,
+}
diff --git a/apps/web/src/pages/app.jsx b/apps/web/src/pages/app.jsx
@@ -1,11 +1,11 @@
 import '../App.css'
 import 'react-toastify/dist/ReactToastify.css';
 import Navbar from '../components/navbar';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Machines from "../components/machine"
 import Challenge from '../components/challenge';
 import { ToastContainer } from 'react-toastify';
+import apiClient from '../libs/api.client';
 
 function Player() {
     const token = localStorage.getItem('token');
@@ -16,7 +16,7 @@ function Player() {
     useEffect(() => {
         if(!token) return window.location.href = '/login';
 
-        axios.get(import.meta.env.VITE_API_URL + "/challenge/progress", {
+        apiClient.get("/challenge/progress", {
             headers: {
                 "Authorization": "Bearer " + token,
             }

diff --git a/apps/web/src/pages/leaderboard.jsx b/apps/web/src/pages/leaderboard.jsx
@@ -1,7 +1,8 @@
 import "../App.css";
 import "react-toastify/dist/ReactToastify.css";
 import { useEffect, useState } from "react";
-import axios from "axios";
+import apiClient from '../libs/api.client';
+import Navbar from "../components/navbar";
 
 function Leaderboard() {
   const [leaderboard, setLeaderboard] = useState([]);
@@ -11,18 +12,12 @@ function Leaderboard() {
 
     if (!token) return (window.location.href = "/login");
 
-    let config = {
-      method: "get",
-      maxBodyLength: Infinity,
-      url: import.meta.env.VITE_API_URL + "/stats/leaderboard",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: "Bearer " + token,
-      },
-    };
-
-    axios
-      .request(config)
+    apiClient
+      .get("/stats/leaderboard", {
+        headers: {
+          Authorization: "Bearer " + token,
+        }
+      })
       .then((response) => {
         if(!Array.isArray(response.data)) return window.location.href = '/login'
         setLeaderboard(response.data);
@@ -34,6 +29,7 @@ function Leaderboard() {
 
   return (
     <>
+      <Navbar />
       <div>
         <img src="/ee.png" className="logo react" alt="ee logo" />
       </div>

diff --git a/apps/web/src/pages/login.jsx b/apps/web/src/pages/login.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import axios from 'axios'
+import apiClient from '../libs/api.client';
 import { ToastContainer, toast } from 'react-toastify';
 import { Link } from "react-router-dom";
 
@@ -14,23 +14,16 @@ function Home() {
     let token = localStorage.getItem('token');
 
     const handleSubmit = (event) => {
-        event.preventDefault()
-        let data = JSON.stringify({
-            "email": email,
-            "password": password
-        });
+        event.preventDefault();
 
-        let config = {
-            method: 'post',
-            maxBodyLength: Infinity,
-            url: import.meta.env.VITE_API_URL + '/user/login',
-            headers: { 
-                'Content-Type': 'application/json'
-            },
-            data : data
-        };
-
-        axios.request(config)
+        apiClient.post("/user/login", {
+            email,
+            password
+        }, {
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
             .then((response) => {
                 if (response.data.message === 'Login successful') {
                     token = response.data.token;

diff --git a/apps/web/src/pages/register.jsx b/apps/web/src/pages/register.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import axios from 'axios'
+import apiClient from '../libs/api.client';
 import { ToastContainer, toast } from 'react-toastify';
 import { Link } from "react-router-dom";
 
@@ -14,24 +14,17 @@ function Home() {
 
     const handleSubmit = (event) => {
         event.preventDefault()
-        let data = JSON.stringify({
-            "email": email,
-            "password": password,
-            "firstName": firstName,
-            "lastName": lastName
-        });
-
-        let config = {
-            method: 'post',
-            maxBodyLength: Infinity,
-            url: import.meta.env.VITE_API_URL + '/user/register',
-            headers: { 
-                'Content-Type': 'application/json'
-            },
-            data : data
-        };
-
-        axios.request(config)
+
+        apiClient.post("/user/register", {
+            email,
+            password,
+            firstName,
+            lastName
+        }, {
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
             .then((response) => {
                 if (response.data.email === email) {
                     toast.success('Register Successful!', {

diff --git a/apps/web/src/pages/verify.jsx b/apps/web/src/pages/verify.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import axios from 'axios'
+import apiClient from '../libs/api.client';
 import { ToastContainer, toast } from 'react-toastify';
 
 import '../App.css'
@@ -10,21 +10,14 @@ function Home() {
 
     const handleSubmit = (event) => {
         event.preventDefault()
-        let data = JSON.stringify({
-            "otp": otp,
-        });
 
-        let config = {
-            method: 'post',
-            maxBodyLength: Infinity,
-            url: import.meta.env.VITE_API_URL + '/user/verify',
-            headers: { 
-                'Content-Type': 'application/json'
-            },
-            data : data
-        };
-
-        axios.request(config)
+        apiClient.post("/user/verify", {
+            otp
+        }, {
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
             .then((response) => {
                 if (response.data.message === 'User verified successfully') {
                     toast.success('Email Verified!', {

diff --git a/apps/web/src/pages/whoami.jsx b/apps/web/src/pages/whoami.jsx
@@ -1,7 +1,8 @@
 import '../App.css'
 import 'react-toastify/dist/ReactToastify.css';
 import { useState, useEffect } from 'react';
-import axios from 'axios';
+import apiClient from '../libs/api.client';
+import Navbar from "../components/navbar";
 
 function WhoAmI() {
     const [userWhoami, setUserWhoami] = useState(null);
@@ -13,7 +14,7 @@ function WhoAmI() {
 
         if(!token) return window.location.href = '/login';
 
-        axios.get(import.meta.env.VITE_API_URL + "/user/whoami", {
+        apiClient.get("/user/whoami", {
             headers: {
                 "Authorization": "Bearer " + token,
             }
@@ -24,7 +25,7 @@ function WhoAmI() {
             setUserWhoami(res.data);
         })
 
-        axios.get(import.meta.env.VITE_API_URL + "/team/whoami", {
+        apiClient.get("/team/whoami", {
             headers: {
                 "Authorization": "Bearer " + token,
             }
@@ -35,7 +36,7 @@ function WhoAmI() {
             setTeamWhoami(res.data);
         })
 
-        axios.get(import.meta.env.VITE_API_URL + "/stats/team", {
+        apiClient.get(import.meta.env.VITE_API_URL + "/stats/team", {
             headers: {
                 "Authorization": "Bearer " + token,
             }
@@ -48,6 +49,7 @@ function WhoAmI() {
 
     return (
         <>
+            <Navbar />
             <div>
                 <img src="/ee.png" className="logo react" alt="ee logo" />
             </div>