Category selections now save

src/components/CategorySkipOptionsComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import Config from "../config"
 
 export interface CategorySkipOptionsProps { 
@@ -22,6 +23,14 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 
     render() {
+        let defaultOption = "disable";
+        // Set the default opton properly
+        for (const categorySelection of Config.config.categorySelections) {
+            if (categorySelection.name === this.props.category) {
+                defaultOption = categorySelection.autoSkip ? "autoSkip" : "manualSkip";
+            }
+        }
+
         return (
             <tr id={this.props.category + "OptionsRow"}
                 className="categoryTableElement">
@@ -32,8 +41,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
                 <td id={this.props.category + "SkipOption"}>
                     <select
-                        className="categoryOptionsSelector">
-                            {this.getOptions(["disable", "manualSkip", "autoSkip"])}
+                        className="categoryOptionsSelector"
+                        defaultValue={defaultOption}
+                        onChange={this.skipOptionSelected.bind(this)}>
+                            {this.getCategorySkipOptions()}
                     </select>
                 </td>
 
@@ -42,15 +53,48 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         );
     }
 
-    /**
-     * @param optionNames List of option names as codes that will be sent to i18n
-     */
-    getOptions(optionNames: string[]): JSX.Element[] {
+    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+        switch (event.target.value) {
+            case "disable": 
+                this.removeCurrentCategorySelection();
+
+                break;
+            default:
+                this.removeCurrentCategorySelection();
+
+                Config.config.categorySelections.push({
+                    name: this.props.category,
+                    autoSkip: event.target.value === "autoSkip"
+                });
+
+                // Forces the Proxy to send this to the chrome storage API
+                Config.config.categorySelections = Config.config.categorySelections;
+        }
+    }
+
+    /** Removes this category from the config list of category selections */
+    removeCurrentCategorySelection(): void {
+        // Remove it if it exists
+        for (let i = 0; i < Config.config.categorySelections.length; i++) {
+            if (Config.config.categorySelections[i].name === this.props.category) {
+                Config.config.categorySelections.splice(i, 1);
+
+                // Forces the Proxy to send this to the chrome storage API
+                Config.config.categorySelections = Config.config.categorySelections;
+
+                break;
+            }
+        }
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
         let elements: JSX.Element[] = [];
 
+        let optionNames = ["disable", "manualSkip", "autoSkip"];
+
         for (const optionName of optionNames) {
             elements.push(
-                <option value={optionName}>
+                <option key={optionName} value={optionName}>
                     {chrome.i18n.getMessage(optionName)}
                 </option>
             );