From 19a240c63f725f232069f43558bfa824de127dd7 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 25 Feb 2025 18:29:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20make=20"not=20found=20?=
 =?UTF-8?q?screen"=20accessible=20again?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With the recent introduction of SDK, the route "not found screen" was broken.
Fixed it.
---
 src/frontend/src/App.tsx | 62 +++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 792f3bd8..b6c432b0 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Switch, Route } from 'wouter'
+import { Switch, Route, useLocation } from 'wouter'
 import { I18nProvider } from 'react-aria-components'
 import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
@@ -15,39 +15,47 @@ import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
 import { SdkCreateButton } from './features/sdk/routes/CreateButton'
 
+const SDK_BASE_ROUTE = '/sdk'
+
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const [location] = useLocation()
+  const isSDKRoute = location.startsWith(SDK_BASE_ROUTE)
+
+  if (isSDKRoute) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={null}>
+          <I18nProvider locale={i18n.language}>
+            <Switch>
+              <Route path={SDK_BASE_ROUTE} nest>
+                <Route path="/create-button">
+                  <SdkCreateButton />
+                </Route>
+              </Route>
+            </Switch>
+          </I18nProvider>
+        </Suspense>
+      </QueryClientProvider>
+    )
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
+      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
-          <Switch>
-            <Route path="/sdk" nest>
-              <Route path="/create-button">
-                <SdkCreateButton />
-              </Route>
-            </Route>
-            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
-            <Route path="*">
-              <AppInitialization />
-              <Layout>
-                {Object.entries(routes).map(([, route], i) => (
-                  <Route
-                    key={i}
-                    path={route.path}
-                    component={route.Component}
-                  />
-                ))}
-              </Layout>
-              <ReactQueryDevtools
-                initialIsOpen={false}
-                buttonPosition="top-left"
-              />
-            </Route>
-
-            <Route component={NotFoundScreen} />
-          </Switch>
+          <Layout>
+            <Switch>
+              {Object.entries(routes).map(([, route], i) => (
+                <Route key={i} path={route.path} component={route.Component} />
+              ))}
+              <Route component={NotFoundScreen} />
+            </Switch>
+          </Layout>
+          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>