Split notice text into a separate component

src/components/NoticeComponent.tsx

@@ -48,10 +48,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         this.startCountdown();
     }
 
-    // forwardRef(props, ref) {
-
-    // }
-
     render() {
         let noticeStyle: React.CSSProperties = {
             zIndex: 50 + this.amountOfPreviousNotices

src/components/NoticeTextSectionComponent.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface NoticeTextSelectionProps {
+    text: string,
+    idSuffix: string
+}
+
+export interface NoticeTextSelectionState {
+
+}
+
+class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionProps, NoticeTextSelectionState> {
+    countdownInterval: NodeJS.Timeout;
+    idSuffix: any;
+
+    amountOfPreviousNotices: number;
+
+    constructor(props: NoticeTextSelectionProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+                className="sponsorTimesInfoMessage">
+                    {this.props.text}
+            </p>
+        );
+    }
+}
+
+export default NoticeTextSelectionComponent;

src/components/SkipNoticeComponent.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import Config from "../config"
 
 import NoticeComponent from "./NoticeComponent";
+import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 
 export interface SkipNoticeProps { 
     UUID: string;
@@ -13,6 +14,8 @@ export interface SkipNoticeProps {
 export interface SkipNoticeState {
     noticeTitle: string,
 
+    messages: string[],
+
     countdownTime: number,
     maxCountdownTime: () => number;
     countdownText: string,
@@ -63,6 +66,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         // Setup state
         this.state = {
             noticeTitle,
+            messages: [],
 
             //the countdown until this notice closes
             maxCountdownTime: () => 4,
@@ -91,10 +95,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 maxCountdownTime={this.state.maxCountdownTime}
                 ref={this.noticeRef}>
 
-                {/* Spacer */}
+                {/* Text Boxes */}
-                <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                {this.getMessageBoxes()}
-                    className="sponsorBlockSpacer">
-                </tr>
               
                 {/* Last Row */}
                 <tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
@@ -150,6 +152,29 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         );
     }
 
+    getMessageBoxes(): JSX.Element[] | JSX.Element {
+        if (this.state.messages.length === 0) {
+            // Add a spacer if there is no text
+            return (
+                <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                    className="sponsorBlockSpacer">
+                </tr>
+            );
+        }
+
+        let elements: JSX.Element[] = [];
+
+        for (let i = 0; i < this.state.messages.length; i++) {
+            elements.push(
+                <NoticeTextSelectionComponent idSuffix={this.idSuffix}
+                    text={this.state.messages[i]}>
+                </NoticeTextSelectionComponent>
+            )
+        }
+
+        return elements;
+    }
+
     unskip() {
         this.contentContainer().unskipSponsorTime(this.UUID);
 
@@ -206,7 +231,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
     afterDownvote() {
         this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
-        this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
+        this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
         
         //remove this sponsor from the sponsors looked up
         //find which one it is
@@ -223,37 +248,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    addNoticeInfoMessage(message: string, message2: string = "") {
+    setNoticeInfoMessage(...messages: string[]) {
-        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        this.setState({
-        if (previousInfoMessage != null) {
+            messages
-            //remove it
+        })
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
-        }
-
-        let previousInfoMessage2 = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix + "2");
-        if (previousInfoMessage2 != null) {
-            //remove it
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage2);
-        }
-        
-        //add info
-        let thanksForVotingText = document.createElement("p");
-        thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
-        thanksForVotingText.className = "sponsorTimesInfoMessage";
-        thanksForVotingText.innerText = message;
-
-        //add element to div
-        document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
-    
-        if (message2 !== undefined) {
-            let thanksForVotingText2 = document.createElement("p");
-            thanksForVotingText2.id = "sponsorTimesInfoMessage" + this.idSuffix + "2";
-            thanksForVotingText2.className = "sponsorTimesInfoMessage";
-            thanksForVotingText2.innerText = message2;
-
-            //add element to div
-            document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
-        }
     }
     
     addVoteButtonInfo(message) {

src/content.ts

@@ -7,6 +7,7 @@ import runThePopup from "./popup";
 
 import PreviewBar from "./js-components/previewBar";
 import SkipNotice from "./render/SkipNotice";
+import SkipNoticeComponent from "./components/SkipNoticeComponent";
 
 // Hack to get the CSS loaded on permission-based sites (Invidious)
 utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -1129,11 +1130,11 @@ function clearSponsorTimes() {
 }
 
 //if skipNotice is null, it will not affect the UI
-function vote(type, UUID, skipNotice) {
+function vote(type, UUID, skipNotice: SkipNoticeComponent) {
     if (skipNotice != null) {
         //add loading info
         skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
-        skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
+        skipNotice.setNoticeInfoMessage.bind(skipNotice)();
     }
 
     let sponsorIndex = UUIDs.indexOf(UUID);
@@ -1168,10 +1169,10 @@ function vote(type, UUID, skipNotice) {
                     }
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
-                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
+                    skipNotice.setNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
                     skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 } else if (response.successType == -1) {
-                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(utils.getErrorMessage(response.statusCode))
+                    skipNotice.setNoticeInfoMessage.bind(skipNotice)(utils.getErrorMessage(response.statusCode))
                     skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 }
             }