From 638439a67117048803e2f6957fadf89574b0d140 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Tue, 14 Apr 2020 00:10:20 -0400
Subject: [PATCH] Moved notice closing to renderer (no leftover nodes)

---
 src/components/NoticeComponent.tsx           | 10 ++--------
 src/components/SkipNoticeComponent.tsx       |  5 ++++-
 src/components/SubmissionNoticeComponent.tsx |  4 ++++
 src/render/SkipNotice.tsx                    | 19 ++++++++++++++-----
 src/render/SubmissionNotice.tsx              | 17 ++++++++++++-----
 5 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index d554f85d..b7ff8adf 100644
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -11,7 +11,7 @@ export interface NoticeProps {
     fadeIn?: boolean,
 
     // Callback for when this is closed
-    closeListener?: () => void,
+    closeListener: () => void,
 
     zIndex?: number
 }
@@ -195,16 +195,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
      * @param silent If true, the close listener will not be called
      */
     close(silent?: boolean) {
-        //TODO: Change to a listener in the renderer (not component)
-        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-        if (notice != null) {
-            notice.remove();
-        }
-
         //remove setInterval
         if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
 
-        if (this.props.closeListener && !silent) this.props.closeListener();
+        if (!silent) this.props.closeListener();
     }
 
     changeNoticeTitle(title) {
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 07572de6..08d817e6 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -14,6 +14,8 @@ export interface SkipNoticeProps {
     autoSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
+
+    closeListener: () => void
 }
 
 export interface SkipNoticeState {
@@ -112,7 +114,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 fadeIn={true}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
-                ref={this.noticeRef}>
+                ref={this.noticeRef}
+                closeListener={this.props.closeListener}>
                     
                 {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
                     <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index 7688c9ba..59a51114 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -11,6 +11,8 @@ export interface SubmissionNoticeProps {
     contentContainer: ContentContainer;
 
     callback: () => any;
+
+    closeListener: () => void
 }
 
 export interface SubmissionNoticeeState {
@@ -134,6 +136,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.noticeRef.current.close(true);
 
         this.contentContainer().resetSponsorSubmissionNotice();
+
+        this.props.closeListener();
     }
 
     submit() {
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index 2322cadf..281260ed 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -9,6 +9,8 @@ class SkipNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => any;
 
+    noticeElement: HTMLDivElement;
+
     constructor(UUID: string, autoSkip: boolean = false, contentContainer) {
         this.UUID = UUID;
         this.autoSkip = autoSkip;
@@ -35,16 +37,23 @@ class SkipNotice {
         //this is the suffix added at the end of every id
         let idSuffix = this.UUID + amountOfPreviousNotices;
 
-        let noticeElement = document.createElement("div");
-        noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
-        referenceNode.prepend(noticeElement);
+        referenceNode.prepend(this.noticeElement);
 
         ReactDOM.render(
-            <SkipNoticeComponent UUID={UUID} autoSkip={autoSkip} contentContainer={contentContainer} />,
-            noticeElement
+            <SkipNoticeComponent UUID={UUID} 
+                autoSkip={autoSkip} 
+                contentContainer={contentContainer}
+                closeListener={() => this.close()} />,
+            this.noticeElement
         );
     }
+
+    close() {
+        this.noticeElement.remove();
+    }
 }
 
 export default SkipNotice;
\ No newline at end of file
diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx
index bebed3e2..3220c50f 100644
--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@@ -11,6 +11,8 @@ class SubmissionNotice {
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
+    noticeElement: HTMLDivElement;
+
     constructor(contentContainer: () => any, callback: () => any) {
         this.noticeRef = React.createRef();
 
@@ -34,23 +36,28 @@ class SubmissionNotice {
             }
         }
     
-        let noticeElement = document.createElement("div");
-        noticeElement.id = "submissionNoticeContainer";
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "submissionNoticeContainer";
 
-        referenceNode.prepend(noticeElement);
+        referenceNode.prepend(this.noticeElement);
 
         ReactDOM.render(
             <SubmissionNoticeComponent
                 contentContainer={contentContainer}
                 callback={callback} 
-                ref={this.noticeRef} />,
-            noticeElement
+                ref={this.noticeRef}
+                closeListener={() => this.close()} />,
+            this.noticeElement
         );
     }
 
     update() {
         this.noticeRef.current.forceUpdate();
     }
+
+    close() {
+        this.noticeElement.remove();
+    }
 }
 
 export default SubmissionNotice;
\ No newline at end of file