Migrate to React 18 createRoot API (#28256)

* Migrate to React 18 createRoot API Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Discard changes to src/components/views/settings/devices/DeviceDetails.tsx * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Attempt to stabilise test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * legacyRoot? Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-20 13:29:23 +00:00
parent 48fd330dd9
commit ca33d9165a
44 changed files with 719 additions and 731 deletions
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@@ -75,6 +75,7 @@ interface State {
 }

 export default class ForgotPassword extends React.Component<Props, State> {
+    private unmounted = false;
    private reset: PasswordReset;
    private fieldPassword: Field | null = null;
    private fieldPasswordConfirm: Field | null = null;
@@ -108,14 +109,20 @@ export default class ForgotPassword extends React.Component<Props, State> {
        }
    }

+    public componentWillUnmount(): void {
+        this.unmounted = true;
+    }
+
    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<void> {
        try {
            await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(serverConfig.hsUrl, serverConfig.isUrl);
+            if (this.unmounted) return;

            this.setState({
                serverIsAlive: true,
            });
        } catch (e: any) {
+            if (this.unmounted) return;
            const { serverIsAlive, serverDeadError } = AutoDiscoveryUtils.authComponentStateForError(
                e,
                "forgot_password",
--- a/src/vector/init.tsx
+++ b/src/vector/init.tsx
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import React, { StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";

@@ -93,7 +93,9 @@ export async function loadApp(fragParams: {}): Promise<void> {
    function setWindowMatrixChat(matrixChat: MatrixChat): void {
        window.matrixChat = matrixChat;
    }
-    ReactDOM.render(await module.loadApp(fragParams, setWindowMatrixChat), document.getElementById("matrixchat"));
+    const app = await module.loadApp(fragParams, setWindowMatrixChat);
+    const root = createRoot(document.getElementById("matrixchat")!);
+    root.render(app);
 }

 export async function showError(title: string, messages?: string[]): Promise<void> {
@@ -101,11 +103,11 @@ export async function showError(title: string, messages?: string[]): Promise<voi
        /* webpackChunkName: "error-view" */
        "../async-components/structures/ErrorView"
    );
-    ReactDOM.render(
+    const root = createRoot(document.getElementById("matrixchat")!);
+    root.render(
        <StrictMode>
            <ErrorView title={title} messages={messages} />
        </StrictMode>,
-        document.getElementById("matrixchat"),
    );
 }

@@ -114,11 +116,11 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
        /* webpackChunkName: "error-view" */
        "../async-components/structures/ErrorView"
    );
-    ReactDOM.render(
+    const root = createRoot(document.getElementById("matrixchat")!);
+    root.render(
        <StrictMode>
            <UnsupportedBrowserView onAccept={onAccept} />
        </StrictMode>,
-        document.getElementById("matrixchat"),
    );
 }