5 files changed, 81 insertions, 3 deletions

diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
index 673ce8531..696568f7f 100644
--- a/src/features/todos/actions.js
+++ b/src/features/todos/actions.js
@@ -5,6 +5,17 @@ export const todoActions = createActionsFromDefinitions({
   resize: {
     width: PropTypes.number.isRequired,
   },
+  setTodosWebview: {
+    webview: PropTypes.element.isRequired,
+  },
+  handleHostMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
+  handleClientMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
 }, PropTypes.checkPropTypes);
 
 export default todoActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 1d99b9388..1f4730094 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -35,6 +35,8 @@ class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     authToken: PropTypes.string.isRequired,
+    handleClientMessage: PropTypes.func.isRequired,
+    setTodosWebview: PropTypes.func.isRequired,
     resize: PropTypes.func.isRequired,
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
@@ -43,7 +45,7 @@ class TodosWebview extends Component {
   state = {
     isDragging: false,
     width: 300,
-  }
+  };
 
   componentWillMount() {
     const { width } = this.props;
@@ -65,7 +67,7 @@ class TodosWebview extends Component {
       initialPos: event.clientX,
       delta: 0,
     });
-  }
+  };
 
   resizePanel(e) {
     const { minWidth } = this.props;
@@ -113,10 +115,15 @@ class TodosWebview extends Component {
     }
   }
 
+  startListeningToIpcMessages() {
+    const { handleClientMessage } = this.props;
+    if (!this.webview) return;
+    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+  }
+
   render() {
     const { authToken, classes } = this.props;
     const { width, delta, isDragging } = this.state;
-
     return (
       <>
         <div
@@ -138,6 +145,13 @@ class TodosWebview extends Component {
           )}
           <Webview
             className={classes.webview}
+            onDidAttach={() => {
+              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}?authToken=${authToken}`}
           />
         </div>
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 0759c22db..5b7c4531b 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -18,6 +18,7 @@ class TodosScreen extends Component {
     actions: PropTypes.shape({
       todos: PropTypes.shape({
         resize: PropTypes.func.isRequired,
+        handleIPCMessage: PropTypes.func.isRequired,
       }),
     }).isRequired,
   };
@@ -33,6 +34,8 @@ class TodosScreen extends Component {
       <ErrorBoundary>
         <TodosWebview
           authToken={stores.user.authToken}
+          handleClientMessage={actions.todos.handleClientMessage}
+          setTodosWebview={webview => actions.todos.setTodosWebview({ webview })}
           width={stores.todos.width}
           minWidth={TODOS_MIN_WIDTH}
           resize={width => actions.todos.resize({ width })}
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
new file mode 100644
index 000000000..533c9aea3
--- /dev/null
+++ b/src/features/todos/preload.js
@@ -0,0 +1,21 @@
+import { ipcRenderer } from 'electron';
+
+const debug = require('debug')('Franz:feature:todos:preload');
+
+debug('Preloading Todos Webview');
+
+let hostMessageListener = () => {};
+
+window.franz = {
+  onInitialize(ipcHostMessageListener) {
+    hostMessageListener = ipcHostMessageListener;
+  },
+  sendToHost(message) {
+    ipcRenderer.sendToHost('clientMessage', message);
+  },
+};
+
+ipcRenderer.on('hostMessage', (event, message) => {
+  debug('Received host message', event, message);
+  hostMessageListener(message);
+});
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index e7e13b37f..737902946 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -18,6 +18,8 @@ export default class TodoStore extends FeatureStore {
 
   @observable isFeatureActive = false;
 
+  webview = null;
+
   @computed get width() {
     const width = this.settings.width || DEFAULT_TODOS_WIDTH;
 
@@ -39,6 +41,9 @@ export default class TodoStore extends FeatureStore {
 
     this._registerActions(createActionBindings([
       [todoActions.resize, this._resize],
+      [todoActions.setTodosWebview, this._setTodosWebview],
+      [todoActions.handleHostMessage, this._handleHostMessage],
+      [todoActions.handleClientMessage, this._handleClientMessage],
     ]));
 
     // REACTIONS
@@ -76,6 +81,30 @@ export default class TodoStore extends FeatureStore {
     });
   };
 
+  @action _setTodosWebview = ({ webview }) => {
+    debug('_setTodosWebview', webview);
+    this.webview = webview;
+  };
+
+  @action _handleHostMessage = (message) => {
+    debug('_handleHostMessage', message);
+    if (message.action === 'create:todo') {
+      console.log(this.webview);
+      this.webview.send('hostMessage', message);
+    }
+  };
+
+  @action _handleClientMessage = (message) => {
+    debug('_handleClientMessage', message);
+    if (message.action === 'goToService') {
+      const { url, serviceId } = message.data;
+      if (url) {
+        this.stores.services.one(serviceId).webview.loadURL(url);
+      }
+      this.actions.service.setActive({ serviceId });
+    }
+  };
+
   // Reactions
 
   _setFeatureEnabledReaction = () => {