Replace tapp class with page provider for v5

Heiner Pöpping · Heiner Pöpping · commit 31aa3781c9e8 · 2024-12-05T11:02:55.000+01:00
diff --git a/templates/api-v5/page-module-redux/src/components/AppWrapper.jsx b/templates/api-v5/page-module-redux/src/components/AppWrapper.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './App';
 import store from '../redux-modules';
 import { Provider } from 'react-redux';
 
 const AppWrapper = ({ ...props }) => {
     return (
-        <div className="tapp">
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <ChaynsProvider {...props}>
-                <Provider store={store}>
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        <ChaynsProvider {...props}>
+            <Provider store={store}>
+                <PageProvider>
                     <App/>
-                </Provider>
-            </ChaynsProvider>
-        </div>
+                </PageProvider>
+            </Provider>
+        </ChaynsProvider>
     )
 }
 
diff --git a/templates/api-v5/page-module/src/components/AppWrapper.jsx b/templates/api-v5/page-module/src/components/AppWrapper.jsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
 const AppWrapper = ({ ...props }) => {
     return (
         <div className="tapp">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
             <ChaynsProvider {...props}>
-                <App/>
+                <PageProvider>
+                    <App/>
+                </PageProvider>
             </ChaynsProvider>
         </div>
     )
diff --git a/templates/api-v5/page-redux/src/components/AppWrapper.jsx b/templates/api-v5/page-redux/src/components/AppWrapper.jsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import store from '../redux-modules';
 import App from './App';
 
 const AppWrapper = () => {
     return (
         <ChaynsProvider>
             <Provider store={store}>
-                <App />
+                <PageProvider>
+                    <App />
+                </PageProvider>
             </Provider>
         </ChaynsProvider>
     )
diff --git a/templates/api-v5/page-redux/src/index.html b/templates/api-v5/page-redux/src/index.html
@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div class="tapp" id="root" {{ tapp-style }}></div>
+        <div id="root" {{ tapp-style }}></div>
     </body>
 </html>
diff --git a/templates/api-v5/page-ts-module-redux/src/components/AppWrapper.tsx b/templates/api-v5/page-ts-module-redux/src/components/AppWrapper.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
 const AppWrapper = ({ ...props }) => {
     return (
-        <div className="tapp">
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <ChaynsProvider {...props}>
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        <ChaynsProvider {...props}>
+            <PageProvider>
                 <App/>
-            </ChaynsProvider>
-        </div>
+            </PageProvider>
+        </ChaynsProvider>
     )
 }
 
diff --git a/templates/api-v5/page-ts-module/src/components/AppWrapper.tsx b/templates/api-v5/page-ts-module/src/components/AppWrapper.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
 const AppWrapper = ({ ...props }) => {
     return (
-        <div className="tapp">
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <ChaynsProvider {...props}>
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        <ChaynsProvider {...props}>
+            <PageProvider>
                 <App/>
-            </ChaynsProvider>
-        </div>
+            </PageProvider>
+        </ChaynsProvider>
     )
 }
 
diff --git a/templates/api-v5/page-ts-redux/src/components/AppWrapper.tsx b/templates/api-v5/page-ts-redux/src/components/AppWrapper.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './App';
 import store from '../redux-modules';
 
 const AppWrapper = () => {
     return (
         <ChaynsProvider>
             <Provider store={store}>
-                <App/>
+                <PageProvider>
+                    <App/>
+                </PageProvider>
             </Provider>
         </ChaynsProvider>
     )
diff --git a/templates/api-v5/page-ts-redux/src/index.html b/templates/api-v5/page-ts-redux/src/index.html
@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div class="tapp" id="root" {{ tapp-style }}></div>
+        <div id="root" {{ tapp-style }}></div>
     </body>
 </html>
diff --git a/templates/api-v5/page-ts/src/index.html b/templates/api-v5/page-ts/src/index.html
@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div class="tapp" id="root" {{ tapp-style }}></div>
+        <div id="root" {{ tapp-style }}></div>
     </body>
 </html>
diff --git a/templates/api-v5/page-ts/src/index.tsx b/templates/api-v5/page-ts/src/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 import App from './components/App';
 
 try {
     const root = createRoot(document.querySelector('#root'));
-    root.render(<ChaynsProvider><App /></ChaynsProvider>);
+    root.render(<ChaynsProvider><PageProvider><App /></PageProvider></ChaynsProvider>);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }
diff --git a/templates/api-v5/page/src/index.html b/templates/api-v5/page/src/index.html
@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div class="tapp" id="root" {{ tapp-style }}></div>
+        <div id="root" {{ tapp-style }}></div>
     </body>
 </html>
diff --git a/templates/api-v5/page/src/index.jsx b/templates/api-v5/page/src/index.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
 
 import App from './components/App';
 
 try {
     const root = createRoot(document.querySelector('#root'));
-    root.render(<ChaynsProvider><App /></ChaynsProvider>);
+    root.render(<ChaynsProvider><PageProvider><App /></PageProvider></ChaynsProvider>);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }
diff --git a/templates/api-v5/shared/index.html b/templates/api-v5/shared/index.html
@@ -9,6 +9,6 @@
     <title>{{ package-name }}</title>
 </head>
 <body>
-<div class="tapp" id="root" ></div>
+<div id="root" ></div>
 </body>
 </html>
