Refactor app.tsx and dev.tsx

Author: bbimber

jbrowse/src/client/JBrowse/Browser/app.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
 import View from './Browser';
+import { createRoot } from 'react-dom/client';
+import React from 'react';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<View />, document.getElementById('app'))
+    createRoot(document.getElementById('app')).render(<View />)
 });

jbrowse/src/client/JBrowse/Browser/dev.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
 import View from './Browser';
+import { createRoot } from 'react-dom/client';
+import React from 'react';
 
-const render = () => {
-    ReactDOM.render(<View />, document.getElementById('app'));
-};
-
-render();
+// Need to wait for container element to be available in labkey wrapper before render
+window.addEventListener('DOMContentLoaded', (event) => {
+    createRoot(document.getElementById('app')).render(<View />)
+}, true);

jbrowse/src/client/JBrowse/Search/webpart/app.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { App } from '@labkey/api';
 
 import StandaloneSearch from '../StandaloneSearch';
 
 App.registerApp<any>('jbrowseSearchWebpart', (target: string, sessionId: string) => {
-    ReactDOM.render(
-        <StandaloneSearch sessionId={sessionId} />
-    , document.getElementById(target));
-});
+    createRoot(document.getElementById(target)).render(<StandaloneSearch sessionId={sessionId} />)
+});

jbrowse/src/client/JBrowse/Search/webpart/dev.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { App } from '@labkey/api';
 
 import StandaloneSearch from '../StandaloneSearch';
 
-const render = (target: string, sessionId: string) => {
-    ReactDOM.render(<StandaloneSearch sessionId={sessionId} />, document.getElementById(target));
-};
-
-App.registerApp<any>('jbrowseSearchWebpart', render, true /* hot */);
+App.registerApp<any>('jbrowseSearchWebpart', (target: string, sessionId: string) => {
+    createRoot(document.getElementById(target)).render(<StandaloneSearch sessionId={sessionId} />)
+}, true);

jbrowse/src/client/JBrowse/VariantSearch/app.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VariantTable from './VariantTable';
+import { createRoot } from 'react-dom/client';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<VariantTable/>, document.getElementById('app'))
+    createRoot(document.getElementById('app')).render(<VariantTable />)
 });

jbrowse/src/client/JBrowse/VariantSearch/dev.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VariantTable from './VariantTable';
+import { createRoot } from 'react-dom/client';
 
-const render = () => {
-    ReactDOM.render(<VariantTable />, document.getElementById('app'));
-};
-
-render();
+// Need to wait for container element to be available in labkey wrapper before render
+window.addEventListener('DOMContentLoaded', (event) => {
+    createRoot(document.getElementById('app')).render(<VariantTable />)
+}, true);

jbrowse/src/client/JBrowse/VariantTable/app.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VariantTable from './VariantTable';
+import { createRoot } from 'react-dom/client';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<VariantTable/>, document.getElementById('app'))
+    createRoot(document.getElementById('app')).render(<VariantTable />)
 });

jbrowse/src/client/JBrowse/VariantTable/dev.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VariantTable from './VariantTable';
+import { createRoot } from 'react-dom/client';
 
-const render = () => {
-    ReactDOM.render(<VariantTable />, document.getElementById('app'));
-};
-
-render();
+// Need to wait for container element to be available in labkey wrapper before render
+window.addEventListener('DOMContentLoaded', (event) => {
+    createRoot(document.getElementById('app')).render(<VariantTable />)
+}, true);