refactoring front end API access

client/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tinymce/tinymce-react": "^4.2.0",
     "axios": "^1.2.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
@@ -18,6 +19,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@types/jwt-decode": "^3.1.0",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/uuid": "^8.3.4",

client/src/components/pages/Login.tsx

@@ -34,12 +34,6 @@ export default function Login() {
         if (user) navigate('/');
     }, [])
 
-    // useEffect(() => {
-    //     setForm(
-            
-    //     )
-    // }, [getFormState])
-
     useEffect(() => {
         console.log(input);
     }, [getFormState])

client/src/util/API.ts

@@ -0,0 +1,152 @@
+import { AxiosHeaders, AxiosRequestHeaders } from "axios";
+import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList } from "../schemas";
+import { default as _instance } from "./axiosInstance";
+
+export module API {
+    const APISTRING = import.meta.env.APISTRING || "http://localhost:8080";
+
+    abstract class RestController<T> {
+        protected instance = _instance;
+        protected endpoint: string;
+        protected token?: string;
+        protected headers?: any
+
+        constructor(endpoint: string, token?: string) {
+            this.endpoint = endpoint;
+            this.token = token;
+
+            if (token) {
+                this.headers = {
+                    "Content-Type": "application/json",
+                    "Authorization": ("Bearer " + token)
+                };
+            }
+        }
+
+        async getAll() {
+            if (!this.token) return null;
+
+            const response = await this.instance.get(this.endpoint, this.headers);
+            return Promise.resolve(response.data);
+        }
+
+        async getByID(id: string) {
+            if (!this.token) return null;
+
+            const response = await this.instance.get(this.endpoint + "/" + id, this.headers);
+            return Promise.resolve(response.data);
+        }
+
+        async postOne(data: T) {
+            if (!this.token) return null;
+
+            const response = await this.instance.post(this.endpoint, data, this.headers);
+            return Promise.resolve(response.data);
+        }
+
+        async put(id: string, data: T | Partial<T>) {
+            if (!this.token) return null;
+
+            const response = await this.instance.put(this.endpoint + "/" + id, data, this.headers);
+            return Promise.resolve(response.data);
+        }
+
+        async delete(id: string) {
+            if (!this.token) return null;
+
+            const response = await this.instance.delete(this.endpoint + '/' + id, this.headers);
+            return Promise.resolve(response.data);
+        }
+    }
+
+    export class Auth {
+        private instance = _instance;
+        private endpoint = APISTRING + "/auth";
+
+        async login(data: IUserAuth | Partial<IUser>) {
+            try {
+                const response = await this.instance.post(this.endpoint + "/login", data);
+                return Promise.resolve(response.data);
+            } catch (e: any) {
+                console.error(e);
+            }
+        }
+
+        async register(data: IUser) {
+            try {
+                const response = await this.instance.post(this.endpoint + "/register", data);
+                return Promise.resolve(response.data);
+            } catch (e: any) {
+                console.error(e);
+            }
+        }
+
+        async logout() {
+            try {
+                const response = await this.instance.delete(this.endpoint + '/logout');
+    
+                // unset cookie data and send response
+                document.cookie = `token=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+                return Promise.resolve(response.data);
+            } catch(err) {
+                console.error(err);
+            }
+        }
+
+        // for future use
+        async registerGoogle() {
+            return;
+        }
+
+        async loginGoogle() {
+            return;
+        }
+
+        async logoutGoogle() {
+            return;
+        }
+    }
+
+    export class User extends RestController<IUser> {
+        constructor() {
+            super(APISTRING + "/app/users");
+        }
+    }
+
+    export class Friendship extends RestController<IFriendship> {
+        constructor() {
+            super(APISTRING + "/app/friends");
+        }
+
+        async getPendingFriendRequests() {
+            if (!this.token) return null;
+
+            const response = await this.instance.get(this.endpoint + "?pending=true", this.headers);
+            return Promise.resolve(response.data);
+        }
+    }
+
+    export class Recipe extends RestController<IRecipe> {
+        constructor() {
+            super(APISTRING + "/app/recipes");
+        }
+    }
+
+    export class Ingredient extends RestController<IIngredient> {
+        constructor() {
+            super(APISTRING + "/app/ingredients");
+        }
+    }
+
+    export class Collection extends RestController<ICollection> {
+        constructor() {
+            super(APISTRING + "/app/collections");
+        }
+    }
+
+    export class GroceryList extends RestController<IGroceryList> {
+        constructor() {
+            super(APISTRING + "/app/grocery-list")
+        }
+    }
+}

client/src/util/apiUtils.tsx

@@ -1,5 +1,5 @@
 import { ICollection, IUser, IUserAuth } from "../schemas";
-// import { IAuthContext } from "../context/AuthContext";
+import instance from "./axiosInstance";
 import axios from "axios";
 const API = import.meta.env.APISTRING || "http://localhost:8080";
 

client/src/util/axiosInstance.ts

@@ -0,0 +1,24 @@
+import axios, { AxiosResponse } from 'axios'
+import jwt_decode from 'jwt-decode'
+
+const apiUrl = import.meta.env.VITE_APIURL;
+
+const instance = axios.create({
+    baseURL: apiUrl
+});
+
+instance.interceptors.response.use((res: AxiosResponse<any,any>) => {
+    if (res?.data.token) {
+        document.cookie = `token=${res.data.token}`;
+
+        return res;
+    } else {
+        console.error("Token was not found in response");
+
+        return res;
+    }
+}, (err) => {
+    return Promise.reject(err);
+})
+
+export default instance;