Make usage of app wrapper more consistent and fix typescript error

Author: Heiner Pöpping

templates/api-v5/page-ts/src/components/AppWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
+import App from './App';
+
+const AppWrapper = () => {
+    return (
+        <ChaynsProvider>
+            <PageProvider>
+                <App/>
+            </PageProvider>
+        </ChaynsProvider>
+    );
+}
+
+export default AppWrapper;

templates/api-v5/page-ts/src/index.tsx

@@ -1,12 +1,10 @@
 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';
+import AppWrapper from './components/AppWrapper';
 
 try {
-    const root = createRoot(document.querySelector('#root'));
-    root.render(<ChaynsProvider><PageProvider><App /></PageProvider></ChaynsProvider>);
+    const root = createRoot(document.querySelector('#root') as Element);
+    root.render(<AppWrapper/>);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }

templates/api-v5/page/src/components/AppWrapper.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChaynsProvider } from 'chayns-api';
+import { PageProvider } from '@chayns-components/core';
+import App from './App';
+
+const AppWrapper = () => {
+    return (
+        <ChaynsProvider>
+            <PageProvider>
+                <App/>
+            </PageProvider>
+        </ChaynsProvider>
+    )
+}
+
+export default AppWrapper;

templates/api-v5/page/src/index.jsx

@@ -1,13 +1,10 @@
 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';
+import AppWrapper from './components/AppWrapper';
 
 try {
     const root = createRoot(document.querySelector('#root'));
-    root.render(<ChaynsProvider><PageProvider><App /></PageProvider></ChaynsProvider>);
+    root.render(<AppWrapper/>);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }