From 6ea87d7cd019eac1c977a51632db989225790822 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Thu, 2 Apr 2020 21:26:13 -0400
Subject: [PATCH] Added basic category chooser UI

---
 public/_locales/en/messages.json              |  9 +++
 public/options/options.css                    | 23 +++++++
 public/options/options.html                   |  7 +++
 src/components/CategoryChooserComponent.tsx   | 50 +++++++++++++++
 .../CategorySkipOptionsComponent.tsx          | 63 +++++++++++++++++++
 src/options.ts                                |  4 ++
 src/render/CategoryChooser.tsx                | 15 +++++
 7 files changed, 171 insertions(+)
 create mode 100644 src/components/CategoryChooserComponent.tsx
 create mode 100644 src/components/CategorySkipOptionsComponent.tsx
 create mode 100644 src/render/CategoryChooser.tsx

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 68900959..8beb64f1 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -498,5 +498,14 @@
     },
     "category_merchandise": {
         "message": "Merchandise and self-promotion"
+    },
+    "disable": {
+        "message": "Disable"
+    },
+    "manualSkip": {
+        "message": "Manual Skip"
+    },
+    "autoSkip": {
+        "message": "Auto Skip"
     }
 }
diff --git a/public/options/options.css b/public/options/options.css
index b80bf116..36db654e 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -323,4 +323,27 @@ svg {
 
     font-size: 14px;
     color: white;
+}
+
+/* React styles */
+
+.categoryTableElement {
+    font-size: 16px;
+
+    color: white;
+}
+
+.categoryTableElement > * {
+    padding-right: 15px;
+    padding-bottom: 15px;
+}
+
+.categoryOptionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
 }
\ No newline at end of file
diff --git a/public/options/options.html b/public/options/options.html
index 0dc3e4d8..658c3704 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -24,6 +24,13 @@
 	
 		<div id="options" class="hidden">
 
+			<div id="category-type" option-type="react-CategoryChooserComponent">
+
+			</div>
+
+			<br/>
+			<br/>
+
 			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
 				<label class="switch-container" label-name="__MSG_supportInvidious__">
 					<label class="switch">
diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/CategoryChooserComponent.tsx
new file mode 100644
index 00000000..106ff271
--- /dev/null
+++ b/src/components/CategoryChooserComponent.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import Config from "../config"
+import * as CompileConfig from "../../config.json";
+import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+
+export interface CategoryChooserProps { 
+
+}
+
+export interface CategoryChooserState {
+
+}
+
+class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+
+    constructor(props: CategoryChooserProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            
+        }
+    }
+
+    render() {
+        return (
+            <table id="categoryChooserTable"
+                className="categoryChooserTable"> <tbody>
+                {this.getCategorySkipOptions()}
+            </tbody> </table>
+        );
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+
+        for (const category of CompileConfig.categoryList) {
+            elements.push(
+                <CategorySkipOptionsComponent category={category}
+                    defaultColor={"00d400"}>
+                </CategorySkipOptionsComponent>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategoryChooserComponent;
\ No newline at end of file
diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx
new file mode 100644
index 00000000..74ad99db
--- /dev/null
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import Config from "../config"
+
+export interface CategorySkipOptionsProps { 
+    category: string;
+    defaultColor: string;
+}
+
+export interface CategorySkipOptionsState {
+    color: string;
+}
+
+class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
+
+    constructor(props: CategorySkipOptionsProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            color: props.defaultColor
+        }
+    }
+
+    render() {
+        return (
+            <tr id={this.props.category + "OptionsRow"}
+                className="categoryTableElement">
+                <td id={this.props.category + "OptionName"}
+                    className="categoryTableLabel">
+                        {chrome.i18n.getMessage("category_" + this.props.category)}
+                </td>
+
+                <td id={this.props.category + "SkipOption"}>
+                    <select
+                        className="categoryOptionsSelector">
+                            {this.getOptions(["disable", "manualSkip", "autoSkip"])}
+                    </select>
+                </td>
+
+                {/* TODO: Add colour chooser */}
+            </tr>
+        );
+    }
+
+    /**
+     * @param optionNames List of option names as codes that will be sent to i18n
+     */
+    getOptions(optionNames: string[]): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+
+        for (const optionName of optionNames) {
+            elements.push(
+                <option value={optionName}>
+                    {chrome.i18n.getMessage(optionName)}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategorySkipOptionsComponent;
\ No newline at end of file
diff --git a/src/options.ts b/src/options.ts
index 27d2a1f6..3fd13074 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -5,6 +5,7 @@ import * as CompileConfig from "../config.json";
 (<any> window).SB = Config;
 
 import Utils from "./utils";
+import CategoryChooser from "./render/CategoryChooser";
 var utils = new Utils();
 
 window.addEventListener('DOMContentLoaded', init);
@@ -164,6 +165,9 @@ async function init() {
                 });
 
                 break;
+            case "react-CategoryChooserComponent":
+                new CategoryChooser(optionsElements[i]);
+            break;
         }
     }
 
diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx
new file mode 100644
index 00000000..eab9edf6
--- /dev/null
+++ b/src/render/CategoryChooser.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import CategoryChooserComponent from "../components/CategoryChooserComponent";
+
+class CategoryChooser {
+
+    constructor(element: Element) {
+        ReactDOM.render(
+            <CategoryChooserComponent/>,
+            element
+        );
+    }
+}
+
+export default CategoryChooser;
\ No newline at end of file