error refactor

locales/en-us/pbError.json

@@ -0,0 +1,8 @@
+{
+	"home": "Go to home page",
+	"errorOcurred": "An error occurred (✖╭╮✖)",
+	"pageNotFound": {
+		"title": "Page not found",
+		"text": "The page you are trying to access does not exist."
+	}
+}

locales/es-ar/pbError.json

@@ -0,0 +1,8 @@
+{
+	"home": "Ir al inicio",
+	"errorOcurred": "Ocurrió un error (✖╭╮✖)",
+	"pageNotFound": {
+		"title": "Página no encontrada",
+		"text": "La página a la que intentás acceder no existe."
+	}
+}

locales/pt-br/pbError.json

@@ -0,0 +1,8 @@
+{
+	"home": "Vá para iniciar",
+	"errorOcurred": "Um erro ocorreu (✖╭╮✖)",
+	"pageNotFound": {
+		"title": "Página não encontrada",
+		"text": "A página que você está tentando acessar não existe."
+	}
+}

src/App.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import './App.css';
 import { createHashRouter, RouterProvider, Outlet } from "react-router-dom";
 import { Home } from './components/home/Home';
-import { PBError } from './components/PBError';
+import { PBError } from './components/pageNotFound/PBError';
 import { ChallengeById, ChallengeByName } from './components/ChallengeView';
 import { BookView } from './components/book/BookView';
 import { ImportedChallengeView } from './components/ImportedChallengeView';

src/components/pageNotFound/PBError.tsx

@@ -0,0 +1,28 @@
+import { Typography, Button, Stack } from "@mui/material"
+import { Link, useRouteError } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import styles from "./PBError.module.css"
+import { Header } from "../header/Header";
+
+type PbErrorProps = {
+    title?: string,
+    error?: string,
+}
+
+export const PBError = (props: PbErrorProps) =>{
+    const {t} = useTranslation("pbError")
+
+    const error = useRouteError() as any
+
+    return <>
+        <Header/>
+        <Stack direction='column' alignItems='center'>
+            <Typography className={styles.title} variant="h4">{props.title ? props.title : t("errorOcurred")}</Typography>
+            <img alt="capy" className={styles.image} src='imagenes/capy_error.png' />
+            <Typography className={styles.text} variant="h6">{props.error ? props.error : error.message}</Typography>
+            <Link to="/">
+                <Button variant="contained" color="success" >{t("home")}</Button>
+            </Link>
+        </Stack>
+    </>
+}

src/components/pageNotFound/PageNotFound.tsx

@@ -1,26 +1,8 @@
-import { Typography, Button, Stack } from "@mui/material"
-import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Header } from "../header/Header"
-import styles from "./pageNotFound.module.css"
+import { PBError } from "./PBError";
 
-type PageNotFoundProps = {
-    title?: string,
-    error?: string,
-}
+export const PageNotFound = () =>{
+    const {t} = useTranslation("pbError")
 
-export const PageNotFound = (props: PageNotFoundProps) =>{
-    const {t} = useTranslation("pageNotFound")
-
-    return <>
-        <Header/>
-        <Stack direction='column' alignItems='center'>
-            <Typography className={styles.title} variant="h4">{props.title ? props.title : t("title")}</Typography>
-            <img alt="capy" className={styles.image} src='imagenes/capy_error.png' />
-            <Typography className={styles.text} variant="h6">{props.error ? props.error : t("text")}</Typography>
-            <Link to="/">
-                <Button variant="contained" color="success" >{t("home")}</Button>
-            </Link>
-        </Stack>
-    </>
+    return <PBError title={t("pageNotFound.title")!} error={t("pageNotFound.text")!}/>
 }