remove theme hook from root layout

VasilyStrelyaev · VasilyStrelyaev · commit 537ad98074d4 · 2025-04-22T12:36:27.000+03:00
diff --git a/packages/devextreme-cli/src/templates/nextjs/application/src/app/layout.tsx b/packages/devextreme-cli/src/templates/nextjs/application/src/app/layout.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { usePathname } from 'next/navigation';
 import LoadPanel from 'devextreme-react/load-panel';
-import { AuthProvider, useAuth} from '@/contexts/auth';
-import { ThemeContext, useThemeContext} from "@/theme";
+import { AuthProvider, useAuth } from '@/contexts/auth';
+import { ThemeProvider } from "@/theme";
 
 function Page({ children }) {
   const { loading } = useAuth();
@@ -16,21 +15,18 @@ function Page({ children }) {
 }
 
 export default function RootLayout({ children }) {
-  const themeContext = useThemeContext();
-  const pathname  = usePathname ();
-
   return (
     <html lang="en">
     <title>NextJs Dx App</title>
       <body className="dx-viewport">
-        <ThemeContext.Provider value={themeContext}>
+        <ThemeProvider>
           <AuthProvider>
             <div className='app'>
-              <Page key={pathname}>{children}</Page>
+              <Page>{children}</Page>
             </div>
           </AuthProvider>
-        </ThemeContext.Provider>
-        </body>
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx b/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx
@@ -54,3 +54,13 @@ export function useThemeContext() {
 }
 
 export const ThemeContext = React.createContext<%=#isTypeScript%><ReturnType<typeof useThemeContext> | null><%=/isTypeScript%>(null);
+
+export const ThemeProvider = ({ children }<%=#isTypeScript%>: React.PropsWithChildren<%=/isTypeScript%>) => {
+  const themeContext = useThemeContext();
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      { children }
+    </ThemeContext.Provider>
+  );
+};
