fix more components

Author: mchangrh

src/render/ChapterVote.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
 
 export class ChapterVote {
     container: HTMLElement;
     ref: React.RefObject<ChapterVoteComponent>;
+    root: Root;
 
     unsavedState: ChapterVoteState;
 
@@ -19,18 +20,16 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
-        ReactDOM.render(
-            <ChapterVoteComponent ref={this.ref} vote={vote} />,
-            this.container
-        );
+        this.root = createRoot(this.container);
+        this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
     }
 
     getContainer(): HTMLElement {
         return this.container;
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
     }
 

src/render/GenericNotice.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import NoticeComponent from "../components/NoticeComponent";
 
 import Utils from "../utils";
@@ -35,6 +35,7 @@ export default class GenericNotice {
     noticeElement: HTMLDivElement;
     noticeRef: React.MutableRefObject<NoticeComponent>;
     idSuffix: string;
+    root: Root;
 
     constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
         this.noticeRef = React.createRef();
@@ -49,11 +50,13 @@ export default class GenericNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        this.update(options);        
+        this.root = createRoot(this.noticeElement);
+
+        this.update(options);
     }
 
     update(options: NoticeOptions): void {
-        ReactDOM.render(
+        this.root.render(
             <NoticeComponent
                 noticeTitle={options.title}
                 idSuffix={this.idSuffix}
@@ -92,8 +95,7 @@ export default class GenericNotice {
                         </>
                     : null}
 
-            </NoticeComponent>,
-            this.noticeElement
+            </NoticeComponent>
         );
     }
 
@@ -137,7 +139,7 @@ export default class GenericNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }

src/render/RectangleTooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 export interface RectangleTooltipProps {
     text: string, 
@@ -20,7 +20,7 @@ export interface RectangleTooltipProps {
 export class RectangleTooltip {
     text: string;   
     container: HTMLDivElement;
-
+    root: Root;
     timer: NodeJS.Timeout;
 
     constructor(props: RectangleTooltipProps) {
@@ -32,6 +32,7 @@ export class RectangleTooltip {
         this.text = props.text;
         props.fontSize ??= "10px";
 
+
         this.container = document.createElement('div');
         props.htmlId ??= "sponsorRectangleTooltip" + props.text;
         this.container.id = props.htmlId;
@@ -47,7 +48,8 @@ export class RectangleTooltip {
             this.timer = setTimeout(() => this.close(), props.timeout * 1000);
         }
 
-        ReactDOM.render(
+        this.root = createRoot(this.container);
+        this.root.render(
             <div style={{
                 bottom: props.bottomOffset, 
                 left: props.leftOffset,
@@ -81,13 +83,12 @@ export class RectangleTooltip {
 
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
-            </div>,
-            this.container
+            </div>
         )
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);

src/render/SubmissionNotice.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -17,6 +17,8 @@ class SubmissionNotice {
 
     noticeElement: HTMLDivElement;
 
+    root: Root;
+
     constructor(contentContainer: ContentContainer, callback: () => unknown) {
         this.noticeRef = React.createRef();
 
@@ -30,13 +32,13 @@ class SubmissionNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SubmissionNoticeComponent
                 contentContainer={contentContainer}
                 callback={callback} 
                 ref={this.noticeRef}
-                closeListener={() => this.close(false)} />,
-            this.noticeElement
+                closeListener={() => this.close(false)} />
         );
     }
 
@@ -46,7 +48,7 @@ class SubmissionNotice {
 
     close(callRef = true): void {
         if (callRef) this.noticeRef.current.cancel();
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }

src/render/Tooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import { ButtonListener } from "../types";
 
 export interface TooltipProps {
@@ -26,6 +26,7 @@ export class Tooltip {
     container: HTMLDivElement;
 
     timer: NodeJS.Timeout;
+    root: Root;
 
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
@@ -54,8 +55,9 @@ export class Tooltip {
         }
 
         const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
-        
-        ReactDOM.render(
+
+        this.root = createRoot(this.container);
+        this.root.render(
             <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
                 className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
                 <div>
@@ -93,8 +95,7 @@ export class Tooltip {
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
                 : null}
-            </div>,
-            this.container
+            </div>
         )
     }
 
@@ -120,7 +121,7 @@ export class Tooltip {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);