Auto update hidden categories when redeemed

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) {

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));
-}
+}

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;

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;