diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 91abedd18..4070b784f 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/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); diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 8874f51a7..f59f37410 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/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 { +export async function getProfilePictures(): Promise { 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; diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts index de3c7c744..2997a4b2f 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts +++ b/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], + }); + } } }; diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx index 59468ba8f..f8f77c5b7 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx +++ b/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; + handleGetProfilePictures: () => Promise; 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) => {