Fix React upgrade regression (#8651)

Fix all potential errors similar to the one solved by d4cf493 by chaining render call instead of using a const. Fixes #8578
aces · Apr 25, 2023 · 9941176 · 9941176
1 parent 30935db
commit 9941176
Show file tree

Hide file tree

Showing 47 changed files with 142 additions and 109 deletions.
diff --git a/modules/acknowledgements/jsx/acknowledgementsIndex.js b/modules/acknowledgements/jsx/acknowledgementsIndex.js
@@ -456,10 +456,9 @@ AcknowledgementsIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(
+  createRoot(
     document.getElementById('lorisworkspace')
-  );
-  root.render(
+  ).render(
     <AcknowledgementsIndex
       dataURL={`${loris.BaseURL}/acknowledgements/?format=json`}
       submitURL={`${loris.BaseURL}/acknowledgements/`}

diff --git a/modules/battery_manager/jsx/batteryManagerIndex.js b/modules/battery_manager/jsx/batteryManagerIndex.js
@@ -504,8 +504,9 @@ BatteryManagerIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <BatteryManagerIndex
       testEndpoint={`${loris.BaseURL}/battery_manager/testendpoint/`}
       optionEndpoint={`${loris.BaseURL}/battery_manager/testoptionsendpoint`}

diff --git a/modules/behavioural_qc/jsx/behaviouralQCIndex.js b/modules/behavioural_qc/jsx/behaviouralQCIndex.js
@@ -51,8 +51,9 @@ BehaviouralQC.propTypes = {
  * Render Behavioural Quality Control on page load.
  */
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <BehaviouralQC
       baseURL={loris.BaseURL}
     />

diff --git a/modules/brainbrowser/templates/form_brainbrowser.tpl b/modules/brainbrowser/templates/form_brainbrowser.tpl
@@ -180,7 +180,7 @@
 </div>
 
 <script>
-  var brainBrowserPage = RBrainBrowser();
-  const root = ReactDOM.createRoot(document.getElementById('brainbrowserPage'));
-  root.render(brainBrowserPage);
+  ReactDOM.createRoot(
+    document.getElementById('brainbrowserPage')
+  ).render(RBrainBrowser());
 </script>
diff --git a/modules/candidate_list/jsx/candidateListIndex.js b/modules/candidate_list/jsx/candidateListIndex.js
@@ -386,8 +386,9 @@ CandidateListIndex.propTypes = {
 
 window.addEventListener('load', () => {
   const args = QueryString.get();
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <CandidateListIndex
       dataURL={`${loris.BaseURL}/candidate_list/?format=json`}
       hasPermission={loris.userHasPermission}

diff --git a/modules/candidate_list/jsx/onLoad.js b/modules/candidate_list/jsx/onLoad.js
@@ -4,8 +4,9 @@ import {createRoot} from 'react-dom/client';
 import React from 'react';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const root = createRoot(document.getElementById('datatable'));
-  root.render(
+  createRoot(
+    document.getElementById('datatable')
+  ).render(
     <DynamicDataTable
       DataURL={`${loris.BaseURL}/candidate_list/?format=json`}
       getFormattedCell={formatColumn}

diff --git a/modules/candidate_parameters/jsx/CandidateParameters.js b/modules/candidate_parameters/jsx/CandidateParameters.js
@@ -131,8 +131,9 @@ CandidateParameters.propTypes = {
 const args = QueryString.get(document.currentScript.src);
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <div className="page-candidate-parameters">
       <CandidateParameters
         Module="candidate_parameters"

diff --git a/modules/candidate_profile/templates/form_candidate_profile.tpl b/modules/candidate_profile/templates/form_candidate_profile.tpl
@@ -74,10 +74,9 @@ window.addEventListener('load', () => {
     }
 
     function displayCards(cards) {
-        const root = ReactDOM.createRoot(
+        ReactDOM.createRoot(
             document.getElementById('candidatedashboard')
-        );
-        root.render(
+        ).render(
             React.createElement(
                 lorisjs.CSSGrid.default,
                 { Cards: cards }

diff --git a/modules/conflict_resolver/jsx/conflict_resolver.js b/modules/conflict_resolver/jsx/conflict_resolver.js
@@ -72,7 +72,8 @@ class ConflictResolver extends Component {
 }
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(<ConflictResolver />);
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(<ConflictResolver />);
 });
 
diff --git a/modules/create_timepoint/jsx/createTimepointIndex.js b/modules/create_timepoint/jsx/createTimepointIndex.js
@@ -454,8 +454,9 @@ CreateTimepoint.propTypes = {
  * Render create_timepoint on page load.
  */
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <CreateTimepoint
       baseURL={loris.BaseURL}
     />

diff --git a/modules/data_release/jsx/dataReleaseIndex.js b/modules/data_release/jsx/dataReleaseIndex.js
@@ -270,8 +270,9 @@ DataReleaseIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <DataReleaseIndex
       dataURL={`${loris.BaseURL}/data_release/?format=json`}
       hasPermission={loris.userHasPermission}

diff --git a/modules/datadict/jsx/dataDictIndex.js b/modules/datadict/jsx/dataDictIndex.js
@@ -218,8 +218,9 @@ DataDictIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <DataDictIndex
       dataURL={`${loris.BaseURL}/datadict/?format=binary`}
       fieldsURL={`${loris.BaseURL}/datadict/fields`}

diff --git a/modules/dicom_archive/jsx/dicom_archive.js b/modules/dicom_archive/jsx/dicom_archive.js
@@ -189,8 +189,9 @@ DicomArchive.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <DicomArchive dataURL={loris.BaseURL + '/dicom_archive/?format=json'}/>
   );
 });
diff --git a/modules/dictionary/jsx/dataDictIndex.js b/modules/dictionary/jsx/dataDictIndex.js
@@ -335,8 +335,9 @@ DataDictIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <DataDictIndex
       dataURL={`${loris.BaseURL}/dictionary/?format=json`}
       BaseURL={loris.BaseURL}

diff --git a/modules/document_repository/jsx/docIndex.js b/modules/document_repository/jsx/docIndex.js
@@ -436,8 +436,9 @@ DocIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <div className="page-document">
       <DocIndex
         dataURL={`${loris.BaseURL}/document_repository/?format=json`}

diff --git a/modules/document_repository/jsx/editFormIndex.js b/modules/document_repository/jsx/editFormIndex.js
@@ -5,8 +5,9 @@ const pageURL = window.location.href;
 const id = pageURL.substr(pageURL.lastIndexOf('/') + 1);
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <div className="page-edit-form">
       <div className="row">
         <div className="col-md-9 col-lg-7">

diff --git a/modules/dqt/jsx/react.app.js b/modules/dqt/jsx/react.app.js
@@ -1544,8 +1544,9 @@ DataQueryApp.defaultProps = {
  * Render DataQueryApp on page load.
  */
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <DataQueryApp
       baseURL={loris.BaseURL}
     />

diff --git a/modules/electrophysiology_browser/jsx/electrophysiologyBrowserIndex.js b/modules/electrophysiology_browser/jsx/electrophysiologyBrowserIndex.js
@@ -170,8 +170,9 @@ ElectrophysiologyBrowserIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <ElectrophysiologyBrowserIndex
       dataURL={`${loris.BaseURL}/electrophysiology_browser/?format=json`}
     />

diff --git a/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js b/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js
@@ -539,9 +539,11 @@ window.onload = function() {
   rootDOM.appendChild(EEGSessionViewAppDOM);
 
   // Render the React Components.
-  const mainRoot = createRoot(document.getElementById('eegSessionView'));
-  mainRoot.render(eegSessionView);
+  createRoot(
+    document.getElementById('eegSessionView')
+  ).render(eegSessionView);
 
-  const sidebarRoot = createRoot(document.getElementById('eegSidebar'));
-  sidebarRoot.render(eegSidebar);
+  createRoot(
+    document.getElementById('eegSidebar')
+  ).render(eegSidebar);
 };
diff --git a/modules/electrophysiology_uploader/jsx/ElectrophysiologyUploader.js b/modules/electrophysiology_uploader/jsx/ElectrophysiologyUploader.js
@@ -80,10 +80,9 @@ ElectrophysiologyUploader.propTypes = {
  * Render imaging_uploader on page load
  */
 document.addEventListener('DOMContentLoaded', function() {
-  const root = createRoot(
+  createRoot(
     document.getElementById('lorisworkspace')
-  );
-  root.render(
+  ).render(
     <ElectrophysiologyUploader
       Module='imaging_uploader'
       DataURL={loris.BaseURL + '/electrophysiology_uploader'}

diff --git a/modules/examiner/jsx/examinerIndex.js b/modules/examiner/jsx/examinerIndex.js
@@ -319,8 +319,9 @@ ExaminerIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <ExaminerIndex
       dataURL={`${loris.BaseURL}/examiner/?format=json`}
       submitURL={`${loris.BaseURL}/examiner/addExaminer`}

diff --git a/modules/genomic_browser/jsx/genomicBrowserIndex.js b/modules/genomic_browser/jsx/genomicBrowserIndex.js
@@ -66,8 +66,9 @@ GenomicBrowser.propTypes = {
  * Render Genomic Browser on page load.
  */
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <GenomicBrowser
       baseURL={loris.BaseURL}
     />

diff --git a/modules/help_editor/jsx/help_editor.js b/modules/help_editor/jsx/help_editor.js
@@ -130,8 +130,9 @@ HelpEditor.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <HelpEditor
       Module="help_editor"
       dataURL={loris.BaseURL + '/help_editor/?format=json'}

diff --git a/modules/help_editor/templates/form_edit_help_content.tpl b/modules/help_editor/templates/form_edit_help_content.tpl
@@ -1,10 +1,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-      const app = document.getElementById('app');
-      const root = ReactDOM.createRoot(
+      ReactDOM.createRoot(
           document.getElementById('lorisworkspace')
-      );
-      root.render(
+      ).render(
           React.createElement(RHelpEditorForm, {
             title:      "{$title}",
             content:    `{$content}`,

diff --git a/modules/imaging_browser/jsx/imagingBrowserIndex.js b/modules/imaging_browser/jsx/imagingBrowserIndex.js
@@ -199,8 +199,9 @@ ImagingBrowserIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <ImagingBrowserIndex
       dataURL={`${loris.BaseURL}/imaging_browser/?format=json`}
     />

diff --git a/modules/imaging_browser/templates/form_viewSession.tpl b/modules/imaging_browser/templates/form_viewSession.tpl
@@ -18,10 +18,9 @@
       {section name=file loop=$files}
           <div id="image-{$files[file].FileID}"></div>
           <script>
-            const image_{$files[file].FileID}_root = ReactDOM.createRoot(
+            ReactDOM.createRoot(
               document.getElementById("image-{$files[file].FileID}")
-            );
-            image_{$files[file].FileID}_root.render(
+            ).render(
               RImagePanel({
                 'BaseURL' : "{$baseurl}",
 

diff --git a/modules/imaging_qc/jsx/imagingQCIndex.js b/modules/imaging_qc/jsx/imagingQCIndex.js
@@ -230,8 +230,9 @@ ImagingQCIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <ImagingQCIndex
       ImgDataURL={`${loris.BaseURL}/imaging_qc/?format=json`}
       hasPermission={loris.userHasPermission}

diff --git a/modules/imaging_uploader/jsx/index.js b/modules/imaging_uploader/jsx/index.js
@@ -6,8 +6,9 @@ import React from 'react';
  * Render imaging_uploader on page load
  */
 document.addEventListener('DOMContentLoaded', function() {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <div className='page-imaging-uploader'>
       <ImagingUploader
         Module='imaging_uploader'

diff --git a/modules/instrument_builder/templates/form_instrument_builder.tpl b/modules/instrument_builder/templates/form_instrument_builder.tpl
@@ -11,7 +11,7 @@ table th {
 }
 </style>
 <script>
-    var builderApp = RInstrumentBuilderApp();
-    const root = ReactDOM.createRoot(document.getElementById("builder"));
-    root.render(builderApp);
+    ReactDOM.createRoot(
+        document.getElementById("builder")
+    ).render(RInstrumentBuilderApp());
 </script>
diff --git a/modules/instrument_manager/jsx/instrumentManagerIndex.js b/modules/instrument_manager/jsx/instrumentManagerIndex.js
@@ -334,8 +334,9 @@ PermissionSelect.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <InstrumentManagerIndex
       BaseURL={loris.BaseURL}
       dataURL={`${loris.BaseURL}/instrument_manager/?format=json`}

diff --git a/modules/issue_tracker/jsx/index.js b/modules/issue_tracker/jsx/index.js
@@ -7,8 +7,9 @@ import React from 'react';
  */
 window.addEventListener('load', () => {
   const id = location.href.split('/issue/')[1];
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <IssueForm
       Module='issue_tracker'
       DataURL={loris.BaseURL

diff --git a/modules/issue_tracker/jsx/issueTrackerIndex.js b/modules/issue_tracker/jsx/issueTrackerIndex.js
@@ -281,8 +281,9 @@ IssueTrackerIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  const root = createRoot(document.getElementById('lorisworkspace'));
-  root.render(
+  createRoot(
+    document.getElementById('lorisworkspace')
+  ).render(
     <IssueTrackerIndex
       dataURL={`${loris.BaseURL}/issue_tracker/?format=json`}
       hasPermission={loris.userHasPermission}