From 26037cf511d1536c5aee0b66ae6dd69aa916f782 Mon Sep 17 00:00:00 2001
From: Luca Sacchi Ricciardi <luca@lucasacchi.net>
Date: Tue, 7 Apr 2026 23:54:58 +0200
Subject: [PATCH] fix: move OnboardingProvider inside BrowserRouter to fix
 useLocation error

The OnboardingProvider component uses useLocation() from react-router,
but it was placed outside the BrowserRouter in the component tree.
This caused the error:
'useLocation() may be used only in the context of a <Router> component.'

Fixed by:
1. Creating a new RouterProviders wrapper component inside BrowserRouter
2. Moving OnboardingProvider, KeyboardShortcutsProvider, and CommandPalette
   inside the RouterProviders (which is inside BrowserRouter)
3. Keeping other providers (I18nProvider, ThemeProvider, QueryProvider, AuthProvider)
   outside BrowserRouter as they don't need router context

This ensures all components that use router hooks are properly wrapped
in the Router context.

Frontend now renders correctly without JavaScript errors.
---
 frontend/src/App.tsx | 67 +++++++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8f31bc4..54eebb9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -33,19 +33,14 @@ function ProtectedLayout() {
   );
 }
 
-// Wrapper for routes with providers
+// Wrapper for routes with providers (outside Router)
 function AppProviders({ children }: { children: React.ReactNode }) {
   return (
     <I18nProvider>
       <ThemeProvider defaultTheme="system">
         <QueryProvider>
           <AuthProvider>
-            <OnboardingProvider>
-              <KeyboardShortcutsProvider>
-                {children}
-                <CommandPalette />
-              </KeyboardShortcutsProvider>
-            </OnboardingProvider>
+            {children}
           </AuthProvider>
         </QueryProvider>
       </ThemeProvider>
@@ -53,33 +48,47 @@ function AppProviders({ children }: { children: React.ReactNode }) {
   );
 }
 
+// Wrapper for providers that need Router context
+function RouterProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <OnboardingProvider>
+      <KeyboardShortcutsProvider>
+        {children}
+        <CommandPalette />
+      </KeyboardShortcutsProvider>
+    </OnboardingProvider>
+  );
+}
+
 function App() {
   return (
     <AppProviders>
       <BrowserRouter>
-        <Suspense fallback={<PageLoader />}>
-          <Routes>
-            {/* Public routes */}
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
-            
-            {/* Protected routes with layout */}
-            <Route path="/" element={<ProtectedLayout />}>
-              <Route index element={<Dashboard />} />
-              <Route path="scenarios" element={<ScenariosPage />} />
-              <Route path="scenarios/:id" element={<ScenarioDetail />} />
-              <Route path="scenarios/:id/reports" element={<Reports />} />
-              <Route path="compare" element={<Compare />} />
-              <Route path="settings/api-keys" element={<ApiKeys />} />
-              <Route path="analytics" element={<AnalyticsDashboard />} />
-            </Route>
-            
-            {/* 404 */}
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </Suspense>
+        <RouterProviders>
+          <Suspense fallback={<PageLoader />}>
+            <Routes>
+              {/* Public routes */}
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              
+              {/* Protected routes with layout */}
+              <Route path="/" element={<ProtectedLayout />}>
+                <Route index element={<Dashboard />} />
+                <Route path="scenarios" element={<ScenariosPage />} />
+                <Route path="scenarios/:id" element={<ScenarioDetail />} />
+                <Route path="scenarios/:id/reports" element={<Reports />} />
+                <Route path="compare" element={<Compare />} />
+                <Route path="settings/api-keys" element={<ApiKeys />} />
+                <Route path="analytics" element={<AnalyticsDashboard />} />
+              </Route>
+              
+              {/* 404 */}
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Suspense>
+        </RouterProviders>
+        <Toaster />
       </BrowserRouter>
-      <Toaster />
     </AppProviders>
   );
 }