Only show selected categories when submitting and added a "show more categories" button

2 files changed, 32 insertions, 7 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 63d35ae4..b50929bd 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -528,5 +528,8 @@
     },
     "bracketNow": {
         "message": "(Now)"
+    },
+    "moreCategories": {
+        "message": "More Categories"
     }
 }
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 0235179f..d0ae55eb 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -154,7 +154,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     className="sponsorTimeCategories"
                     defaultValue={sponsorTime.category}
                     ref={this.categoryOptionRef}
-                    onChange={this.saveEditTimes.bind(this)}>
+                    onChange={this.categorySelectionChange.bind(this)}>
                     {this.getCategoryOptions()}
                 </select>
 
@@ -190,13 +190,21 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     getCategoryOptions() {
         let elements = [];
 
-        //TODO: Remove this when testing server is not needed
-        let categoryList = Config.config.testingServer ? CompileConfig.categoryList : ["sponsor"];
-        for (const category of categoryList) {
+        for (const category of Config.config.categorySelections) {
             elements.push(
-                <option value={category}
-                        key={category}>
-                    {chrome.i18n.getMessage("category_" + category)}
+                <option value={category.name}
+                        key={category.name}>
+                    {chrome.i18n.getMessage("category_" + category.name)}
+                </option>
+            );
+        }
+
+        if (elements.length < CompileConfig.categoryList.length) {
+            // Add show more button
+            elements.push(
+                <option value={"moreCategories"}
+                        key={"moreCategories"}>
+                    {chrome.i18n.getMessage("moreCategories")}
                 </option>
             );
         }
@@ -204,6 +212,20 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         return elements;
     }
 
+    categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>) {
+        // See if show more categories was pressed
+        if (event.target.value === "moreCategories") {
+            // Open options page
+            chrome.runtime.sendMessage({"message": "openConfig"});
+
+            // Reset option to previous
+            event.target.value = this.props.contentContainer().sponsorTimesSubmitting[this.props.index].category;
+            return;
+        }
+
+        this.saveEditTimes();
+    }
+
     setTimeToNow(index: number) {
         let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];