53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { ErrorOutline } from '@mui/icons-material';
|
|
import { Grid, Link as MUILink, Typography } from '@mui/material';
|
|
import { useQueryErrorResetBoundary } from '@tanstack/react-query';
|
|
import { ErrorRouteComponent as TSErrorRouteComponent, useNavigate, useRouter } from '@tanstack/react-router';
|
|
import { useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import HeaderlessLayout from '../../components/Layouts/HeaderlessLayout';
|
|
import { ROUTES } from '../../types/Routes';
|
|
import { ERRORS } from './Errors';
|
|
|
|
const ErrorRouterComponent: TSErrorRouteComponent = ({ error }) => {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const navigate = useNavigate();
|
|
const queryErrorResetBoundary = useQueryErrorResetBoundary();
|
|
|
|
useEffect(() => {
|
|
// Reset the query error boundary
|
|
console.log(queryErrorResetBoundary.isReset());
|
|
queryErrorResetBoundary.reset();
|
|
}, [queryErrorResetBoundary]);
|
|
|
|
return (
|
|
<HeaderlessLayout>
|
|
<Grid container spacing={2} sx={{ marginTop: 0 }}>
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<ErrorOutline sx={{ fontSize: '200px' }} />
|
|
</Grid>
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Typography variant="h4" sx={{ textAlign: 'center' }}>
|
|
{t('code' in error && error.code === ERRORS.UNAUTHORIZED ? 'Session expired' : 'General error')}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<MUILink
|
|
variant="h6"
|
|
underline="none"
|
|
onClick={() => {
|
|
console.log('CLICK AS WELL');
|
|
router.invalidate();
|
|
navigate({ to: ROUTES.INDEX });
|
|
}}
|
|
>
|
|
{t('Back to main')}
|
|
</MUILink>
|
|
</Grid>
|
|
</Grid>
|
|
</HeaderlessLayout>
|
|
);
|
|
};
|
|
|
|
export default ErrorRouterComponent;
|