Forward and back works without rerendering

This commit is contained in:
Connor Yoh 2025-08-28 11:50:23 +01:00
parent cd6652a48d
commit 2cada1697c
3 changed files with 13 additions and 9 deletions

View File

@ -227,7 +227,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
useNavigationUrlSync( useNavigationUrlSync(
navigationState.selectedTool, navigationState.selectedTool,
handleToolSelect, handleToolSelect,
() => actions.setSelectedTool(null), handleBackToTools,
toolRegistry, toolRegistry,
true true
); );

View File

@ -38,11 +38,11 @@ export function useNavigationUrlSync(
if (!enableSync) return; if (!enableSync) return;
if (selectedTool) { if (selectedTool) {
updateToolRoute(selectedTool, registry); updateToolRoute(selectedTool, registry, false); // Use pushState for user navigation
} else { } else {
// Only clear URL if we're not on the home page already // Only clear URL if we're not on the home page already
if (window.location.pathname !== '/') { if (window.location.pathname !== '/') {
clearToolRoute(); clearToolRoute(false); // Use pushState for user navigation
} }
} }
}, [selectedTool, registry, enableSync]); }, [selectedTool, registry, enableSync]);

View File

@ -48,14 +48,18 @@ export function parseToolRoute(registry: ToolRegistry): ToolRoute {
/** /**
* Update URL and fire analytics pixel * Update URL and fire analytics pixel
*/ */
function updateUrl(newPath: string, searchParams: URLSearchParams): void { function updateUrl(newPath: string, searchParams: URLSearchParams, replace: boolean = false): void {
const currentPath = window.location.pathname; const currentPath = window.location.pathname;
const queryString = searchParams.toString(); const queryString = searchParams.toString();
const fullUrl = newPath + (queryString ? `?${queryString}` : ''); const fullUrl = newPath + (queryString ? `?${queryString}` : '');
// Only update URL and fire pixel if something actually changed // Only update URL and fire pixel if something actually changed
if (currentPath !== newPath || window.location.search !== (queryString ? `?${queryString}` : '')) { if (currentPath !== newPath || window.location.search !== (queryString ? `?${queryString}` : '')) {
window.history.replaceState(null, '', fullUrl); if (replace) {
window.history.replaceState(null, '', fullUrl);
} else {
window.history.pushState(null, '', fullUrl);
}
firePixel(newPath); firePixel(newPath);
} }
} }
@ -63,7 +67,7 @@ function updateUrl(newPath: string, searchParams: URLSearchParams): void {
/** /**
* Update the URL to reflect the current tool selection * Update the URL to reflect the current tool selection
*/ */
export function updateToolRoute(toolId: ToolId, registry: ToolRegistry): void { export function updateToolRoute(toolId: ToolId, registry: ToolRegistry, replace: boolean = false): void {
const tool = registry[toolId]; const tool = registry[toolId];
if (!tool) { if (!tool) {
console.warn(`Tool ${toolId} not found in registry`); console.warn(`Tool ${toolId} not found in registry`);
@ -76,17 +80,17 @@ export function updateToolRoute(toolId: ToolId, registry: ToolRegistry): void {
// Remove tool query parameter since we're using path-based routing // Remove tool query parameter since we're using path-based routing
searchParams.delete('tool'); searchParams.delete('tool');
updateUrl(newPath, searchParams); updateUrl(newPath, searchParams, replace);
} }
/** /**
* Clear tool routing and return to home page * Clear tool routing and return to home page
*/ */
export function clearToolRoute(): void { export function clearToolRoute(replace: boolean = false): void {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
searchParams.delete('tool'); searchParams.delete('tool');
updateUrl('/', searchParams); updateUrl('/', searchParams, replace);
} }
/** /**