From c8e2bb0c1303b507cb8872eddb9b5bc83eae7b51 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 2 Sep 2022 14:38:49 -0400
Subject: [PATCH] Auto update hidden categories when redeemed

---
 .../options/CategorySkipOptionsComponent.tsx  | 13 ++++++++-
 src/options.ts                                | 27 ++++++++++++-------
 src/render/CategoryChooser.tsx                | 10 ++++++-
 src/render/UnsubmittedVideos.tsx              | 11 +++++++-
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx
index 89ac84ac..20c12309 100644
--- a/src/components/options/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@@ -38,10 +38,21 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             this.setState({
                 hideChapter: !allowed
             });
-        })
+        });
     }
 
     render(): React.ReactElement {
+        if (this.state.hideChapter) {
+            // Ensure force update refreshes this
+            fetchingChaptersAllowed().then((allowed) => {
+                if (allowed) {
+                    this.setState({
+                        hideChapter: !allowed
+                    });
+                }
+            });
+        }
+
         let defaultOption = "disable";
         // Set the default opton properly
         for (const categorySelection of Config.config.categorySelections) {
diff --git a/src/options.ts b/src/options.ts
index 8d66834c..c9596abb 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -14,9 +14,13 @@ import UnsubmittedVideos from "./render/UnsubmittedVideos";
 import KeybindComponent from "./components/options/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
 import { localizeHtmlPage } from "./utils/pageUtils";
+import { StorageChangesObject } from "./types";
 const utils = new Utils();
 let embed = false;
 
+const categoryChoosers: CategoryChooser[] = [];
+const unsubmittedVideos: UnsubmittedVideos[] = [];
+
 window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
@@ -291,10 +295,10 @@ async function init() {
                 break;
             }
             case "react-CategoryChooserComponent":
-                new CategoryChooser(optionsElements[i]);
+                categoryChoosers.push(new CategoryChooser(optionsElements[i]));
                 break;
             case "react-UnsubmittedVideosComponent":
-                new UnsubmittedVideos(optionsElements[i])
+                unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i]));
                 break;
         }
     }
@@ -352,10 +356,8 @@ async function shouldHideOption(element: Element): Promise<boolean> {
 
 /**
  * Called when the config is updated
- *
- * @param {String} element
  */
-function optionsConfigUpdateListener() {
+function optionsConfigUpdateListener(changes: StorageChangesObject) {
     const optionsContainer = document.getElementById("options");
     const optionsElements = optionsContainer.querySelectorAll("*");
 
@@ -364,9 +366,16 @@ function optionsConfigUpdateListener() {
             case "display":
                 updateDisplayElement(<HTMLElement> optionsElements[i])
                 break;
-            case "react-UnsubmittedVideosComponent":
-                new UnsubmittedVideos(optionsElements[i])
-                break;
+        }
+    }
+
+    if (changes.categorySelections || changes.payments) {
+        for (const chooser of categoryChoosers) {
+            chooser.update();
+        }
+    } else if (changes.unsubmittedSegments) {
+        for (const chooser of unsubmittedVideos) {
+            chooser.update();
         }
     }
 }
@@ -662,4 +671,4 @@ function copyDebugOutputToClipboard() {
 
 function isIncognitoAllowed(): Promise<boolean> {
     return new Promise((resolve) => chrome.extension.isAllowedIncognitoAccess(resolve));
-}
+}
\ No newline at end of file
diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx
index 97c33cf9..0f5d557f 100644
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@@ -4,12 +4,20 @@ import CategoryChooserComponent from "../components/options/CategoryChooserCompo
 
 class CategoryChooser {
 
+    ref: React.RefObject<CategoryChooserComponent>;
+
     constructor(element: Element) {
+        this.ref = React.createRef();
+
         ReactDOM.render(
-            <CategoryChooserComponent/>,
+            <CategoryChooserComponent ref={this.ref} />,
             element
         );
     }
+
+    update(): void {
+        this.ref.current?.forceUpdate();
+    }
 }
 
 export default CategoryChooser;
\ No newline at end of file
diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx
index 1ae119e3..26796754 100644
--- a/src/render/UnsubmittedVideos.tsx
+++ b/src/render/UnsubmittedVideos.tsx
@@ -4,12 +4,21 @@ import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosC
 
 class UnsubmittedVideos {
 
+    ref: React.RefObject<UnsubmittedVideosComponent>;
+
     constructor(element: Element) {
+        this.ref = React.createRef();
+
         ReactDOM.render(
-            <UnsubmittedVideosComponent/>,
+            <UnsubmittedVideosComponent ref={this.ref} />,
             element
         );
     }
+
+    update(): void {
+        this.ref.current?.forceUpdate();
+    }
+
 }
 
 export default UnsubmittedVideos;