fix: add wrapper for all modals inside of router

chertik77 · Jan 22, 2025 · 580899a · 580899a
1 parent 532d331
commit 580899a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/app/providers/RouteProvider.tsx b/src/app/providers/RouteProvider.tsx
@@ -3,6 +3,7 @@ import {
   createRouter,
   RouterProvider as TanStackRouterProvider
 } from '@tanstack/react-router'
+import { ModalProvider } from 'react-modal-state'
 
 declare module '@tanstack/react-router' {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -13,4 +14,9 @@ declare module '@tanstack/react-router' {
 
 const router = createRouter({ routeTree, defaultPendingMinMs: 0 })
 
-export const RouterProvider = () => <TanStackRouterProvider router={router} />
+export const RouterProvider = () => (
+  <TanStackRouterProvider
+    router={router}
+    Wrap={({ children }) => <ModalProvider>{children}</ModalProvider>}
+  />
+)
diff --git a/src/app/routes/__root.tsx b/src/app/routes/__root.tsx
@@ -21,7 +21,7 @@ import { useAuthStore } from '@/shared/store'
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/react'
-import { ModalProvider, ModalRenderer } from 'react-modal-state'
+import { ModalRenderer } from 'react-modal-state'
 import { Toaster } from 'sonner'
 
 const RootRoute = () => {
@@ -43,18 +43,16 @@ const RootRoute = () => {
         theme={theme === 'dark' ? 'dark' : 'light'}
         className='text-balance'
       />
-      <ModalProvider>
-        <Outlet />
-        <ModalRenderer Component={NewBoardModal} />
-        <ModalRenderer Component={EditBoardModal} />
-        <ModalRenderer Component={AddColumnModal} />
-        <ModalRenderer Component={EditColumnModal} />
-        <ModalRenderer Component={AddCardModal} />
-        <ModalRenderer Component={EditCardModal} />
-        <ModalRenderer Component={NeedHelpModal} />
-        <ModalRenderer Component={EditProfileModal} />
-        <ModalRenderer Component={SidebarMobileModal} />
-      </ModalProvider>
+      <Outlet />
+      <ModalRenderer Component={NewBoardModal} />
+      <ModalRenderer Component={EditBoardModal} />
+      <ModalRenderer Component={AddColumnModal} />
+      <ModalRenderer Component={EditColumnModal} />
+      <ModalRenderer Component={AddCardModal} />
+      <ModalRenderer Component={EditCardModal} />
+      <ModalRenderer Component={NeedHelpModal} />
+      <ModalRenderer Component={EditProfileModal} />
+      <ModalRenderer Component={SidebarMobileModal} />
     </>
   )
 }