Codestantine - refactoring

package.json

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

src/app/App.css

@@ -39,3 +39,28 @@
 .read-the-docs {
   color: #888;
 }
+
+/* navigation */
+.nav {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  justify-content: center;
+  padding: 10px 0;
+  background-color: #213547;
+}
+
+.nav a {
+  display: inline-block;
+}
+
+.nav a:first-of-type {
+  margin-right: 15px;
+}
+
+.nav a.active {
+  color: #ffffff;
+  font-weight: bold;
+}

src/app/App.tsx

@@ -1,8 +1,8 @@
-import { Suspense } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router/Router'
 
 import reactLogo from '../assets/react.svg'
 
-import UsersPage from './users/UsersPage'
 import './App.css'
 
 function App() {
@@ -12,9 +12,7 @@ function App() {
             <div>
                 <img src={reactLogo} className="logo react" alt="React logo" />
             </div>
-            <Suspense fallback={<h2>Loading…</h2>}>
-                <UsersPage />
-            </Suspense>
+            <RouterProvider router={router} />
             <p className="read-the-docs">
                 React 18 use() hook showcase
             </p>

src/app/constantineSpeakers/SpeakersList.tsx

@@ -0,0 +1,15 @@
+import { Speaker } from "@/lib/services/speakerService"
+
+type Props = {
+    speakers: Speaker[] | any[]
+}
+
+const SpeakersList = ({ speakers }: Props) => (
+    <section>
+        {speakers.map((user) => (
+            <p key={user.id}>{`${user.name} (${user.lecture})`}</p>
+        ))}
+    </section>
+)
+
+export default SpeakersList

src/app/constantineSpeakers/SpeakersPage.tsx

@@ -0,0 +1,20 @@
+import { use } from 'react'
+
+import { speakerService } from '@/lib/services/speakerService'
+
+import Title from '@/components/Title'
+import UsersList from './SpeakersList'
+
+
+function SpeakersPage() {
+    const speakers = use(speakerService.fetchSpeakers())
+
+    return (
+        <>
+            <Title>React Speakers</Title>
+            <UsersList speakers={speakers} />
+        </>
+    )
+}
+
+export default SpeakersPage

src/app/router/Router.tsx

@@ -0,0 +1,22 @@
+import { createBrowserRouter } from 'react-router-dom'
+
+import Root from './root'
+import UsersPage from '../users/UsersPage'
+import SpeakersPage from '../constantineSpeakers/SpeakersPage'
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Root />,
+        children: [
+            {
+                path: '/',
+                element: <UsersPage />
+            },
+            {
+                path: '/constantine/speakers',
+                element:  <SpeakersPage />
+            }]
+    }]
+)
+

src/app/router/root.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from 'react'
+import { Outlet } from 'react-router-dom'
+
+import Nav from '@/components/Nav'
+
+function Root() {
+    return (
+        <>
+            <Nav />
+            <Suspense fallback={<h2>Loading…</h2>}>
+                <Outlet />
+            </Suspense>
+        </>
+    )
+}
+
+export default Root

src/components/Nav.tsx

@@ -0,0 +1,10 @@
+import { NavLink } from 'react-router-dom'
+
+const Nav = () => (
+    <div className='nav'>
+        <NavLink to='/'>Home</NavLink>
+        <NavLink to='/constantine/speakers'>Constantine Speakers</NavLink>
+    </div>
+)
+
+export default Nav

src/lib/services/speakerService.ts

@@ -45,7 +45,7 @@ class SpeakerService {
                 }
             }
 
-            return speakers
+            return speakers.filter((speaker) => Object.keys(speaker).length);
         } catch (error) {
             throw error
         }