diff --git a/src/hooks/use-axios.tsx b/src/hooks/use-axios.tsx index ebe2c724b..94f6a946f 100644 --- a/src/hooks/use-axios.tsx +++ b/src/hooks/use-axios.tsx @@ -1,5 +1,5 @@ import axios from "redaxios" -import { useMemo } from "react" +import { useMemo, useRef } from "react" import { useGlobalStore } from "./use-global-store" import { useApiBaseUrl } from "./use-packages-base-api-url" import { toast, ToastContent, useToast } from "./use-toast" @@ -10,6 +10,8 @@ export const useAxios = () => { const session = useGlobalStore((s) => s.session) const { toastLibrary } = useToast() const signIn = useSignIn() + const unauthorizedToastShownRef = useRef(false) + return useMemo(() => { const instance = axios.create({ baseURL: snippetsBaseApiUrl, @@ -32,23 +34,38 @@ export const useAxios = () => { const status = error?.response?.status ?? error?.status if (status === 401) { - toastLibrary.custom( - (t) => ( -
signIn()} className="cursor-pointer"> - -
- ), - { - position: "top-center", - }, - ) + if (!unauthorizedToastShownRef.current) { + unauthorizedToastShownRef.current = true + toastLibrary.custom( + (t) => ( +
{ + unauthorizedToastShownRef.current = false + signIn() + }} + className="cursor-pointer" + > + +
+ ), + { + position: "top-center", + duration: 5000, + }, + ) + + // Reset the flag after 5 seconds to allow showing toast again if needed + setTimeout(() => { + unauthorizedToastShownRef.current = false + }, 5000) + } } throw error @@ -95,5 +112,5 @@ export const useAxios = () => { }) as typeof originalPatch return instance - }, [session?.token]) + }, [session?.token, snippetsBaseApiUrl, toastLibrary, signIn]) }