Refactor code structure for improved readability and maintainability

Signed-off-by: Andre Bossard <anbossar@microsoft.com>

Author: abossard

debug-screenshot.png

@@ -14,7 +14,8 @@
     "@fluentui/react-components": "^9.47.0",
     "@fluentui/react-icons": "^2.0.239",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.9.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
@@ -23,4 +24,4 @@
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.1.0"
   }
-}
+}

frontend/package.json

@@ -7,23 +7,23 @@
  * - Clear interfaces: Props and state flow is explicit
  */
 
-import { useState } from 'react'
 import {
   makeStyles,
-  tokens,
-  TabList,
+  Subtitle1,
   Tab,
+  TabList,
   Text,
-  Subtitle1,
+  tokens,
 } from '@fluentui/react-components'
 import {
   Home24Regular,
-  TaskListLtr24Regular,
   Info24Regular,
+  TaskListLtr24Regular,
 } from '@fluentui/react-icons'
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import About from './components/About'
 import Dashboard from './features/dashboard/Dashboard'
 import TaskList from './features/tasks/TaskList'
-import About from './components/About'
 
 const useStyles = makeStyles({
   app: {
@@ -57,21 +57,14 @@ const useStyles = makeStyles({
 
 export default function App() {
   const styles = useStyles()
-  const [selectedTab, setSelectedTab] = useState('dashboard')
-
-  // Render content based on selected tab (CALCULATION)
-  const renderContent = () => {
-    switch (selectedTab) {
-      case 'dashboard':
-        return <Dashboard />
-      case 'tasks':
-        return <TaskList />
-      case 'about':
-        return <About />
-      default:
-        return <Dashboard />
-    }
-  }
+  const location = useLocation()
+  const navigate = useNavigate()
+  const tabs = [
+    { value: 'dashboard', label: 'Dashboard', icon: <Home24Regular />, path: '/dashboard', testId: 'tab-dashboard' },
+    { value: 'tasks', label: 'Tasks', icon: <TaskListLtr24Regular />, path: '/tasks', testId: 'tab-tasks' },
+    { value: 'about', label: 'About', icon: <Info24Regular />, path: '/about', testId: 'tab-about' },
+  ]
+  const activeTab = tabs.find((tab) => location.pathname.startsWith(tab.path))?.value ?? 'dashboard'
 
   return (
     <div className={styles.app}>
@@ -84,23 +77,32 @@ export default function App() {
 
       <nav className={styles.nav}>
         <TabList
-          selectedValue={selectedTab}
-          onTabSelect={(_, data) => setSelectedTab(data.value)}
+          selectedValue={activeTab}
+          onTabSelect={(_, data) => {
+            const selected = tabs.find((tab) => tab.value === data.value)
+            if (selected) {
+              navigate(selected.path)
+            }
+          }}
           size="large"
         >
-          <Tab value="dashboard" icon={<Home24Regular />} data-testid="tab-dashboard">
-            Dashboard
-          </Tab>
-          <Tab value="tasks" icon={<TaskListLtr24Regular />} data-testid="tab-tasks">
-            Tasks
-          </Tab>
-          <Tab value="about" icon={<Info24Regular />} data-testid="tab-about">
-            About
-          </Tab>
+          {tabs.map((tab) => (
+            <Tab key={tab.value} value={tab.value} icon={tab.icon} data-testid={tab.testId}>
+              {tab.label}
+            </Tab>
+          ))}
         </TabList>
       </nav>
 
-      <main className={styles.content}>{renderContent()}</main>
+      <main className={styles.content}>
+        <Routes>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/tasks" element={<TaskList />} />
+          <Route path="/about" element={<About />} />
+          <Route path="*" element={<Navigate to="/dashboard" replace />} />
+        </Routes>
+      </main>
     </div>
   )
 }

frontend/src/App.jsx

@@ -1,13 +1,16 @@
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <FluentProvider theme={webLightTheme}>
-      <App />
-    </FluentProvider>
+    <BrowserRouter>
+      <FluentProvider theme={webLightTheme}>
+        <App />
+      </FluentProvider>
+    </BrowserRouter>
   </React.StrictMode>,
 )

frontend/src/main.jsx

@@ -14,6 +14,14 @@ function uniqueTitle(prefix) {
   return `${prefix} ${suffix}`;
 }
 
+const APP_URL = process.env.E2E_APP_URL || "http://localhost:3001";
+
+async function visit(page, path = "/") {
+  const url = path === "/" ? APP_URL : `${APP_URL}${path}`;
+  await page.goto(url, { waitUntil: "load" });
+  await waitForAppToLoad(page);
+}
+
 // Helper function to wait for React app to load
 async function waitForAppToLoad(page) {
   // Listen for console errors
@@ -35,8 +43,7 @@ async function waitForAppToLoad(page) {
 
 test.describe("Dashboard - Time is on our side", () => {
   test("shows the live server time ticking away", async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
+    await visit(page);
 
     // Check that we're on the dashboard
     await expect(page.getByTestId("tab-dashboard")).toHaveAttribute(
@@ -54,8 +61,7 @@ test.describe("Dashboard - Time is on our side", () => {
   });
 
   test("displays server date from API", async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
+    await visit(page);
 
     // The server knows what day it is!
     const dateElement = page.getByTestId("server-date");
@@ -77,10 +83,7 @@ test.describe("Dashboard - Time is on our side", () => {
 
 test.describe("Task Management - Getting stuff done", () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
-    // Navigate to Tasks tab
-    await page.getByTestId("tab-tasks").click();
+    await visit(page, "/tasks");
     await expect(page.getByTestId("tab-tasks")).toHaveAttribute(
       "aria-selected",
       "true"
@@ -252,8 +255,7 @@ test.describe("Task Management - Getting stuff done", () => {
 
 test.describe("Navigation - Exploring the app", () => {
   test("navigates between tabs smoothly", async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
+    await visit(page);
 
     // Start on Dashboard
     await expect(page.getByTestId("tab-dashboard")).toHaveAttribute(
@@ -286,14 +288,35 @@ test.describe("Navigation - Exploring the app", () => {
   });
 
   test("shows the awesome project title", async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
+    await visit(page);
 
     // Our glorious header should be visible
     await expect(
       page.getByText("Quart + React Demo Application")
     ).toBeVisible();
   });
+
+  test("supports direct URL navigation for each tab", async ({ page }) => {
+    await visit(page, "/tasks");
+    await expect(page.getByTestId("tab-tasks")).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
+    await expect(page.getByText("Task Management")).toBeVisible();
+
+    await visit(page, "/about");
+    await expect(page.getByTestId("tab-about")).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
+    await expect(page.getByText("About This Project")).toBeVisible();
+
+    await visit(page, "/dashboard");
+    await expect(page.getByTestId("tab-dashboard")).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
+  });
 });
 
 // ============================================================================
@@ -302,9 +325,7 @@ test.describe("Navigation - Exploring the app", () => {
 
 test.describe("About Page - All the good info", () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:3001", { waitUntil: "load" });
-    await waitForAppToLoad(page);
-    await page.getByTestId("tab-about").click();
+    await visit(page, "/about");
   });
 
   test("displays project information", async ({ page }) => {