Re-rendering when changing options

src/options/components/CategoryContainer.js

@@ -4,7 +4,7 @@ import OptionContainer from "./OptionContainer";
 import "../styles/CategoryContainer.scss";
 
 export default props => {
-  const { category, elements } = props;
+  const { category, elements, currentValues = {} } = props;
   return (
     <li className="categoryContainer">
       <fieldset>
@@ -16,11 +16,11 @@ export default props => {
         <ul className="categoryElements">
           {elements.map((option, index) => (
             <div key={index}>
-              <OptionContainer {...option}>
+              <OptionContainer {...option} currentValue={currentValues[option.id]}>
                 {option.hasOwnProperty("childElements") && (
                   <ul className="childElements">
                     {option.childElements.map((option, index) => (
-                      <OptionContainer {...option} key={index} />
+                      <OptionContainer {...option} currentValue={currentValues[option.id]} key={index} />
                     ))}
                   </ul>
                 )}

src/options/components/OptionContainer.js

@@ -1,11 +1,11 @@
 import React from "react";
 import browser from "webextension-polyfill";
-import { setSettings, getSettings } from "src/settings/settings";
+import { setSettings } from "src/settings/settings";
 import KeyboardShortcutForm from "./KeyboardShortcutForm";
 import "../styles/OptionContainer.scss";
 
 export default props => {
-  const { title, captions, type, id, children } = props;
+  const { title, captions, type, id, children, currentValue } = props;
 
   const handleValueChange = e => {
     let value = e.target.value;
@@ -35,7 +35,7 @@ export default props => {
             type="checkbox"
             id={formId}
             onChange={handleCheckedChange}
-            defaultChecked={getSettings(id)}
+            defaultChecked={currentValue}
           />
           <span className="checkbox" />
         </label>
@@ -52,7 +52,7 @@ export default props => {
           step={props.step}
           placeholder={props.placeholder}
           onChange={handleValueChange}
-          defaultValue={getSettings(id)}
+          defaultValue={currentValue}
         />
       );
       break;
@@ -64,7 +64,7 @@ export default props => {
           id={formId}
           placeholder={props.placeholder}
           onChange={handleValueChange}
-          defaultValue={getSettings(id)}
+          defaultValue={currentValue}
         />
       );
       break;
@@ -76,7 +76,7 @@ export default props => {
           spellCheck={false}
           placeholder={props.placeholder}
           onChange={handleValueChange}
-          defaultValue={getSettings(id)}
+          defaultValue={currentValue}
         />
       );
       break;
@@ -90,7 +90,7 @@ export default props => {
             name={id}
             value={props.value}
             onChange={handleValueChange}
-            defaultChecked={props.value === getSettings(id) ? "checked" : ""}
+            defaultChecked={props.value === currentValue ? "checked" : ""}
           />
           <span className="radio" />
         </label>
@@ -104,7 +104,7 @@ export default props => {
             type="color"
             id={formId}
             onChange={handleValueChange}
-            defaultValue={getSettings(id)}
+            defaultValue={currentValue}
           />
         </label>
       );
@@ -113,7 +113,7 @@ export default props => {
       formId = id;
       optionForm = (
         <div className="selectWrap">
-          <select id={formId} onChange={handleValueChange} defaultValue={getSettings(id)}>
+          <select id={formId} onChange={handleValueChange} defaultValue={currentValue}>
             {props.options.map((option, index) => (
               <option value={option.value} key={index}>
                 {props.useRawOptionName ? option.name : browser.i18n.getMessage(option.name)}
@@ -156,7 +156,8 @@ export default props => {
       break;
   }
 
-  const shouldShow = props.shouldShow == undefined || props.shouldShow;
+  const shouldShow = props.shouldShow == undefined
+    || (typeof props.shouldShow === 'function' ? props.shouldShow() : props.shouldShow);
 
   return (
     shouldShow && (

src/options/components/SettingsPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import browser from "webextension-polyfill";
 import { updateLogLevel, overWriteLogLevel } from "src/common/log";
-import { initSettings, resetAllSettings, exportSettings, importSettings } from "src/settings/settings";
+import { initSettings, getAllSettings, resetAllSettings, exportSettings, importSettings, handleSettingsChange } from "src/settings/settings";
 import defaultSettings from "src/settings/defaultSettings";
 import CategoryContainer from "./CategoryContainer";
 
@@ -9,7 +9,8 @@ export default class SettingsPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isInit: false
+      isInit: false,
+      currentValues: {}
     };
     this.init();
   }
@@ -18,16 +19,21 @@ export default class SettingsPage extends Component {
     await initSettings();
     overWriteLogLevel();
     updateLogLevel();
-    this.setState({ isInit: true });
+    this.setState({ isInit: true, currentValues: getAllSettings() });
+    browser.storage.onChanged.addListener(changes => {
+      const newSettings = handleSettingsChange(changes);
+      if (newSettings) this.setState({ currentValues: newSettings });
+    });
   }
 
   render() {
+    const { isInit, currentValues } = this.state;
     const settingsContent = (
       <ul>
         {defaultSettings.map((category, index) => (
-          <CategoryContainer {...category} key={index} />
+          <CategoryContainer {...category} key={index} currentValues={currentValues} />
         ))}
-        <CategoryContainer {...additionalCategory} />
+        <CategoryContainer {...additionalCategory} currentValues={currentValues} />
       </ul>
     );
 
@@ -35,7 +41,7 @@ export default class SettingsPage extends Component {
       <div>
         <p className="contentTitle">{browser.i18n.getMessage("settingsLabel")}</p>
         <hr />
-        {this.state.isInit ? settingsContent : ""}
+        {isInit ? settingsContent : ""}
       </div>
     );
   }

src/settings/settings.js

@@ -45,6 +45,10 @@ export const getSettings = id => {
   return currentSettings[id];
 };
 
+export const getAllSettings = () => {
+  return currentSettings;
+};
+
 export const resetAllSettings = async () => {
   log.info(logDir, "resetAllSettings()");
   currentSettings = {};
@@ -55,7 +59,9 @@ export const resetAllSettings = async () => {
 export const handleSettingsChange = (changes, area) => {
   if (Object.keys(changes).includes("Settings")) {
     currentSettings = changes.Settings.newValue;
+    return currentSettings;
   }
+  return null;
 };
 
 export const exportSettings = async () => {