error pages (#93)

* initial draft for error pages

* indentation fixed

* docs

* error pages v1

* indentation fixed

* layout adjusted, using RouterProvider instead of BrowserRouter to render errors correctly, tests added

* linter

* documentation

* linter error parameters

* Added i18n, changed general structure of App component and got rid of fade animation for the image

* linting, package-lock.json fix

* package file

* changes to paramters in ErrorPage.tsx

* use of keyPrefix

* keyPrefix

* fix

frontend/.eslintrc.cjs

@@ -40,6 +40,7 @@ module.exports = {
     "jsdoc/require-param": 0,
     "jsdoc/require-param-description": 1,
     "jsdoc/require-param-name": 1,
+    "jsdoc/require-param-type": 0,
     "jsdoc/require-property": 1,
     "jsdoc/require-property-description": 1,
     "jsdoc/require-property-name": 1,

frontend/cypress/e2e/ErrorPage.cy.tsx

@@ -0,0 +1,16 @@
+describe('Error page test', () => {
+  it('Error page should load appropriately', () => {
+    expect(
+      () => {
+        cy.request({
+          method: 'POST',
+          path: '**',
+          body: {name: "fail"},
+          failOnStatusCode: false
+        }).then(response => {
+          expect(response.status).to.be(404) // is supposed to be 404
+        })
+      }
+    )
+  })
+})

frontend/package.json

@@ -36,10 +36,13 @@
   "devDependencies": {
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/history": "^4.7.11",
+    "@types/scheduler": "^0.23.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "^13.6.4",
+    "cypress": "^13.7.0",
     "eslint": "^8.56.0",
     "eslint-plugin-jsdoc": "^48.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -49,6 +52,7 @@
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.0",
     "react-i18next": "^14.1.0",
+    "scheduler": "^0.23.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.7"
   }

frontend/public/locales/en/translation.json

@@ -1,7 +1,4 @@
 {
-  "home": {
-    "title": "Homepage"
-  },
   "header": {
     "myProjects": "My Projects",
     "myCourses": "My Courses",
@@ -45,6 +42,16 @@
     "minutesAgo": "minutes ago",
     "justNow": "just now"
   },
+  "error": {
+    "pageNotFound": "Page Not Found",
+    "pageNotFoundMessage": "The requested page was not found.",
+    "forbidden": "Forbidden",
+    "forbiddenMessage": "You don't have access to this resource.",
+    "clientError": "Client Error",
+    "clientErrorMessage": "A client error has occured.",
+    "serverError": "Server Error",
+    "serverErrorMessage": "A server error has occured."
+  },
   "projectForm": {
     "projectTitle": "Title",
     "projectDescription": "Project description",

frontend/public/locales/nl/translation.json

@@ -62,5 +62,15 @@
     "hoursAgo": "uur geleden",
     "minutesAgo": "minuten geleden",
     "justNow": "Zonet"
+  },
+  "error": {
+    "pageNotFound": "Pagina Niet Gevonden",
+    "pageNotFoundMessage": "De opgevraagde pagina werd niet gevonden.",
+    "forbidden": "Verboden",
+    "forbiddenMessage": "Je hebt geen toegang tot deze bron.",
+    "clientError": "Client Fout",
+    "clientErrorMessage": "Er is een client fout opgetreden.",
+    "serverError": "Server Fout",
+    "serverErrorMessage": "Er is een server fout opgetreden."
   }
 }

frontend/src/App.tsx

@@ -3,11 +3,12 @@ import Layout from "./components/Header/Layout";
 import Home from "./pages/home/Home";
 import LanguagePath from "./components/LanguagePath";
 import ProjectView from "./pages/project/projectView/ProjectView";
+import { ErrorBoundary } from "./pages/error/ErrorBoundary.tsx";
 import ProjectCreateHome from "./pages/create_project/ProjectCreateHome.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout />}>
+    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
       <Route index element={<Home />} />
       <Route path=":lang" element={<LanguagePath/>}>
         <Route path="home" element={<Home />} />
@@ -27,8 +28,5 @@ const router = createBrowserRouter(
  * @returns - The main application component
  */
 export default function App(): React.JSX.Element {
-  return (
-    <RouterProvider router={router}>
-    </RouterProvider>
-  );
-}
+  return <RouterProvider router={router} />;
+}

frontend/src/Layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Header } from "./components/Header/Header.tsx";
+
+/**
+ * Basic layout component that will be used on all routes.
+ * @returns The Layout component
+ */
+export function Layout(): JSX.Element {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+}

frontend/src/pages/error/ErrorBoundary.tsx

@@ -0,0 +1,32 @@
+import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+import { ErrorPage } from "./ErrorPage.tsx";
+import { useTranslation } from "react-i18next";
+
+/**
+ * This component will render the ErrorPage component with the appropriate data when an error occurs.
+ * @returns The ErrorBoundary component
+ */
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const { t } = useTranslation('translation', { keyPrefix: 'error' });
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status == 404) {
+      return (
+        <ErrorPage statusCode={"404"} statusTitle={t("pageNotFound")} message={t("pageNotFoundMessage")} />
+      );
+    } else if (error.status == 403) {
+      return (
+        <ErrorPage statusCode={"403"} statusTitle={t("forbidden")} message={t("forbiddenMessage")} />
+      );
+    } else if (error.status >= 400 && error.status <= 499) {
+      return (
+        <ErrorPage statusCode={error.statusText} statusTitle={t("clientError")} message={t("clientErrorMessage")} />
+      );
+    } else if (error.status >= 500 && error.status <= 599) {
+      return (
+        <ErrorPage statusCode={error.statusText} statusTitle={t("serverError")} message={t("serverErrorMessage")} />
+      );
+    }
+  }
+}

frontend/src/pages/error/ErrorPage.tsx

@@ -0,0 +1,51 @@
+import { Grid, Typography } from "@mui/material";
+
+/**
+ * This component will be rendered when an error occurs.
+ * @param statusCode - The status code of the error
+ * @param statusTitle - The name of the error
+ * @param message - Additional information about the error
+ * @returns The ErrorPage component
+ */
+export function ErrorPage(
+  { statusCode, statusTitle, message }: { statusCode: string, statusTitle: string, message: string }
+): React.JSX.Element {
+  return (
+    <Grid
+      container
+      justifyContent="center"
+      alignItems="center"
+      direction="column"
+      sx={{ minHeight: "100vh" }}
+      spacing={2}
+    >
+      <Grid item>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          spacing={4}
+        >
+          <Grid item>
+            <Typography variant="h1">
+              { statusCode }
+            </Typography>
+          </Grid>
+          <Grid item>
+            <img src="/img/error_pigeon.png" height="150vh" alt="icon" />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item>
+        <Typography variant="h3">
+          { statusTitle }
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body1">
+          { message }
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}