[package.json] Upgrade react to version 18 (#8188)

Upgrades react to version 18 and upgrade to latest rendering of react. 

Co-authored-by: Laetitia Fesselier <laetitia.fesselier@mail.mcgill.ca>

Author: maltheism

htdocs/js/helpHandler.js

@@ -38,17 +38,16 @@ $(document).ready(function() {
         // Render Markdown in wrap div.
         // If help content is from Markdown helpfile.
         if (content.format === 'markdown') {
-          ReactDOM.render(RMarkdown({content: content.content}), wrap);
+          const root = ReactDOM.createRoot(wrap);
+          root.render(RMarkdown({content: content.content}));
         } else {
           // If help content is from DB.
           wrap.innerHTML = '<hr id=\'help-separator\'>';
           if (content.topic) {
             wrap.innerHTML = '<h3>' + content.topic + '</h3>';
           }
-          ReactDOM.render(
-            RMarkdown({content: content.content}),
-            markdownContent
-          );
+          const root = ReactDOM.createRoot(markdownContent);
+          root.render(RMarkdown({content: content.content}));
           wrap.appendChild(markdownContent);
           if (content.updated) {
             wrap.innerHTML = wrap.innerHTML

modules/acknowledgements/jsx/acknowledgementsIndex.js

@@ -1,3 +1,4 @@
+import {createRoot} from 'react-dom/client';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
@@ -455,12 +456,14 @@ AcknowledgementsIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  ReactDOM.render(
+  const root = createRoot(
+    document.getElementById('lorisworkspace')
+  );
+  root.render(
     <AcknowledgementsIndex
       dataURL={`${loris.BaseURL}/acknowledgements/?format=json`}
       submitURL={`${loris.BaseURL}/acknowledgements/`}
       hasPermission={loris.userHasPermission}
-    />,
-    document.getElementById('lorisworkspace')
+    />
   );
 });

modules/battery_manager/jsx/batteryManagerIndex.js

@@ -1,3 +1,4 @@
+import {createRoot} from 'react-dom/client';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
@@ -501,12 +502,12 @@ BatteryManagerIndex.propTypes = {
 };
 
 window.addEventListener('load', () => {
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('lorisworkspace'));
+  root.render(
     <BatteryManagerIndex
       testEndpoint={`${loris.BaseURL}/battery_manager/testendpoint/`}
       optionEndpoint={`${loris.BaseURL}/battery_manager/testoptionsendpoint`}
       hasPermission={loris.userHasPermission}
-    />,
-    document.getElementById('lorisworkspace')
+    />
   );
 });

modules/behavioural_qc/jsx/behaviouralQCIndex.js

@@ -1,3 +1,4 @@
+import {createRoot} from 'react-dom/client';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {TabPane, Tabs} from 'jsx/Tabs';
@@ -50,10 +51,10 @@ BehaviouralQC.propTypes = {
  * Render Behavioural Quality Control on page load.
  */
 window.addEventListener('load', () => {
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('lorisworkspace'));
+  root.render(
     <BehaviouralQC
       baseURL={loris.BaseURL}
-    />,
-    document.getElementById('lorisworkspace')
+    />
   );
 });

modules/brainbrowser/templates/form_brainbrowser.tpl

@@ -181,5 +181,6 @@
 
 <script>
   var brainBrowserPage = RBrainBrowser();
-  ReactDOM.render(brainBrowserPage, document.getElementById('brainbrowserPage'));
+  const root = ReactDOM.createRoot(document.getElementById('brainbrowserPage'));
+  root.render(brainBrowserPage);
 </script>

modules/candidate_list/jsx/candidateListIndex.js

@@ -1,3 +1,4 @@
+import {createRoot} from 'react-dom/client';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
@@ -383,13 +384,13 @@ CandidateListIndex.propTypes = {
 
 window.addEventListener('load', () => {
   const args = QueryString.get();
-  ReactDOM.render(
+  const root = createRoot(document.getElementById('lorisworkspace'));
+  root.render(
     <CandidateListIndex
       dataURL={`${loris.BaseURL}/candidate_list/?format=json`}
       hasPermission={loris.userHasPermission}
       baseURL={loris.BaseURL}
       betaProfileLink={args['betaprofile']}
-    />,
-    document.getElementById('lorisworkspace')
+    />
   );
 });

modules/candidate_list/jsx/onLoad.js

@@ -1,11 +1,15 @@
 /* global formatColumn */
 
+import {createRoot} from 'react-dom/client';
+import React from 'react';
+
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<DynamicDataTable
-    DataURL={`${loris.BaseURL}/candidate_list/?format=json`}
-    getFormattedCell={formatColumn}
-    freezeColumn="PSCID"
-    />,
-    document.getElementById('datatable')
+  const root = createRoot(document.getElementById('datatable'));
+  root.render(
+    <DynamicDataTable
+      DataURL={`${loris.BaseURL}/candidate_list/?format=json`}
+      getFormattedCell={formatColumn}
+      freezeColumn="PSCID"
+    />
   );
 });

modules/candidate_parameters/jsx/CandidateParameters.js

@@ -1,3 +1,4 @@
+import {createRoot} from 'react-dom/client';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import CandidateInfo from './CandidateInfo';
@@ -130,18 +131,14 @@ CandidateParameters.propTypes = {
 const args = QueryString.get(document.currentScript.src);
 
 window.addEventListener('load', () => {
-  const candidateParameters = (
+  const root = createRoot(document.getElementById('lorisworkspace'));
+  root.render(
     <div className="page-candidate-parameters">
       <CandidateParameters
         Module="candidate_parameters"
         candID={args.candID}
       />
     </div>
   );
-
-  ReactDOM.render(
-    candidateParameters,
-    document.getElementById('lorisworkspace')
-  );
 });
 

modules/candidate_profile/templates/form_candidate_profile.tpl

@@ -74,12 +74,14 @@ window.addEventListener('load', () => {
     }
 
     function displayCards(cards) {
-        ReactDOM.render(
+        const root = ReactDOM.createRoot(
+            document.getElementById('candidatedashboard')
+        );
+        root.render(
             React.createElement(
                 lorisjs.CSSGrid.default,
                 { Cards: cards }
-            ),
-            document.getElementById('candidatedashboard')
+            )
         );
     }