Solution

.prettierignore

@@ -0,0 +1,27 @@
+*.css
+*.html
+
+pnpm-lock.yaml
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}

package.json

@@ -15,6 +15,8 @@
         "cheerio": "1.0.0-rc.12",
         "react": "experimental",
         "react-dom": "experimental",
+        "react-loader-spinner": "^5.3.4",
+        "react-router-dom": "^6.9.0",
         "rect-use": "^1.0.0"
     },
     "devDependencies": {

src/app/App.css

@@ -39,3 +39,15 @@
 .read-the-docs {
   color: #888;
 }
+
+.nav{
+
+  padding:20px;
+}
+.navItem{
+
+  margin:10px;
+  background-color: #444444; 
+  border-radius: 10px;
+  padding:12px;
+}

src/app/App.tsx

@@ -1,23 +1,16 @@
-import { Suspense } from 'react'
-
-import reactLogo from '../assets/react.svg'
-
-import UsersPage from './users/UsersPage'
+import React from 'react'
 import './App.css'
+import logo from '../assets/react.svg'
+import { AppRoutes } from './AppRoutes'
 
 function App() {
-
     return (
         <div className="App">
             <div>
-                <img src={reactLogo} className="logo react" alt="React logo" />
+                <img src={logo} className="logo react" alt="React logo" />
             </div>
-            <Suspense fallback={<h2>Loading…</h2>}>
-                <UsersPage />
-            </Suspense>
-            <p className="read-the-docs">
-                React 18 use() hook showcase
-            </p>
+            <AppRoutes />
+            <p className="read-the-docs">React 18 use() hook showcase</p>
         </div>
     )
 }

src/app/AppRoutes.tsx

@@ -0,0 +1,47 @@
+import React, { Suspense } from 'react'
+import { Blocks } from 'react-loader-spinner'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import NavBar from './NavBar'
+import Root from './routes'
+import { SpeakersPage } from './SpeakersPage'
+import UsersPage from './users/UsersPage'
+
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <NavBar />,
+        children: [
+            {
+                path: '/',
+                element: (
+                    <Suspense fallback={<p>loading...</p>}>
+                        <UsersPage />
+                    </Suspense>
+                ),
+            },
+            {
+                path: '/constantine/speakers',
+                element: (
+                    <Suspense
+                        fallback={
+                            <Blocks
+                                visible={true}
+                                height="80"
+                                width="80"
+                                ariaLabel="blocks-loading"
+                                wrapperStyle={{}}
+                                wrapperClass="blocks-wrapper"
+                            />
+                        }
+                    >
+                        <SpeakersPage />
+                    </Suspense>
+                ),
+            },
+        ],
+    },
+])
+
+export const AppRoutes = () => {
+    return <RouterProvider router={router} />
+}

src/app/NavBar.tsx

@@ -0,0 +1,18 @@
+import reactLogo from '../../assets/react.svg'
+import { Link, Outlet } from 'react-router-dom'
+
+export default function Root() {
+    return (
+        <div>
+            <nav className="nav">
+                <Link to="/" className="navItem">
+                    Home
+                </Link>
+                <Link to="/constantine/speakers" className="navItem">
+                    Speakers
+                </Link>
+            </nav>
+            <Outlet />
+        </div>
+    )
+}

src/app/SpeakersPage.tsx

@@ -0,0 +1,21 @@
+import { use } from 'react'
+
+import Title from '@/components/Title'
+import { speakerService, Speaker } from '@/lib/services/speakerService'
+
+export function SpeakersPage() {
+    const speakers = use(speakerService.fetchSpeakers())
+
+    return (
+        <>
+            <Title>Speakers</Title>
+            <section>
+                {speakers.map((speaker) => (
+                    <p key={speaker.id}>
+                        {speaker.name} ({speaker.lecture})
+                    </p>
+                ))}
+            </section>
+        </>
+    )
+}

src/lib/services/speakerService.ts

@@ -45,7 +45,7 @@ class SpeakerService {
                 }
             }
 
-            return speakers
+            return speakers.filter((spk) => !!spk)
         } catch (error) {
             throw error
         }

src/lib/services/userService.ts

@@ -7,7 +7,8 @@ class UserService {
         singleUser: (id: number) => `/users/${id}`,
     }
 
-    private mapUsers = (usersArr: any[]) => usersArr.map((user: any) => new User(user))
+    private mapUsers = (usersArr: any[]) =>
+        usersArr.map((user: any) => new User(user))
     private mapUser = (userData: any) => new User(userData)
 
     async fetchUsers() {