Lock category order and show all categories

2 files changed, 21 insertions, 22 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index c6d5db91..b14c5be0 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -581,6 +581,10 @@
     "chooseACategory": {
         "message": "Choose a Category"
     },
+    "enableThisCategoryFirst": {
+        "message": "To submit segments with the category of \"{0}\", you must enable it in the options. You will be redirected to the options now.",
+        "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
+    },
     "youMustSelectACategory": {
         "message": "You must select a category for all segments you are submitting!"
     },
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 89b5d48e..8cff5569 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -23,6 +23,8 @@ export interface SponsorTimeEditState {
     sponsorTimeEdits: [string, string];
 }
 
+const DEFAULT_CATEGORY = "chooseACategory";
+
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
 
     idSuffix: string;
@@ -217,27 +219,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
-            <option value={"chooseACategory"}
-                    key={"chooseACategory"}>
-                {chrome.i18n.getMessage("chooseACategory")}
+            <option value={DEFAULT_CATEGORY}
+                    key={DEFAULT_CATEGORY}>
+                {chrome.i18n.getMessage(DEFAULT_CATEGORY)}
             </option>
         )];
 
-        for (const category of Config.config.categorySelections) {
-            elements.push(
-                <option value={category.name}
-                        key={category.name}>
-                    {chrome.i18n.getMessage("category_" + category.name)}
-                </option>
-            );
-        }
-
-        if (elements.length < CompileConfig.categoryList.length) {
-            // Add show more button
+        for (const category of CompileConfig.categoryList) {
             elements.push(
-                <option value={"moreCategories"}
-                        key={"moreCategories"}>
-                    {chrome.i18n.getMessage("moreCategories")}
+                <option value={category}
+                        key={category}>
+                    {chrome.i18n.getMessage("category_" + category)}
                 </option>
             );
         }
@@ -247,15 +239,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
         // See if show more categories was pressed
-        if (event.target.value === "moreCategories") {
+        if (!Config.config.categorySelections.some((category) => category.name === event.target.value)) {
+            const chosenCategory = event.target.value;
+            event.target.value = DEFAULT_CATEGORY;
+
+            // Alert that they have to enable this category first
+            alert(chrome.i18n.getMessage("enableThisCategoryFirst").replace("{0}", chosenCategory));
+
             // 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();
     }