Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-10 04:22:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(errorpage): added localProvider, replaced a with Link and added custom messages

Browse Source 
- Add LocaleProvider wrapper for i18n support
- Replace a tag with React Router Link components
- Add custom error messages for different HTTP status codes
- Implement proper translation support using Trans and t components
This commit is contained in:
Oumar Mimouni
2025-01-31 14:38:17 +01:00
parent f42b29e4ac
commit e438602773
1 changed files with 46 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/client/src/pages/public/error.tsx
View File

@ -1,5 +1,8 @@
import { useRouteError } from "react-router";
// External libraries
import { Trans, t } from "@lingui/macro";
import { Link, useRouteError } from "react-router";
import { Button } from "@reactive-resume/ui";
import { LocaleProvider } from "@/client/providers/locale";
type RouterError = {
status: number;
@ -8,34 +11,54 @@ type RouterError = {
message?: string;
} & Error;
const getErrorMessage = (status: number) => {
switch (status) {
case 404:
return "The page you're looking for doesn't exist.";
case 403:
return "You don't have permission to access this page.";
case 500:
return "An internal server error occurred.";
case 401:
return "You are not authorized to access this page.";
case 400:
return "The request was invalid.";
default:
return "An unexpected error occurred.";
}
};
export const ErrorPage = () => {
const error = useRouteError() as RouterError;
return (
<main className="flex items-center justify-center min-h-screen p-4">
<div className="w-full max-w-sm space-y-6">
<h4 className="flex flex-col text-4xl font-bold text-white">
<span>
Error {error.status}
</span>
{error.statusText && <span className="text-base font-normal">{error.statusText}</span>}
</h4>
<LocaleProvider>
<main className="flex items-center justify-center min-h-screen p-4">
<div className="w-full max-w-sm space-y-6">
<h4 className="flex flex-col text-4xl font-bold text-white">
<span>
{t`Error ${error.status}`}
</span>
{error.statusText && <span className="text-base font-normal">{`${error.statusText}`}</span>}
</h4>
<p className="text-sm text-gray-500 break-words">
{error.data || error.message}
</p>
<p className="text-sm text-gray-500 break-words">
{/* {error.data || error.message} */}
<Trans>{error.data || error.message || getErrorMessage(error.status)}</Trans>
</p>
<div className="pt-2">
<a
href={process.env.PUBLIC_URL}
className="inline-block"
>
<Button>
Go to home
</Button>
</a>
<div className="pt-2">
<Link
to="/"
className="inline-block"
>
<Button>
{t`Go to home`}
</Button>
</Link>
</div>
</div>
</div>
</main>
</main>
</LocaleProvider>
);
};