6 files changed, 85 insertions, 17 deletions

diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
index 1ccc9a592..cc17e919b 100644
--- a/src/features/todos/actions.js
+++ b/src/features/todos/actions.js
@@ -15,9 +15,14 @@ export const todoActions = createActionsFromDefinitions({
     data: PropTypes.object,
   },
   handleClientMessage: {
-    action: PropTypes.string.isRequired,
-    data: PropTypes.object,
+    channel: PropTypes.string.isRequired,
+    message: PropTypes.shape({
+      action: PropTypes.string.isRequired,
+      data: PropTypes.object,
+    }),
   },
+  openDevTools: {},
+  reload: {},
 }, PropTypes.checkPropTypes);
 
 export default todoActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index c612702b0..90575ebac 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -5,12 +5,14 @@ import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
 import { Icon } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
 
 import { mdiCheckAll } from '@mdi/js';
 import SettingsStore from '../../../stores/SettingsStore';
 
 import Appear from '../../../components/ui/effects/Appear';
 import UpgradeButton from '../../../components/ui/UpgradeButton';
+import { TODOS_PARTITION_ID } from '..';
 
 import userAgent from '../../../helpers/userAgent-helpers';
 
@@ -49,7 +51,7 @@ const styles = theme => ({
     borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
     zIndex: 300,
 
-    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
+    transform: ({ isVisible, width, isTodosServiceActive }) => `translateX(${isVisible || isTodosServiceActive ? 0 : width}px)`,
 
     '& webview': {
       height: '100%',
@@ -91,12 +93,19 @@ const styles = theme => ({
   premiumCTA: {
     marginTop: 40,
   },
+  isTodosServiceActive: {
+    width: 'calc(100% - 368px)',
+    position: 'absolute',
+    right: 0,
+    zIndex: 0,
+  },
 });
 
 @injectSheet(styles) @inject('stores') @observer
 class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    isTodosServiceActive: PropTypes.bool.isRequired,
     isVisible: PropTypes.bool.isRequired,
     handleClientMessage: PropTypes.func.isRequired,
     setTodosWebview: PropTypes.func.isRequired,
@@ -194,12 +203,16 @@ class TodosWebview extends Component {
   startListeningToIpcMessages() {
     const { handleClientMessage } = this.props;
     if (!this.webview) return;
-    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+    this.webview.addEventListener('ipc-message', (e) => {
+      // console.log(e);
+      handleClientMessage({ channel: e.channel, message: e.args[0] });
+    });
   }
 
   render() {
     const {
       classes,
+      isTodosServiceActive,
       isVisible,
       isTodosIncludedInCurrentPlan,
       stores,
@@ -222,13 +235,21 @@ class TodosWebview extends Component {
       isTodoUrlValid = validURL(todoUrl);
     }
 
+    let displayedWidth = isVisible ? width : 0;
+    if (isTodosServiceActive) {
+      displayedWidth = null;
+    }
 
     return (
       <div
-        className={classes.root}
-        style={{ width: isVisible ? width : 0 }}
+        className={classnames({
+          [classes.root]: true,
+          [classes.isTodosServiceActive]: isTodosServiceActive,
+        })}
+        style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
         ref={(node) => { this.node = node; }}
+        id="todos-panel"
       >
         <div
           className={classes.resizeHandler}
@@ -251,7 +272,7 @@ class TodosWebview extends Component {
               setTodosWebview(this.webview);
               this.startListeningToIpcMessages();
             }}
-            partition="persist:todos"
+            partition={TODOS_PARTITION_ID}
             preload="./features/todos/preload.js"
             ref={(webview) => { this.webview = webview ? webview.view : null; }}
             src={todoUrl}
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index bc05a587d..884925be6 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -7,6 +7,7 @@ import TodosWebview from '../components/TodosWebview';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { TODOS_MIN_WIDTH, todosStore } from '..';
 import { todoActions } from '../actions';
+import ServicesStore from '../../../stores/ServicesStore';
 
 @inject('stores', 'actions') @observer
 class TodosScreen extends Component {
@@ -18,6 +19,7 @@ class TodosScreen extends Component {
     return (
       <ErrorBoundary>
         <TodosWebview
+          isTodosServiceActive={this.props.stores.services.isTodosServiceActive || false}
           isVisible={todosStore.isTodosPanelVisible}
           togglePanel={todoActions.toggleTodosPanel}
           handleClientMessage={todoActions.handleClientMessage}
@@ -37,5 +39,6 @@ export default TodosScreen;
 TodosScreen.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
 };
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
index 9f355e9ba..8ff06f190 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.js
@@ -9,6 +9,8 @@ export const DEFAULT_TODOS_WIDTH = 300;
 export const TODOS_MIN_WIDTH = 200;
 export const DEFAULT_TODOS_VISIBLE = true;
 export const DEFAULT_IS_FEATURE_ENABLED_BY_USER = true;
+export const TODOS_RECIPE_ID = 'franz-todos';
+export const TODOS_PARTITION_ID = 'persist:todos"';
 
 export const TODOS_ROUTES = {
   TARGET: '/todos',
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
index d834cf547..9bd76a704 100644
--- a/src/features/todos/preload.js
+++ b/src/features/todos/preload.js
@@ -5,7 +5,12 @@ const debug = require('debug')('Ferdi:feature:todos:preload');
 
 debug('Preloading Todos Webview');
 
-let hostMessageListener = () => {};
+let hostMessageListener = ({ action }) => {
+  switch (action) {
+    case 'todos:initialize-as-service': ipcRenderer.sendToHost('hello'); break;
+    default:
+  }
+};
 
 window.ferdi = {
   onInitialize(ipcHostMessageListener) {
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index a05203a04..c1d6a9049 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -23,7 +23,9 @@ export default class TodoStore extends FeatureStore {
 
   @observable isFeatureActive = false;
 
-  webview = null;
+  @observable webview = null;
+
+  isInitialized = false;
 
   @computed get width() {
     const width = this.settings.width || DEFAULT_TODOS_WIDTH;
@@ -65,6 +67,8 @@ export default class TodoStore extends FeatureStore {
       [todoActions.handleHostMessage, this._handleHostMessage],
       [todoActions.handleClientMessage, this._handleClientMessage],
       [todoActions.toggleTodosFeatureVisibility, this._toggleTodosFeatureVisibility],
+      [todoActions.openDevTools, this._openDevTools],
+      [todoActions.reload, this._reload],
     ]));
 
     // REACTIONS
@@ -129,16 +133,28 @@ export default class TodoStore extends FeatureStore {
     }
   };
 
-  @action _handleClientMessage = (message) => {
-    debug('_handleClientMessage', message);
+  @action _handleClientMessage = ({ channel, message = {} }) => {
+    debug('_handleClientMessage', channel, message);
     switch (message.action) {
       case 'todos:initialized': this._onTodosClientInitialized(); break;
       case 'todos:goToService': this._goToService(message.data); break;
       default:
-        debug('Unknown client message reiceived', message);
+        debug('Other message received', channel, message);
+        console.log('this.stores.services.isTodosServiceAdded', this.stores.services.isTodosServiceAdded);
+        if (this.stores.services.isTodosServiceAdded) {
+          this.actions.service.handleIPCMessage({
+            serviceId: this.stores.services.isTodosServiceAdded.id,
+            channel,
+            args: message,
+          });
+        }
     }
   };
 
+  _handleNewWindowEvent = ({ url }) => {
+    this.actions.app.openExternalUrl({ url });
+  }
+
   @action _toggleTodosFeatureVisibility = () => {
     debug('_toggleTodosFeatureVisibility');
 
@@ -147,14 +163,28 @@ export default class TodoStore extends FeatureStore {
     });
   };
 
+  _openDevTools = () => {
+    debug('_openDevTools');
+
+    const webview = document.querySelector('#todos-panel webview');
+    if (webview) webview.openDevTools();
+  }
+
+  _reload = () => {
+    debug('_reload');
+
+    const webview = document.querySelector('#todos-panel webview');
+    if (webview) webview.reload();
+  }
+
   // Todos client message handlers
 
-  _onTodosClientInitialized = () => {
+  _onTodosClientInitialized = async () => {
     const { authToken } = this.stores.user;
     const { isDarkThemeActive } = this.stores.ui;
     const { locale } = this.stores.app;
     if (!this.webview) return;
-    this.webview.send(IPC.TODOS_HOST_CHANNEL, {
+    await this.webview.send(IPC.TODOS_HOST_CHANNEL, {
       action: 'todos:configure',
       data: {
         authToken,
@@ -163,9 +193,11 @@ export default class TodoStore extends FeatureStore {
       },
     });
 
-    this.webview.addEventListener('new-window', ({ url }) => {
-      this.actions.app.openExternalUrl({ url });
-    });
+    if (!this.isInitialized) {
+      this.webview.addEventListener('new-window', this._handleNewWindowEvent);
+
+      this.isInitialized = true;
+    }
   };
 
   _goToService = ({ url, serviceId }) => {