packages/mui/src/components/pages/error/index.tsx
import React, { useEffect, useState } from "react";
import { useGo, useResource, useRouterType } from "@refinedev/core";
import { RefineErrorPageProps } from "@refinedev/ui-types";
import { useNavigation, useTranslate } from "@refinedev/core";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import Info from "@mui/icons-material/Info";
export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
const [errorMessage, setErrorMessage] = useState<string>();
const { push } = useNavigation();
const go = useGo();
const routerType = useRouterType();
const { resource, action } = useResource();
const translate = useTranslate();
useEffect(() => {
if (resource && action) {
setErrorMessage(
translate(
"pages.error.info",
{
action,
resource: resource?.name,
},
`You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`,
),
);
}
}, [action, resource]);
return (
<Grid display="flex" justifyContent="center" alignItems="center" mt={20}>
<Grid container direction="column" display="flex" alignItems="center">
<Typography variant="h1">404</Typography>
<Stack direction="row" spacing="2">
<Typography>
{translate(
"pages.error.404",
"Sorry, the page you visited does not exist.",
)}
</Typography>
{errorMessage && (
<Tooltip title={errorMessage}>
<Info data-testid="error-component-tooltip" />
</Tooltip>
)}
</Stack>
<Button
onClick={() => {
if (routerType === "legacy") {
push("/");
} else {
go({ to: "/" });
}
}}
>
{translate("pages.error.backHome", "Back Home")}
</Button>
</Grid>
</Grid>
);
};