7 files changed, 499 insertions, 0 deletions

diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
new file mode 100644
index 000000000..dc63d5fcd
--- /dev/null
+++ b/src/features/todos/actions.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions({
+  resize: {
+    width: PropTypes.number.isRequired,
+  },
+  toggleTodosPanel: {},
+  setTodosWebview: {
+    webview: PropTypes.instanceOf(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
new file mode 100644
index 000000000..288c1906f
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,237 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import Webview from 'react-electron-web-view';
+import { Icon } from '@meetfranz/ui';
+
+import * as environment from '../../../environment';
+
+const OPEN_TODOS_BUTTON_SIZE = 45;
+const CLOSE_TODOS_BUTTON_SIZE = 35;
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+
+    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
+
+    '&:hover $closeTodosButton': {
+      opacity: 1,
+    },
+  },
+  webview: {
+    height: '100%',
+
+    '& webview': {
+      height: '100%',
+    },
+  },
+  resizeHandler: {
+    position: 'absolute',
+    left: 0,
+    marginLeft: -5,
+    width: 10,
+    zIndex: 400,
+    cursor: 'col-resize',
+  },
+  dragIndicator: {
+    position: 'absolute',
+    left: 0,
+    width: 5,
+    zIndex: 400,
+    background: theme.todos.dragIndicator.background,
+
+  },
+  openTodosButton: {
+    width: OPEN_TODOS_BUTTON_SIZE,
+    height: OPEN_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
+    borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
+    opacity: props => (props.isVisible ? 0 : 1),
+    transition: 'right 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    borderTopRightRadius: props => (props.isVisible ? null : 0),
+    borderBottomRightRadius: props => (props.isVisible ? null : 0),
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+      transition: 'all 0.5s',
+    },
+  },
+  closeTodosButton: {
+    width: CLOSE_TODOS_BUTTON_SIZE,
+    height: CLOSE_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
+    borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
+    opacity: 0,
+    transition: 'opacity 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class TodosWebview extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isVisible: PropTypes.bool.isRequired,
+    togglePanel: PropTypes.func.isRequired,
+    handleClientMessage: PropTypes.func.isRequired,
+    setTodosWebview: PropTypes.func.isRequired,
+    resize: PropTypes.func.isRequired,
+    width: PropTypes.number.isRequired,
+    minWidth: PropTypes.number.isRequired,
+  };
+
+  state = {
+    isDragging: false,
+    width: 300,
+  };
+
+  componentWillMount() {
+    const { width } = this.props;
+
+    this.setState({
+      width,
+    });
+  }
+
+  componentDidMount() {
+    this.node.addEventListener('mousemove', this.resizePanel.bind(this));
+    this.node.addEventListener('mouseup', this.stopResize.bind(this));
+    this.node.addEventListener('mouseleave', this.stopResize.bind(this));
+  }
+
+  startResize = (event) => {
+    this.setState({
+      isDragging: true,
+      initialPos: event.clientX,
+      delta: 0,
+    });
+  };
+
+  resizePanel(e) {
+    const { minWidth } = this.props;
+
+    const {
+      isDragging,
+      initialPos,
+    } = this.state;
+
+    if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
+      const delta = e.clientX - initialPos;
+
+      this.setState({
+        delta,
+      });
+    }
+  }
+
+  stopResize() {
+    const {
+      resize,
+      minWidth,
+    } = this.props;
+
+    const {
+      isDragging,
+      delta,
+      width,
+    } = this.state;
+
+    if (isDragging) {
+      let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta));
+
+      if (newWidth < minWidth) {
+        newWidth = minWidth;
+      }
+
+      this.setState({
+        isDragging: false,
+        delta: 0,
+        width: newWidth,
+      });
+
+      resize(newWidth);
+    }
+  }
+
+  startListeningToIpcMessages() {
+    const { handleClientMessage } = this.props;
+    if (!this.webview) return;
+    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+  }
+
+  render() {
+    const {
+      classes, isVisible, togglePanel,
+    } = this.props;
+    const { width, delta, isDragging } = this.state;
+
+    return (
+      <>
+        <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"
+          >
+            <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.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}
+          />
+        </div>
+      </>
+    );
+  }
+}
+
+export default TodosWebview;
diff --git a/src/features/todos/constants.js b/src/features/todos/constants.js
new file mode 100644
index 000000000..2e8a431cc
--- /dev/null
+++ b/src/features/todos/constants.js
@@ -0,0 +1,4 @@
+export const IPC = {
+  TODOS_HOST_CHANNEL: 'TODOS_HOST_CHANNEL',
+  TODOS_CLIENT_CHANNEL: 'TODOS_CLIENT_CHANNEL',
+};
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
new file mode 100644
index 000000000..d071d0677
--- /dev/null
+++ b/src/features/todos/containers/TodosScreen.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+
+import TodosWebview from '../components/TodosWebview';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { TODOS_MIN_WIDTH, todosStore } from '..';
+import { todoActions } from '../actions';
+
+@observer
+class TodosScreen extends Component {
+  render() {
+    if (!todosStore || !todosStore.isFeatureActive) {
+      return null;
+    }
+
+    return (
+      <ErrorBoundary>
+        <TodosWebview
+          isVisible={todosStore.isTodosPanelVisible}
+          togglePanel={todoActions.toggleTodosPanel}
+          handleClientMessage={todoActions.handleClientMessage}
+          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          width={todosStore.width}
+          minWidth={TODOS_MIN_WIDTH}
+          resize={width => todoActions.resize({ width })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default TodosScreen;
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
new file mode 100644
index 000000000..00b165cc5
--- /dev/null
+++ b/src/features/todos/index.js
@@ -0,0 +1,34 @@
+import { reaction } from 'mobx';
+import TodoStore from './store';
+
+const debug = require('debug')('Franz:feature:todos');
+
+export const GA_CATEGORY_TODOS = 'Todos';
+
+export const DEFAULT_TODOS_WIDTH = 300;
+export const TODOS_MIN_WIDTH = 200;
+export const DEFAULT_TODOS_VISIBLE = true;
+
+export const todosStore = new TodoStore();
+
+export default function initTodos(stores, actions) {
+  stores.todos = todosStore;
+  const { features } = stores;
+
+  // Toggle todos feature
+  reaction(
+    () => features.features.isTodosEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `todos` feature');
+        todosStore.start(stores, actions);
+      } else if (todosStore.isFeatureActive) {
+        debug('Disabling `todos` feature');
+        todosStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
new file mode 100644
index 000000000..6e38a2ef3
--- /dev/null
+++ b/src/features/todos/preload.js
@@ -0,0 +1,23 @@
+import { ipcRenderer } from 'electron';
+import { IPC } from './constants';
+
+const debug = require('debug')('Franz:feature:todos:preload');
+
+debug('Preloading Todos Webview');
+
+let hostMessageListener = () => {};
+
+window.franz = {
+  onInitialize(ipcHostMessageListener) {
+    hostMessageListener = ipcHostMessageListener;
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { action: 'todos:initialized' });
+  },
+  sendToHost(message) {
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, message);
+  },
+};
+
+ipcRenderer.on(IPC.TODOS_HOST_CHANNEL, (event, message) => {
+  debug('Received host message', event, message);
+  hostMessageListener(message);
+});
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
new file mode 100644
index 000000000..acf95df0d
--- /dev/null
+++ b/src/features/todos/store.js
@@ -0,0 +1,147 @@
+import { ThemeType } from '@meetfranz/theme';
+import {
+  computed,
+  action,
+  observable,
+} from 'mobx';
+import localStorage from 'mobx-localstorage';
+
+import { todoActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
+import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
+import { IPC } from './constants';
+
+const debug = require('debug')('Franz:feature:todos:store');
+
+export default class TodoStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  webview = null;
+
+  @computed get width() {
+    const width = this.settings.width || DEFAULT_TODOS_WIDTH;
+
+    return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
+  }
+
+  @computed get isTodosPanelVisible() {
+    if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
+
+    return this.settings.isTodosPanelVisible;
+  }
+
+  @computed get settings() {
+    return localStorage.getItem('todos') || {};
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions) {
+    debug('TodoStore::start');
+    this.stores = stores;
+    this.actions = actions;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [todoActions.resize, this._resize],
+      [todoActions.toggleTodosPanel, this._toggleTodosPanel],
+      [todoActions.setTodosWebview, this._setTodosWebview],
+      [todoActions.handleHostMessage, this._handleHostMessage],
+      [todoActions.handleClientMessage, this._handleClientMessage],
+    ]));
+
+    // REACTIONS
+
+    this._allReactions = createReactions([
+      this._setFeatureEnabledReaction,
+    ]);
+
+    this._registerReactions(this._allReactions);
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TodoStore::stop');
+    this.reset();
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem('todos', {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // Actions
+
+  @action _resize = ({ width }) => {
+    this._updateSettings({
+      width,
+    });
+  };
+
+  @action _toggleTodosPanel = () => {
+    this._updateSettings({
+      isTodosPanelVisible: !this.isTodosPanelVisible,
+    });
+  };
+
+  @action _setTodosWebview = ({ webview }) => {
+    debug('_setTodosWebview', webview);
+    this.webview = webview;
+  };
+
+  @action _handleHostMessage = (message) => {
+    debug('_handleHostMessage', message);
+    if (message.action === 'todos:create') {
+      this.webview.send(IPC.TODOS_HOST_CHANNEL, message);
+    }
+  };
+
+  @action _handleClientMessage = (message) => {
+    debug('_handleClientMessage', 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);
+    }
+  };
+
+  // Todos client message handlers
+
+  _onTodosClientInitialized = () => {
+    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,
+      },
+    });
+  };
+
+  _goToService = ({ url, serviceId }) => {
+    if (url) {
+      this.stores.services.one(serviceId).webview.loadURL(url);
+    }
+    this.actions.service.setActive({ serviceId });
+  };
+
+  // Reactions
+
+  _setFeatureEnabledReaction = () => {
+    const { isTodosEnabled } = this.stores.features.features;
+
+    this.isFeatureEnabled = isTodosEnabled;
+  };
+}