Implement page navigation and routing in the dashboard

build/content-helper/dashboard-page.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-dom-ready', 'wp-element'), 'version' => '12fe4372400030ba8741');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-dom-ready', 'wp-element'), 'version' => 'c1dcd33bfbf33022ed91');

package.json

@@ -39,7 +39,8 @@
 		"@types/js-cookie": "^3.0.6",
 		"@wordpress/dom-ready": "^4.11.0",
 		"js-cookie": "^3.0.5",
-		"lodash.debounce": "^4.0.8"
+		"lodash.debounce": "^4.0.8",
+		"react-router-dom": "^6.28.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.48.2",

src/UI/class-dashboard-page.php

@@ -50,6 +50,34 @@ public function add_dashboard_page_to_menu(): void {
 			$icon,
 			30
 		);
+
+		// Register the subpages.
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Dashboard Page',
+			'Dashboard',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page',
+			'__return_null'
+		);
+
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Traffic Booster',
+			'Traffic Booster',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page#/traffic-booster',
+			'__return_null'
+		);
+
+		add_submenu_page(
+			'parsely-dashboard-page',
+			'Parse.ly Settings',
+			'Settings',
+			Parsely::CAPABILITY, // phpcs:ignore WordPress.WP.Capabilities.Undetermined
+			'parsely-dashboard-page#/settings',
+			'__return_null'
+		);
 	}
 
 	/**

src/content-helper/dashboard-page/dashboard-page.tsx

@@ -2,17 +2,84 @@
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { createRoot } from '@wordpress/element';
+import { createRoot, useEffect } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { HashRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import { DashboardPage, SettingsPage, TrafficBoosterPage } from './pages';
 
 domReady( () => {
 	const root = createRoot(
 		document.getElementById( 'parsely-dashboard-page' ) as Element
 	);
 
 	root.render(
-		<>
-			<h1>Parse.ly</h1>
-			<p>Welcome to the Parse.ly Dashboard page!</p>
-		</>
+		<Router
+			future={ {
+				v7_relativeSplatPath: true,
+				v7_startTransition: true,
+			} }
+		>
+			<ParselyDashboard />
+		</Router>
 	);
 } );
+
+/**
+ * Main component for the Parse.ly dashboard.
+ *
+ * @since 3.18.0
+ *
+ * @class
+ */
+const ParselyDashboard = () => {
+	const location = useLocation();
+
+	/**
+	 * Replaces the first link to have the hash router link.
+	 *
+	 * @since 3.18.0
+	 */
+	useEffect( () => {
+		const firstLink = document.querySelector( '#toplevel_page_parsely-dashboard-page .wp-submenu li a.wp-first-item' );
+		if ( firstLink ) {
+			firstLink.setAttribute( 'href', window.location.pathname + window.location.search + '#/' );
+		}
+	}, [] );
+
+	/**
+	 * Changes the submenus highlight based on the current page.
+	 *
+	 * @since 3.18.0
+	 */
+	useEffect( () => {
+		const submenuItems = document.querySelectorAll( '#toplevel_page_parsely-dashboard-page .wp-submenu li' );
+
+		submenuItems.forEach( ( item ) => {
+			const link = item.querySelector( 'a' );
+			const hashPath = link?.getAttribute( 'href' )?.split( '#' )[ 1 ];
+
+			if ( hashPath === location.pathname ) {
+				item.classList.add( 'current' );
+				link?.blur();
+			} else {
+				item.classList.remove( 'current' );
+			}
+		} );
+	}, [ location ] );
+
+	return (
+		<Routes>
+			<Route path="/" element={ <DashboardPage /> } />
+			<Route path="/traffic-booster" element={ <TrafficBoosterPage /> } />
+			<Route path="/settings" element={ <SettingsPage /> } />
+		</Routes>
+	);
+};
+

src/content-helper/dashboard-page/pages/dashboard/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * The main dashboard page component.
+ *
+ * @since 3.18.0
+ */
+export const DashboardPage = () => {
+	return (
+		<>
+			<h1>Parse.ly Dashboard</h1>
+			<p>Welcome to the main Parse.ly dashboard page.</p>
+		</>
+	);
+};

src/content-helper/dashboard-page/pages/index.tsx

@@ -0,0 +1,3 @@
+export { DashboardPage } from './dashboard/page-component';
+export { TrafficBoosterPage } from './traffic-booster/page-component';
+export { SettingsPage } from './settings/page-component';

src/content-helper/dashboard-page/pages/settings/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * Settings page component.
+ *
+ * @since 3.18.0
+ */
+export const SettingsPage = () => {
+	return (
+		<>
+			<h1>Parse.ly Settings</h1>
+			<p>This is a page for settings.</p>
+		</>
+	);
+};

src/content-helper/dashboard-page/pages/traffic-booster/page-component.tsx

@@ -0,0 +1,13 @@
+/**
+ * Traffic Booster page component.
+ *
+ * @since 3.18.0
+ */
+export const TrafficBoosterPage = () => {
+	return (
+		<>
+			<h1>Traffic Booster</h1>
+			<p>This is where the amazing Traffic Booster implementation will live.</p>
+		</>
+	);
+};