Refactor navigation bar into a React Component (#1571)

Author: akarki2005

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 ### 🔧 Internal changes
 
+- Refactored navigation bar into a React component (for the graph, grid and generate pages only - the about page navigation bar is still rendered using Blaze)
+
 ## [0.7.1] - 2025-06-16
 
 ### ✨ New features/enhancements

app/Controllers/Generate.hs

@@ -24,7 +24,7 @@ generateResponse =
         masterTemplate "Courseography - Generate"
                     []
                     (do
-                        header "generate-prerequisites"
+                        H.div ! A.id "navbar" $ ""
                         generatePrerequisites
                     )
                     generateScripts

app/Controllers/Graph.hs

@@ -4,7 +4,7 @@ import Control.Monad.IO.Class (liftIO)
 import Data.Aeson (decode, object, (.=))
 import Data.Maybe (fromMaybe)
 import Happstack.Server (Response, ServerPart, look, lookBS, lookText', ok, toResponse)
-import MasterTemplate (header, masterTemplate)
+import MasterTemplate (masterTemplate)
 import Scripts (graphScripts)
 import Text.Blaze ((!))
 import qualified Text.Blaze.Html5 as H
@@ -24,7 +24,7 @@ graphResponse =
     masterTemplate "Courseography - Graph"
                 []
                 (do
-                    header "graph"
+                    H.div ! A.id "navbar" $ ""
                     H.div ! A.id "container" $ ""
                 )
                 graphScripts

app/Controllers/Timetable.hs

@@ -33,7 +33,8 @@ gridResponse =
     ok $ toResponse $
         masterTemplate "Courseography - Grid"
             []
-            (do header "grid"
+            (do
+                H.div ! A.id "navbar" $ ""
                 H.div ! A.id "grid-body"! A.class_ "row main" $ ""
             )
             timetableScripts

js/components/common/NavBar.js.jsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+/**
+ * NavBar component.
+ */
+export function NavBar({ selected_page }) {
+  const isActive = page => (page === selected_page ? "selected-page" : undefined)
+
+  return (
+    <nav className="row header">
+      {/* Courseography Logo (also functions as an additional link to graph page) */}
+      <div className="nav-left">
+        <a href="/graph">
+          <img
+            id="courseography-header"
+            src="/static/res/img/logo.png"
+            alt="Courseography"
+            data-context={selected_page}
+          />
+        </a>
+      </div>
+
+      {/* Navigation links */}
+      <div className="nav-middle">
+        <ul id="nav-links">
+          <li id="nav-graph" className={isActive("graph")}>
+            <a href="/graph">Graph</a>
+          </li>
+          <li id="nav-grid" className={isActive("grid")}>
+            <a href="/grid">Grid</a>
+          </li>
+          <li id="nav-generate" className={isActive("generate")}>
+            <a href="/generate">Generate (beta)</a>
+          </li>
+          <li id="nav-about" className={isActive("about")}>
+            <a href="/about">About</a>
+          </li>
+        </ul>
+      </div>
+
+      {/* Export button (graph/grid only) */}
+      <div className="nav-right">
+        {(selected_page === "graph" || selected_page === "grid") && (
+          <button id="nav-export">
+            <img src="/static/res/ico/export.png" alt="Export" />
+          </button>
+        )}
+      </div>
+    </nav>
+  )
+}

js/components/common/__tests__/NavBar.test.js

@@ -0,0 +1,34 @@
+import React from "react"
+import { render, screen, cleanup } from "@testing-library/react"
+import { NavBar } from "../NavBar.js.jsx"
+
+describe("test that navbar logo and items render correctly", () => {
+  beforeEach(() => cleanup())
+
+  it("displays Courseography logo and nav items", async () => {
+    render(<NavBar selected_page="graph" />)
+    await screen.findAllByText("Graph")
+    await screen.findAllByText("Grid")
+    await screen.findAllByText("Generate (beta)")
+    await screen.findAllByText("About")
+  })
+})
+
+describe("test conditional rendering of the export button", () => {
+  beforeEach(() => cleanup())
+
+  it("renders export button on the graph page", async () => {
+    render(<NavBar selected_page="graph" />)
+    await screen.findByAltText("Export")
+  })
+
+  it("renders export button on the grid page", async () => {
+    render(<NavBar selected_page="grid" />)
+    await screen.findByAltText("Export")
+  })
+
+  it("does not render export button on the generate page", () => {
+    render(<NavBar selected_page="generate" />)
+    expect(screen.queryByAltText("Export")).toBeNull()
+  })
+})

js/components/generate/generate.jsx

@@ -1,5 +1,10 @@
 import { createRoot } from "react-dom/client"
 import GenerateForm from "./GenerateForm.js"
+import { NavBar } from "../common/NavBar.js.jsx"
+
+const navbar = document.getElementById("navbar")
+const navbarRoot = createRoot(navbar)
+navbarRoot.render(<NavBar selected_page="generate" />)
 
 const container = document.getElementById("generateRoot")
 const root = createRoot(container)

js/components/graph/main.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { createRoot } from "react-dom/client"
 import Container from "./Container"
+import { NavBar } from "../common/NavBar.js.jsx"
 
 import {
   AllCommunityModule,
@@ -16,6 +17,10 @@ provideGlobalGridOptions({ theme: "legacy" })
 
 // The "main"
 document.addEventListener("DOMContentLoaded", () => {
+  const navbar = document.getElementById("navbar")
+  const navbarRoot = createRoot(navbar)
+  navbarRoot.render(<NavBar selected_page="graph" />)
+
   const container = document.getElementById("container")
   const root = createRoot(container)
   root.render(<Container start_blank={false} edit={false} />)

js/components/grid/grid.js.jsx

@@ -11,6 +11,7 @@ import {
   ModuleRegistry,
   provideGlobalGridOptions,
 } from "ag-grid-community"
+import { NavBar } from "../common/NavBar.js.jsx"
 
 // Register all community features
 ModuleRegistry.registerModules([AllCommunityModule])
@@ -179,6 +180,10 @@ function Grid(props) {
   )
 }
 
+const navbar = document.getElementById("navbar")
+const navbarRoot = createRoot(navbar)
+navbarRoot.render(<NavBar selected_page="grid" />)
+
 const container = document.getElementById("grid-body")
 const root = createRoot(container)
 root.render(<Grid />)