Files
negareh-console/src/App.tsx
T
morteza 8cab9d04c8
deploy to danak / build_and_deploy (push) Has been cancelled
remove hard reload
2026-07-03 17:16:11 +03:30

165 lines
5.4 KiB
TypeScript

import { type FC } from 'react'
import '@/assets/fonts/irancell/style.css'
import 'swiper/swiper-bundle.css';
import 'react-loading-skeleton/dist/skeleton.css'
import { BrowserRouter } from 'react-router-dom'
import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
import MainRouter from './router/MainRouter'
import ToastContainer from './components/Toast'
import { getRefreshToken, setRefreshToken, setToken } from './config/func';
import AuthRouter from './router/AuthRouter';
import CompleteProfileRouter from './router/CompleteProfileRouter';
import type { IApiErrorRepsonse } from './shared/types/Types';
import { Paths } from './config/Paths';
import { useSessionAuth } from './config/sessionAuth';
import { appNavigate, AppNavigation } from './config/navigation';
import { refreshToken } from './pages/auth/service/AuthService';
import { useGetMe } from './pages/user/hooks/useUserData';
import { needsProfileCompletion } from './pages/user/utils/profileUtils';
import MoonLoader from 'react-spinners/MoonLoader';
declare global {
interface Window {
isRefreshingToken?: boolean;
isRefreshTokenExpired?: boolean;
}
}
const queryClient = new QueryClient({
queryCache: new QueryCache({
onError: async (error: IApiErrorRepsonse) => {
if (error?.response?.status === 401) {
// اگر refresh token منقضی شده باشد، دیگر تلاش نکن
if (window.isRefreshTokenExpired) {
return;
}
// بررسی کن که آیا خطا از refresh endpoint است
const isRefreshEndpoint = error?.config?.url?.includes('/public/auth/refresh');
// اگر خطا از refresh endpoint است، refresh token منقضی شده
if (isRefreshEndpoint) {
window.isRefreshTokenExpired = true;
useSessionAuth.getState().clearSession();
queryClient.clear();
appNavigate(Paths.auth.login, { replace: true });
return;
}
try {
// Use a flag to track if refresh is in progress
if (window.isRefreshingToken) {
// Wait for the refresh to complete
await new Promise(resolve => {
const checkComplete = setInterval(() => {
if (!window.isRefreshingToken) {
clearInterval(checkComplete);
resolve(true);
}
}, 100);
});
return;
}
// Set the flag to indicate refresh is in progress
window.isRefreshingToken = true;
try {
const refreshTokenValue = await getRefreshToken();
if (!refreshTokenValue) {
window.isRefreshTokenExpired = true;
useSessionAuth.getState().clearSession();
queryClient.clear();
appNavigate(Paths.auth.login, { replace: true });
return;
}
const { data } = await refreshToken({ refreshToken: refreshTokenValue || '' });
if (data?.accessToken?.token) {
// Save the new token
await setToken(data?.accessToken?.token);
// If refresh token also returned, update it
if (data.refreshToken?.token) {
await setRefreshToken(data.refreshToken?.token);
}
// Reset expired flag if refresh was successful
window.isRefreshTokenExpired = false;
// Retry the failed request
queryClient.invalidateQueries();
return;
} else {
throw new Error('Invalid token response');
}
} finally {
window.isRefreshingToken = false;
}
} catch (refreshError: unknown) {
console.error('Token refresh failed:', refreshError);
// بررسی کن که آیا خطا از refresh endpoint است
const errorWithConfig = refreshError as IApiErrorRepsonse;
const isRefreshError = errorWithConfig?.config?.url?.includes('/admin/auth/refresh');
// اگر refresh token خودش 401 خورده، آن را منقضی شده علامت بزن
if (isRefreshError || errorWithConfig?.response?.statusCode === 401) {
window.isRefreshTokenExpired = true;
}
useSessionAuth.getState().clearSession();
queryClient.clear();
appNavigate(Paths.auth.login, { replace: true });
}
}
}
}),
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: false
// staleTime: 86400000 // 1 day in milliseconds
}
}
});
const AppRoutes: FC = () => {
const isLoggedIn = useSessionAuth((state) => state.isAuthenticated)
const { data: user, isLoading } = useGetMe({ enabled: isLoggedIn })
const profileIncomplete = isLoggedIn && needsProfileCompletion(user)
if (isLoggedIn && isLoading) {
return (
<div className='w-full h-screen flex items-center justify-center'>
<MoonLoader size={32} color='#000' />
</div>
)
}
return (
<BrowserRouter>
<AppNavigation />
{!isLoggedIn ? (
<AuthRouter />
) : profileIncomplete ? (
<CompleteProfileRouter />
) : (
<MainRouter />
)}
<ToastContainer />
</BrowserRouter>
)
}
const App: FC = () => {
return (
<QueryClientProvider client={queryClient}>
<AppRoutes />
</QueryClientProvider>
)
}
export default App