[Glitch] Upgrade to React 18

Port 8d6aea3326 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/packs/admin.jsx

@@ -1,7 +1,7 @@
 import 'packs/public-path';
 import ready from 'flavours/glitch/ready';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 ready(() => {
   [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
@@ -10,11 +10,13 @@ ready(() => {
 
     import('flavours/glitch/containers/admin_component').then(({ default: AdminComponent }) => {
       return import('flavours/glitch/components/admin/' + componentName).then(({ default: Component }) => {
-        ReactDOM.render((
+        const root = createRoot(element);
+
+        root.render (
           <AdminComponent locale={locale}>
             <Component {...componentProps} />
-          </AdminComponent>
-        ), element);
+          </AdminComponent>,
+        );
       });
     }).catch(error => {
       console.error(error);

app/javascript/flavours/glitch/packs/public.jsx

@@ -11,7 +11,7 @@ import { delegate }  from '@rails/ujs';
 import emojify  from 'flavours/glitch/features/emoji/emoji';
 import { getLocale }  from 'locales';
 import React  from 'react';
-import ReactDOM  from 'react-dom';
+import { createRoot }  from 'react-dom/client';
 import { createBrowserHistory }  from 'history';
 
 const messages = defineMessages({
@@ -130,7 +130,8 @@ function main() {
 
           const content = document.createElement('div');
 
-          ReactDOM.render(<MediaContainer locale={locale} components={reactComponents} />, content);
+          const root = createRoot(content);
+          root.render(<MediaContainer locale={locale} components={reactComponents} />);
           document.body.appendChild(content);
           scrollToDetailedStatus();
         })

app/javascript/flavours/glitch/packs/share.jsx

@@ -1,9 +1,9 @@
 import 'packs/public-path';
 import { loadPolyfills } from 'flavours/glitch/polyfills';
+import ready from 'flavours/glitch/ready';
 import ComposeContainer from 'flavours/glitch/containers/compose_container';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ready from 'flavours/glitch/ready';
+import { createRoot } from 'react-dom/client';
 
 function loaded() {
   const mountNode = document.getElementById('mastodon-compose');
@@ -13,7 +13,8 @@ function loaded() {
     if(!attr) return;
 
     const props = JSON.parse(attr);
-    ReactDOM.render(<ComposeContainer {...props} />, mountNode);
+    const root = createRoot(mountNode);
+    root.render(<ComposeContainer {...props} />);
   }
 }