Added cancelling handle

src/frontend/src/controllers/API/api.tsx

@@ -1,4 +1,4 @@
-import axios, { AxiosError, AxiosInstance } from "axios";
+import axios, { Axios, AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";
@@ -83,8 +83,10 @@ function ApiInterceptor() {
       (config) => {
         const checkRequest = checkDuplicateRequestAndStoreRequest(config);
 
+        const controller = new AbortController();
+
         if (!checkRequest) {
-          return Promise.reject("Duplicate request.");
+          controller.abort("Duplicate Request");
         }
 
         const accessToken = cookies.get("access_token_lf");
@@ -92,7 +94,10 @@ function ApiInterceptor() {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
         }
 
-        return config;
+        return {
+          ...config,
+          signal: controller.signal,
+        };
       },
       (error) => {
         return Promise.reject(error);

src/frontend/src/controllers/API/index.ts

@@ -365,13 +365,9 @@ export async function uploadFile(
   return await api.post(`${BASE_URL_API}files/upload/${id}`, formData);
 }
 
-export async function getProfilePictures(
-  abortSignal,
-): Promise<ProfilePicturesTypeAPI | null> {
+export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI | null> {
   try {
-    const res = await api.get(`${BASE_URL_API}images/list/profile_pictures`, {
-      signal: abortSignal,
-    });
+    const res = await api.get(`${BASE_URL_API}files/profile_pictures/list`);
 
     if (res.status === 200) {
       return res.data;

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts

@@ -1,19 +1,22 @@
 import { reject } from "lodash";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
+import axios from "axios";
 
 const useGetProfilePictures = (setErrorData) => {
-  const handleGetProfilePictures = async (abortSignal) => {
+  const handleGetProfilePictures = async () => {
     try {
-      const profilePictures = await getProfilePictures(abortSignal);
+      const profilePictures = await getProfilePictures();
       return profilePictures!.files;
     } catch (error) {
-      console.log(error);
-      setErrorData({
-        title: PROFILE_PICTURES_GET_ERROR_ALERT,
-        list: [(error as any)?.response?.data?.detail],
-      });
-      throw error;
+      if (axios.isCancel(error)) {
+        console.warn("Request canceled: ", error.message);
+      } else {
+        setErrorData({
+          title: PROFILE_PICTURES_GET_ERROR_ALERT,
+          list: [(error as any)?.response?.data?.detail],
+        });
+      }
     }
   };
 

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx

@@ -17,9 +17,7 @@ type ProfilePictureFormComponentProps = {
   profilePicture: string;
   handleInput: (event: any) => void;
   handlePatchProfilePicture: (gradient: string) => void;
-  handleGetProfilePictures: (
-    abortSignal: GenericAbortSignal | undefined,
-  ) => Promise<string[]>;
+  handleGetProfilePictures: () => Promise<string[]>;
   userData: any;
 };
 const ProfilePictureFormComponent = ({
@@ -37,7 +35,7 @@ const ProfilePictureFormComponent = ({
   useEffect(() => {
     const abortController = new AbortController();
 
-    handleGetProfilePictures(abortController.signal)
+    handleGetProfilePictures()
       .then((data) => {
         if (data) {
           data.forEach((profile_picture) => {