Update options page if options data changes

ext/src/ui/options/index.tsx

@@ -52,7 +52,7 @@ function getInputValue (input: HTMLInputElement) {
     }
 }
 
-
+interface OptionsAppProps {}
 interface OptionsAppState {
     hasLoaded: boolean;
     bridgeLoading: boolean;
@@ -65,19 +65,21 @@ interface OptionsAppState {
     platform?: string;
 }
 
-class OptionsApp extends Component<{}, OptionsAppState> {
+class OptionsApp extends Component<
+        OptionsAppProps, OptionsAppState> {
+
     private form: (HTMLFormElement | null) = null;
 
-    constructor (props: {}) {
+    state: OptionsAppState = {
-        super(props);
+        hasLoaded: false
+      , bridgeLoading: true
+      , bridgeLoadingTimedOut: false
+      , isFormValid: true
+      , hasSaved: false
+    };
 
-        this.state = {
+    constructor (props: OptionsAppProps) {
-            hasLoaded: false
+        super(props);
-          , bridgeLoading: true
-          , bridgeLoadingTimedOut: false
-          , isFormValid: true
-          , hasSaved: false
-        };
 
         this.handleReset = this.handleReset.bind(this);
         this.handleFormSubmit = this.handleFormSubmit.bind(this);
@@ -99,6 +101,13 @@ class OptionsApp extends Component<{}, OptionsAppState> {
           , platform: (await browser.runtime.getPlatformInfo()).os
         });
         
+        // Update options data if changed whilst page is open
+        options.addEventListener("changed", async () => {
+            this.setState({
+                options: await options.getAll()
+            });
+        });
+
         try {
             const bridgeInfo = await bridge.getInfo();