[TRELLO-2905] Migrate to tanstack router (#823)

* [TRELLO-2905] Migrate to tanstack router

* [TRELLO-2905] Migrate to tanstack router

* [TRELLO-2905] Migrate to tanstack router

* [TRELLO-2905] Clean code

* [TRELLO-2905] Clean code

* [TRELLO-2905] Clean code

package.json

@@ -47,6 +47,7 @@
     "@sentry/tracing": "7.120.0",
     "@tanstack/react-query": "^5.61.0",
     "@tanstack/react-query-devtools": "^5.61.0",
+    "@tanstack/react-router": "^1.104.1",
     "axios": "1.7.8",
     "browserslist": "4.24.4",
     "browserslist-to-esbuild": "2.1.1",
@@ -59,21 +60,20 @@
     "react-app-polyfill": "3.0.0",
     "react-dom": "18.3.1",
     "react-hook-form": "7.53.2",
-    "react-router": "7.1.5",
     "recharts": "2.13.3",
     "tailwindcss": "^4.0.5",
     "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@tailwindcss/vite": "^4.0.5",
+    "@tanstack/router-devtools": "^1.104.3",
+    "@tanstack/router-plugin": "^1.104.1",
     "@types/lodash": "4.17.13",
     "@types/node": "22.5.1",
     "@types/qs": "6.9.17",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@types/react-router": "5.1.20",
-    "@types/react-router-dom": "5.3.3",
     "@types/recharts": "1.8.29",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react": "^4.3.4",

src/App.tsx

@@ -1,54 +1,115 @@
-import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material'
-import { QueryClientProvider, useQueryClient } from '@tanstack/react-query'
+import {
+  CircularProgress,
+  CssBaseline,
+  StyledEngineProvider,
+  ThemeProvider,
+} from '@mui/material'
+import { QueryClientProvider, useQuery } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { config } from 'conf/config'
 import { ToastProvider } from 'core/context/toastContext'
 import { queryClient, setQueryClientErrorHandler } from 'queryClient'
 import { useEffect } from 'react'
-import { BrowserRouter } from 'react-router'
-import { AppRoutes } from './AppRoutes'
-import { RedirectHashRouterToBrowserRouter } from './RedirectHashRouterToBrowserRouter'
-import { Layout } from './core/Layout/Layout'
 import { useToast } from './core/context/toastContext'
 import { I18nProvider } from './core/i18n'
 import { muiTheme } from './core/theme'
-import { useLoginManagement } from './core/useLoginManagement'
+import {
+  LoginManagementProvider,
+  useLoginManagement,
+} from './core/useLoginManagement'
 import { Provide } from './shared/Provide'
 import './style.css'
+import { createRouter, RouterProvider } from '@tanstack/react-router'
+import { publicApiSdk } from './core/apiSdkInstances'
+import { CenteredContent } from './shared/CenteredContent'
+import { routeTree } from './routeTree.gen'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import qs from 'qs'
 
-const Router: typeof BrowserRouter = BrowserRouter
+export const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+    // auth will initially be undefined
+    // We'll be passing down the auth state from within a React component
+    loginManagementResult: undefined!,
+  },
+  defaultPreload: 'intent',
+  // Since we're using React Query, we don't want loader calls to ever be stale
+  // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreloadStaleTime: 0,
+  // Legacy parsing / stringify
+  // Because of potential bookmarks / links in emails, we can't use native JSON tanstack router parsing
+  stringifySearch: (record) => {
+    const newQueryString = qs.stringify(record)
+    return newQueryString ? `?${newQueryString}` : ''
+  },
+  parseSearch: (searchStr) => {
+    // arrayLimit raised from 20 to 200 otherwise the departments list may not be parsed correctly
+    return qs.parse(searchStr.replace(/^\?/, ''), {
+      arrayLimit: 200,
+    })
+  },
+})
 
-export const App = () => {
-  return (
-    <Provide
-      providers={[
-        (_) => <QueryClientProvider client={queryClient} children={_} />,
-        (_) => <ThemeProvider theme={muiTheme()} children={_} />,
-        (_) => <StyledEngineProvider children={_} />,
-        (_) => <CssBaseline children={_} />,
-        (_) => <Router children={_} />,
-        (_) => <I18nProvider children={_} />,
-        (_) => <ToastProvider children={_} />,
-      ]}
-    >
-      <AppInsideProviders />
-    </Provide>
-  )
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
 }
 
-const AppInsideProviders = () => {
-  const queryClient = useQueryClient()
+export const App = () => {
   useQueryClientErrorHandlerSetup()
-  const loginManagementResult = useLoginManagement(queryClient)
-  return (
-    <>
-      <RedirectHashRouterToBrowserRouter />
-      <Layout {...{ loginManagementResult }}>
-        <AppRoutes {...{ loginManagementResult }} />
-      </Layout>
-      {config.isDev && <ReactQueryDevtools />}
-    </>
+
+  const _userOnStartup = useQuery(
+    {
+      queryKey: ['getUser'],
+      queryFn: publicApiSdk.authenticate.getUser,
+    },
+    queryClient,
   )
+  const isFetchingUserOnStartup = _userOnStartup.isLoading
+  const userOnStartup = _userOnStartup.data ?? undefined
+
+  if (isFetchingUserOnStartup) {
+    return (
+      <CenteredContent>
+        <CircularProgress />
+      </CenteredContent>
+    )
+  } else {
+    return (
+      <Provide
+        providers={[
+          (_) => <QueryClientProvider client={queryClient} children={_} />,
+          (_) => <ThemeProvider theme={muiTheme()} children={_} />,
+          (_) => <StyledEngineProvider children={_} />,
+          (_) => <CssBaseline children={_} />,
+          (_) => <I18nProvider children={_} />,
+          (_) => <ToastProvider children={_} />,
+          (_) => (
+            <LoginManagementProvider
+              userOnStartup={userOnStartup}
+              router={router}
+              queryClient={queryClient}
+              children={_}
+            />
+          ),
+        ]}
+      >
+        <AppRoutes />
+        {config.isDev && <ReactQueryDevtools />}
+        {config.isDev && <TanStackRouterDevtools router={router} />}
+      </Provide>
+    )
+  }
+}
+
+export const AppRoutes = () => {
+  const loginManagementResult = useLoginManagement()
+
+  return <RouterProvider router={router} context={{ loginManagementResult }} />
 }
 
 function useQueryClientErrorHandlerSetup() {