Resend todos config on Franz setting changes

2 files changed, 45 insertions, 42 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 288c1906f..9dd313109 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -22,10 +22,6 @@ const styles = theme => ({
     '&:hover $closeTodosButton': {
       opacity: 1,
     },
-  },
-  webview: {
-    height: '100%',
-
     '& webview': {
       height: '100%',
     },
@@ -191,45 +187,43 @@ class TodosWebview extends Component {
     const { width, delta, isDragging } = this.state;
 
     return (
-      <>
-        <div
-          className={classes.root}
-          style={{ width: isVisible ? width : 0 }}
-          onMouseUp={() => this.stopResize()}
-          ref={(node) => { this.node = node; }}
+      <div
+        className={classes.root}
+        style={{ width: isVisible ? width : 0 }}
+        onMouseUp={() => this.stopResize()}
+        ref={(node) => { this.node = node; }}
+      >
+        <button
+          onClick={() => togglePanel()}
+          className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
+          type="button"
         >
-          <button
-            onClick={() => togglePanel()}
-            className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
-            type="button"
-          >
-            <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
-          </button>
+          <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
+        </button>
+        <div
+          className={classes.resizeHandler}
+          style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+          onMouseDown={e => this.startResize(e)}
+        />
+        {isDragging && (
           <div
-            className={classes.resizeHandler}
-            style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
-            onMouseDown={e => this.startResize(e)}
-          />
-          {isDragging && (
-            <div
-              className={classes.dragIndicator}
-              style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
-            />
-          )}
-          <Webview
-            className={classes.webview}
-            onDidAttach={() => {
-              const { setTodosWebview } = this.props;
-              setTodosWebview(this.webview);
-              this.startListeningToIpcMessages();
-            }}
-            partition="persist:todos"
-            preload="./features/todos/preload.js"
-            ref={(webview) => { this.webview = webview ? webview.view : null; }}
-            src={environment.TODOS_FRONTEND}
+            className={classes.dragIndicator}
+            style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
           />
-        </div>
-      </>
+        )}
+        <Webview
+          className={classes.webview}
+          onDidAttach={() => {
+            const { setTodosWebview } = this.props;
+            setTodosWebview(this.webview);
+            this.startListeningToIpcMessages();
+          }}
+          partition="persist:todos"
+          preload="./features/todos/preload.js"
+          ref={(webview) => { this.webview = webview ? webview.view : null; }}
+          src={environment.TODOS_FRONTEND}
+        />
+      </div>
     );
   }
 }
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index acf95df0d..bb1df9415 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -59,6 +59,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._updateTodosConfig,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -121,11 +122,14 @@ export default class TodoStore extends FeatureStore {
   // Todos client message handlers
 
   _onTodosClientInitialized = () => {
+    const { authToken } = this.stores.user;
+    const { isDarkThemeActive } = this.stores.ui;
+    if (!this.webview) return;
     this.webview.send(IPC.TODOS_HOST_CHANNEL, {
       action: 'todos:configure',
       data: {
-        authToken: this.stores.user.authToken,
-        theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default,
+        authToken,
+        theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
   };
@@ -144,4 +148,9 @@ export default class TodoStore extends FeatureStore {
 
     this.isFeatureEnabled = isTodosEnabled;
   };
+
+  _updateTodosConfig = () => {
+    // Resend the config if any part changes in Franz:
+    this._onTodosClientInitialized();
+  }
 }