Merge pull request #223 from SELab-2/feature/error-page

Feature/error page
SELab-2 · May 8, 2024 · 54181ed · 54181ed
2 parents 69d4c92 + 5e10f0e
commit 54181ed
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
@@ -1,8 +1,8 @@
 {
   "nav": {
     "profile": "Profile",
-    "login": "Login",
-    "logout": "Logout",
+    "login": "Log in",
+    "logout": "Log out",
     "accountSwitch": "Switch Account",
     "theme": "Theme",
     "dark": "Dark",
@@ -187,7 +187,7 @@
   "error": {
     "title": "Error",
     "subtitle": "Something went wrong, please try again later",
-    "homepage": "Back Home",
+    "back": "Go back",
     "403_message": "you are not authorized to access this page.",
     "404_message": "Sorry, the page you visited does not exist.",
     "500_message": "Sorry, Something went wrong"

diff --git a/frontend/src/i18n/nl/translation.json b/frontend/src/i18n/nl/translation.json
@@ -192,7 +192,7 @@
   "error": {
     "title": "Fout",
     "subtitle": "Er ging iets mis, probeer het later opnieuw.",
-    "homepage": "Naar Start",
+    "back": "Keer terug",
     "403_message": "Je bent niet bevoegd om deze pagina te bezoeken.",
     "404_message" : "Sorry, de pagina die je bezocht bestaat niet.",
     "500_message": "Sorry, er ging iets mis."

diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx
@@ -1,22 +1,22 @@
-import React  from "react";
-import { AppRoutes } from "../../@types/routes"
-import {useTranslation} from "react-i18next";
-import {Button, Result, Space, Typography} from "antd";
-import { Link, useNavigate } from "react-router-dom";
-
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Result, Space, Typography } from "antd";
+import { useNavigate } from "react-router-dom";
+import { AxiosError } from "axios";
 
 interface ErrorPageProps {
     errorCode?: number;
     errorMessage?: string;
+    axiosError?: AxiosError;
 }
 
-const Error: React.FC<ErrorPageProps> = ({ errorCode, errorMessage }) => {
-    const { t } = useTranslation()
+const Error: React.FC<ErrorPageProps> = ({ errorCode, errorMessage, axiosError }) => {
+    const { t } = useTranslation();
     const { Title, Text } = Typography;
-    const navigate = useNavigate()
+    const navigate = useNavigate();
 
-    let title:string = "";
-    let status: "403" | "404" | "500"  = "404";
+    let title: string
+    let status: "403" | "404" | "500" = "404";
 
     // Mapping van errorCode naar status
     const statusMapping: { [key: number]: "403" | "404" | "500" } = {
@@ -25,39 +25,46 @@ const Error: React.FC<ErrorPageProps> = ({ errorCode, errorMessage }) => {
         500: "500"
     };
 
-    const textMapping: { [key: number]: string} = {
+    const textMapping: { [key: number]: string } = {
         404: t("error.404_message"),
         403: t("error.403_message"),
         500: t("error.500_message")
+    };
+
+    // If axiosError was provided, put error Info into the variables
+    if(axiosError){
+        errorCode = axiosError.response?.status || undefined;
+        if(axiosError.response !== undefined){
+            errorMessage = axiosError.response.data?.toString() || undefined
+        }
     }
 
-    // Add default message to error page when no error message was provided
-    if(errorMessage === undefined){
-        if(errorCode !== undefined){
+    // add default message to error page when no error message was provided
+    if (errorMessage === undefined) {
+        if (errorCode !== undefined) {
             errorMessage = textMapping[errorCode] || t("error.subtitle");
-        }else{
+        } else {
             errorMessage = t("error.subtitle");
         }
     }
     // Add default error title if no error code was provided, otherwise set it to error code
-    if(errorCode === undefined){
-        title = t("error.title")
-
-    }else{
-        title = errorCode.toString()
-        status = statusMapping[errorCode] || "404"
+    if (errorCode === undefined) {
+        title = t("error.title");
+    } else {
+        title = errorCode.toString();
+        status = statusMapping[errorCode] || "404";
     }
 
     return (
         <Result status={status}>
             <Space direction="vertical">
                 <Title>{title}</Title>
                 <Text>{errorMessage}</Text>
-               
-                <Button onClick={()=> navigate(-1)} type="primary" >{t("error.homepage")}</Button>
+
+                <Button onClick={() => navigate(-1)} type="primary">{t("error.back")}</Button>
             </Space>
         </Result>
     );
-}
+};
 
 export default Error;
diff --git a/frontend/src/pages/index/landing/Navbar.tsx b/frontend/src/pages/index/landing/Navbar.tsx
@@ -1,10 +1,12 @@
-import { Space, Typography } from "antd"
-import { Link, useNavigate } from "react-router-dom"
+import { Typography } from "antd"
+import { useNavigate } from "react-router-dom"
 import LanguageDropdown from "../../../components/LanguageDropdown"
 import { FC } from "react"
+import {useTranslation} from "react-i18next";
 
 const Navbar: FC<{ onLogin: () => void }> = ({ onLogin }) => {
   const navigate = useNavigate()
+  const { t } = useTranslation()
 
   return (
     <div style={{ height: "6rem", display: "flex", justifyContent: "space-between", margin: "2rem" }}>
@@ -27,7 +29,7 @@ const Navbar: FC<{ onLogin: () => void }> = ({ onLogin }) => {
             className="landing-page-btn"
             onClick={onLogin}
           >
-            Aanmelden
+            {t("nav.login")}
           </button>
         </div>
       </div>