Updated axios request object, added minio

ui/docker-compose.yml

@@ -9,7 +9,7 @@ services:
     environment:
       - NODE_ENV=${NODE_ENV:-development}
     ports:
-      - ${UI_PORT:-8080}:3000
+      - ${UI_PORT:-3000}:3000
     build:
       context: ./
       target: dev

ui/src/api/auth.ts

@@ -2,7 +2,7 @@ import { getRequest, postRequest } from '.';
 import { RegisterUser, ResponseAuth } from './auth.types';
 
 export async function login(email: string, password: string): Promise<ResponseAuth | undefined> {
-  const response = await postRequest('auth/login', { email, password }, { withCredentials: true });
+  const response = await postRequest('auth/login', { email, password });
   if (response?.status === 200) {
     return response.data as ResponseAuth;
   } else {
@@ -11,7 +11,7 @@ export async function login(email: string, password: string): Promise<ResponseAu
 }
 
 export async function register(user: RegisterUser): Promise<boolean> {
-  const response = await postRequest('auth/register', user, { withCredentials: true });
+  const response = await postRequest('auth/register', user);
   if (response?.status === 201) {
     return true;
   } else {
@@ -20,11 +20,11 @@ export async function register(user: RegisterUser): Promise<boolean> {
 }
 
 export async function logout() {
-  return await postRequest('auth/logout', {}, { withCredentials: true });
+  return await postRequest('auth/logout', {});
 }
 
 export async function refresh(refresh_token_rotation?: boolean): Promise<ResponseAuth | undefined> {
-  const response = await getRequest('auth/refresh', { withCredentials: true, params: { refresh_token_rotation } });
+  const response = await getRequest('auth/refresh', { params: { refresh_token_rotation } });
   if (response?.status === 200) {
     return response.data as ResponseAuth;
   } else {
@@ -33,7 +33,7 @@ export async function refresh(refresh_token_rotation?: boolean): Promise<Respons
 }
 
 export async function me(): Promise<ResponseAuth | undefined> {
-  const response = await getRequest('auth/me', { withCredentials: true });
+  const response = await getRequest('auth/me');
   if (response?.status === 200) {
     return response.data;
   } else {

ui/src/api/index.ts

@@ -1,15 +1,33 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 
 const serviceHost = process.env.SERVICE_HOST || 'http://localhost';
 const servicePort = process.env.SERVICE_PORT || 5000;
 
+function createAxiosClient(): AxiosInstance {
+  const axiosClient = axios.create({
+    baseURL: `${serviceHost}:${servicePort}`
+  });
+
+  axiosClient.interceptors.request.use(
+    (request) => {
+      request.withCredentials = true;
+      return request;
+    },
+    (error) => {
+      console.error(error);
+      return Promise.reject(error);
+    }
+  );
+  return axiosClient;
+}
+
+const axiosClient = createAxiosClient();
+
 export async function getRequest(
   url: string,
   config?: AxiosRequestConfig<any>
 ): Promise<AxiosResponse<any, any> | undefined> {
-  const response = await axios
-    .get(`${serviceHost}:${servicePort}/${url}`, config)
-    .catch((error) => console.error(error));
+  const response = await axiosClient.get(`/${url}`, config);
   return response || undefined;
 }
 
@@ -18,9 +36,7 @@ export async function postRequest(
   data?: any,
   config?: AxiosRequestConfig<any>
 ): Promise<AxiosResponse<any, any> | undefined> {
-  const response = await axios
-    .post(`${serviceHost}:${servicePort}/${url}`, data, config)
-    .catch((error) => console.error(error));
+  const response = await axiosClient.post(`/${url}`, data, config);
   return response || undefined;
 }
 

ui/src/components/Topbar/index.tsx

@@ -92,7 +92,7 @@ export default function Topbar() {
         }
       });
     }
-  }, []);
+  }, [pathName]);
 
   useEffect(() => {
     const h: HeaderItem[] = [];