Merge pull request #38 from SELab-2/react-router

added routing

frontend/package.json

@@ -6,12 +6,13 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

frontend/src/main.tsx

@@ -1,10 +1,39 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import {createBrowserRouter, RouterProvider,} from "react-router-dom";
 import './index.css'
+import Root from './pages/root.tsx'
+import ErrorPage from './pages/error.tsx'
+import LoginScreen from "./pages/login/LoginScreen.tsx";
+import HomeAdmin from "./pages/admin/HomeAdmin.tsx";
+import HomeStudent from "./pages/student/HomeStudent.tsx";
+import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
 
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Root/>,
+        errorElement: <ErrorPage/>
+    },
+    {
+        path: "/login",
+        element: <LoginScreen/>
+    },
+    {
+        path: "/admin",
+        element: <HomeAdmin/>
+    },
+    {
+        path: "/student",
+        element: <HomeStudent/>
+    },
+    {
+        path: "/teacher",
+        element: <HomeTeacher/>
+    }
+]);
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router}/>
   </React.StrictMode>,
 )

frontend/src/pages/admin/HomeAdmin.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeAdmin(): JSX.Element {
+export default function HomeAdmin(): JSX.Element {
     return (
         <>Homescreen for an admin</>
     )

frontend/src/pages/error.tsx

@@ -0,0 +1,38 @@
+import {isRouteErrorResponse, useRouteError} from "react-router-dom";
+import {JSX} from 'react';
+
+export default function ErrorPage(): JSX.Element {
+    const error = useRouteError();
+    console.error(error);
+
+    return (
+        <div id="error-page">
+            <h1>Oops!</h1>
+            <p>Sorry, an unexpected error has occurred.</p>
+            <p>
+                <i>{errorMessage(error)}</i>
+            </p>
+        </div>
+    );
+}
+
+interface RouterError extends Error {}
+
+function isRouterError(object: unknown): object is RouterError {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return 'message' in object;
+}
+
+function errorMessage(error: unknown): string {
+    if (isRouteErrorResponse(error)) {
+        return `${error.status} ${error.statusText}`
+    } else if (error != undefined && isRouterError(error)) {
+        return error.message;
+    } else if (typeof error === 'string') {
+        return error
+    } else {
+        console.error(error)
+        return 'Unknown error'
+    }
+}

frontend/src/pages/login/LoginScreen.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function LoginScreen(): JSX.Element {
+export default function LoginScreen(): JSX.Element {
     return (
         <>Login screen</>
     )

frontend/src/pages/root.tsx

@@ -0,0 +1,12 @@
+import {JSX} from "react";
+import {Link} from "react-router-dom";
+
+export default function Root(): JSX.Element {
+    // TODO: logic to send user to /login or
+    return (
+        <>
+            <>Redirecting ...</>
+            <Link to={`/login`}>goto login page</Link>
+        </>
+)
+}

frontend/src/pages/student/HomeStudent.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeStudent(): JSX.Element {
+export default function HomeStudent(): JSX.Element {
     return (
         <>Homescreen for a student</>
     )

frontend/src/pages/teacher/HomeTeacher.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeTeacher(): JSX.Element {
+export default function HomeTeacher(): JSX.Element {
     return (
         <>Homescreen for a teacher</>
     )