hamid zarghami
138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import { type FC, useEffect, useState } from 'react'
|
|
import { BrowserRouter } from 'react-router-dom'
|
|
// import 'swiper/swiper-bundle.css';
|
|
// import 'rc-rate/assets/index.css';
|
|
// import "react-multi-date-picker/styles/layouts/mobile.css"
|
|
import './assets/fonts/irancell/style.css'
|
|
import i18next from 'i18next'
|
|
import { I18nextProvider } from 'react-i18next'
|
|
import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import { ToastContainer } from 'react-toastify'
|
|
import FaJson from './langs/fa.json'
|
|
import { type IApiErrorRepsonse } from './types/error.types'
|
|
import MainRouter from './router/Main'
|
|
import AuthRouter from './router/Auth'
|
|
import { Pages } from './config/Pages'
|
|
import { getRefreshToken, setToken, setRefreshToken, removeToken, removeRefreshToken, getToken } from './config/func';
|
|
import { refreshToken } from './pages/auth/service/AuthService';
|
|
|
|
i18next.init({
|
|
interpolation: { escapeValue: false },
|
|
lng: 'fa',
|
|
resources: {
|
|
fa: {
|
|
global: FaJson
|
|
}
|
|
}
|
|
})
|
|
|
|
declare global {
|
|
interface Window {
|
|
isRefreshingToken?: boolean;
|
|
}
|
|
}
|
|
|
|
const queryClient = new QueryClient({
|
|
queryCache: new QueryCache({
|
|
onError: async (error: IApiErrorRepsonse) => {
|
|
if (error?.response?.status === 401) {
|
|
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();
|
|
const response = await refreshToken({ token: refreshTokenValue || '' });
|
|
const data = response.results.data;
|
|
|
|
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);
|
|
}
|
|
|
|
// 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);
|
|
// Clear tokens and redirect to login
|
|
await removeToken();
|
|
await removeRefreshToken();
|
|
window.location.href = '/auth/login';
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
retry: false
|
|
// staleTime: 86400000 // 1 day in milliseconds
|
|
}
|
|
}
|
|
});
|
|
|
|
const App: FC = () => {
|
|
|
|
const [isLogin, setIsLogin] = useState<'checking' | 'isLogin' | 'isNotLogin'>('checking')
|
|
useEffect(() => {
|
|
const token = getToken()
|
|
if (token) {
|
|
setIsLogin('isLogin')
|
|
} else {
|
|
setIsLogin('isNotLogin')
|
|
if (window.location.href.split('auth').length === 1) {
|
|
window.location.href = Pages.auth.login
|
|
}
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
return (
|
|
<BrowserRouter>
|
|
<QueryClientProvider client={queryClient}>
|
|
<I18nextProvider i18n={i18next}>
|
|
{
|
|
isLogin === 'checking' ?
|
|
<div>loading</div>
|
|
:
|
|
isLogin === 'isLogin' ?
|
|
<MainRouter />
|
|
:
|
|
<AuthRouter />
|
|
}
|
|
<ToastContainer />
|
|
</I18nextProvider>
|
|
</QueryClientProvider>
|
|
</BrowserRouter>
|
|
)
|
|
}
|
|
|
|
export default App |