fix: Unified handling of `HttpErrorContent` and `RouteErrorBoundary`

This commit is contained in:
haitaoo 2023-03-24 18:38:12 +08:00
parent 2e61aada50
commit d80d34419d
6 changed files with 39 additions and 71 deletions

View File

@ -1,4 +1,4 @@
import { memo } from 'react'; import { memo, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -6,13 +6,28 @@ import { usePageTags } from '@/hooks';
const Index = ({ httpCode = '', errMsg = '' }) => { const Index = ({ httpCode = '', errMsg = '' }) => {
const { t } = useTranslation('translation', { keyPrefix: 'page_error' }); const { t } = useTranslation('translation', { keyPrefix: 'page_error' });
useEffect(() => {
// auto height of container
const pageWrap = document.querySelector('.page-wrap');
if (pageWrap) {
// @ts-ignore
pageWrap.style.display = 'contents';
}
return () => {
if (pageWrap) {
// @ts-ignore
pageWrap.style.display = 'block';
}
};
}, []);
usePageTags({ usePageTags({
title: t(`http_${httpCode}`, { keyPrefix: 'page_title' }), title: t(`http_${httpCode}`, { keyPrefix: 'page_title' }),
}); });
return ( return (
<> <div className="d-flex flex-column flex-shrink-1 flex-grow-1 justify-content-center align-items-center">
<div <div
className="mb-4 text-secondary" className="mb-4 text-secondary"
style={{ fontSize: '120px', lineHeight: 1.2 }}> style={{ fontSize: '120px', lineHeight: 1.2 }}>
@ -27,7 +42,7 @@ const Index = ({ httpCode = '', errMsg = '' }) => {
{t('back_home')} {t('back_home')}
</Link> </Link>
</div> </div>
</> </div>
); );
}; };

View File

@ -1,27 +1,8 @@
/* eslint-disable import/no-unresolved */ // eslint-disable-next-line import/no-unresolved
import { useEffect } from 'react';
import { Container } from 'react-bootstrap';
import { HttpErrorContent } from '@/components'; import { HttpErrorContent } from '@/components';
const Index = () => { const Index = () => {
useEffect(() => { return <HttpErrorContent httpCode="404" />;
// auto height of container
const pageWrap = document.querySelector('.page-wrap');
pageWrap.style.display = 'contents';
return () => {
pageWrap.style.display = 'block';
};
}, []);
return (
<Container
className="d-flex flex-column justify-content-center align-items-center"
style={{ flex: 1 }}>
<HttpErrorContent httpCode="404" />
</Container>
);
}; };
export default Index; export default Index;

View File

@ -1,27 +1,8 @@
/* eslint-disable import/no-unresolved */ // eslint-disable-next-line import/no-unresolved
import { useEffect } from 'react';
import { Container } from 'react-bootstrap';
import { HttpErrorContent } from '@/components'; import { HttpErrorContent } from '@/components';
const Index = () => { const Index = () => {
useEffect(() => { return <HttpErrorContent httpCode="50X" />;
// auto height of container
const pageWrap = document.querySelector('.page-wrap');
pageWrap.style.display = 'contents';
return () => {
pageWrap.style.display = 'block';
};
}, []);
return (
<Container
className="d-flex flex-column justify-content-center align-items-center"
style={{ flex: 1 }}>
<HttpErrorContent httpCode="50X" />
</Container>
);
}; };
export default Index; export default Index;

View File

@ -42,14 +42,9 @@ const Layout: FC = () => {
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div <div
className="position-relative page-wrap" className="position-relative page-wrap"
style={{ display: httpStatusCode ? 'contents' : 'block' }}
onClick={imgViewer.checkClickForImgView}> onClick={imgViewer.checkClickForImgView}>
{httpStatusCode ? ( {httpStatusCode ? (
<div
className="d-flex flex-column justify-content-center align-items-center"
style={{ flex: 1 }}>
<HttpErrorContent httpCode={httpStatusCode} /> <HttpErrorContent httpCode={httpStatusCode} />
</div>
) : ( ) : (
<Outlet /> <Outlet />
)} )}

View File

@ -1,8 +1,7 @@
import Error50X from '@/pages/50X'; import { HttpErrorContent } from '@/components';
// import Page404 from '@/pages/404';
const Index = () => { const Index = ({ errCode = '50X', errMsg = '' }) => {
return <Error50X />; return <HttpErrorContent httpCode={errCode} errMsg={errMsg} />;
}; };
export default Index; export default Index;

View File

@ -3,7 +3,8 @@ import { useLocation, useNavigate, useLoaderData } from 'react-router-dom';
import { floppyNavigation } from '@/utils'; import { floppyNavigation } from '@/utils';
import { TGuardFunc } from '@/utils/guard'; import { TGuardFunc } from '@/utils/guard';
import { errorCodeStore } from '@/stores';
import RouteErrorBoundary from './RouteErrorBoundary';
const RouteGuard: FC<{ const RouteGuard: FC<{
children: ReactNode; children: ReactNode;
@ -20,20 +21,14 @@ const RouteGuard: FC<{
page, page,
}); });
const { update: updateHttpError } = errorCodeStore(); let guardError;
const handleGuardError = () => { const errCode = gr.error?.code;
const err = gr.error;
let errCode = err?.code;
if (errCode && typeof errCode !== 'string') {
errCode = errCode.toString();
}
if (errCode === '403' || errCode === '404' || errCode === '50X') { if (errCode === '403' || errCode === '404' || errCode === '50X') {
updateHttpError(errCode, err?.msg); guardError = {
} code: errCode,
msg: gr.error?.msg,
}; };
useEffect(() => { }
handleGuardError();
}, [gr.error]);
const handleGuardRedirect = () => { const handleGuardRedirect = () => {
const redirectUrl = gr.redirect; const redirectUrl = gr.redirect;
if (redirectUrl) { if (redirectUrl) {
@ -47,8 +42,10 @@ const RouteGuard: FC<{
}, [location]); }, [location]);
return ( return (
<> <>
{/* Route Guard */}
{gr.ok ? children : null} {gr.ok ? children : null}
{!gr.ok && guardError ? (
<RouteErrorBoundary errCode={guardError.code} />
) : null}
</> </>
); );
}; };