5 files changed, 411 insertions, 0 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
new file mode 100644
index 000000000..043ff42ea
--- /dev/null
+++ b/src/components/services/content/ServiceWebview.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import Webview from 'react-electron-web-view';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+
+@observer
+export default class ServiceWebview extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    isActive: false,
+  };
+
+  state = {
+    forceRepaint: false,
+  };
+
+  componentDidMount() {
+    autorun(() => {
+      if (this.props.service.isActive) {
+        this.setState({ forceRepaint: true });
+        setTimeout(() => {
+          this.setState({ forceRepaint: false });
+        }, 100);
+      }
+    });
+  }
+
+  webview = null;
+
+  render() {
+    const {
+      service,
+      setWebviewReference,
+    } = this.props;
+
+    const webviewClasses = classnames({
+      services__webview: true,
+      'is-active': service.isActive,
+      'services__webview--force-repaint': this.state.forceRepaint,
+    });
+
+    return (
+      <div className={webviewClasses}>
+        <Webview
+          ref={(element) => { this.webview = element; }}
+
+          autosize
+          src={service.url}
+          preload="./webview/plugin.js"
+          partition={`persist:service-${service.id}`}
+
+          onDidAttach={() => setWebviewReference({
+            serviceId: service.id,
+            webview: this.webview.view,
+          })}
+
+          useragent={service.userAgent}
+
+          disablewebsecurity
+          allowpopups
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
new file mode 100644
index 000000000..03c68b06f
--- /dev/null
+++ b/src/components/services/content/Services.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Webview from './ServiceWebview';
+import Appear from '../../ui/effects/Appear';
+
+const messages = defineMessages({
+  welcome: {
+    id: 'services.welcome',
+    defaultMessage: '!!!Welcome to Franz',
+  },
+  getStarted: {
+    id: 'services.getStarted',
+    defaultMessage: '!!!Get started',
+  },
+});
+
+@observer
+export default class Services extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+    handleIPCMessage: PropTypes.func.isRequired,
+    openWindow: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    services: [],
+    activeService: '',
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      services,
+      handleIPCMessage,
+      setWebviewReference,
+      openWindow,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services">
+        {services.length === 0 && (
+          <Appear
+            timeout={1500}
+            transitionName="slideUp"
+          >
+            <div className="services__no-service">
+              <img src="./assets/images/logo.svg" alt="" />
+              <h1>{intl.formatMessage(messages.welcome)}</h1>
+              <Appear
+                timeout={300}
+                transitionName="slideUp"
+              >
+                <Link to="/settings/recipes" className="button">
+                  {intl.formatMessage(messages.getStarted)}
+                </Link>
+              </Appear>
+            </div>
+          </Appear>
+        )}
+        {services.map(service => (
+          <Webview
+            key={service.id}
+            service={service}
+            handleIPCMessage={handleIPCMessage}
+            setWebviewReference={setWebviewReference}
+            openWindow={openWindow}
+          />
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
new file mode 100644
index 000000000..c0a68d1a5
--- /dev/null
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import TabItem from './TabItem';
+import { ctrlKey } from '../../../environment';
+
+export default SortableContainer(observer(({
+  services,
+  setActive,
+  reload,
+  toggleNotifications,
+  deleteService,
+  disableService,
+  openSettings,
+}) => (
+  <ul
+    className="tabs"
+  >
+    {services.map((service, index) => (
+      <TabItem
+        key={service.id}
+        clickHandler={() => setActive({ serviceId: service.id })}
+        service={service}
+        index={index}
+        shortcutIndex={index + 1}
+        reload={() => reload({ serviceId: service.id })}
+        toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+        deleteService={() => deleteService({ serviceId: service.id })}
+        disableService={() => disableService({ serviceId: service.id })}
+        openSettings={openSettings}
+      />
+    ))}
+    <li>
+      <button
+        className="sidebar__add-service"
+        onClick={() => openSettings({ path: 'recipes' })}
+        data-tip={`Add new service (${ctrlKey}+N)`}
+      >
+        <span className="mdi mdi-plus" />
+      </button>
+    </li>
+  </ul>
+)));
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
new file mode 100644
index 000000000..9e03d2e21
--- /dev/null
+++ b/src/components/services/tabs/TabItem.js
@@ -0,0 +1,136 @@
+import { remote } from 'electron';
+import React, { Component } from 'react';
+import { defineMessages, intlShape } from 'react-intl';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { SortableElement } from 'react-sortable-hoc';
+
+import ServiceModel from '../../../models/Service';
+import { ctrlKey } from '../../../environment';
+
+const { Menu } = remote;
+
+const messages = defineMessages({
+  reload: {
+    id: 'tabs.item.reload',
+    defaultMessage: '!!!Reload',
+  },
+  edit: {
+    id: 'tabs.item.edit',
+    defaultMessage: '!!!Edit',
+  },
+  disableNotifications: {
+    id: 'tabs.item.disableNotifications',
+    defaultMessage: '!!!Disable notifications',
+  },
+  enableNotifications: {
+    id: 'tabs.item.enableNotification',
+    defaultMessage: '!!!Enable notifications',
+  },
+  disableService: {
+    id: 'tabs.item.disableService',
+    defaultMessage: '!!!Disable Service',
+  },
+  deleteService: {
+    id: 'tabs.item.deleteService',
+    defaultMessage: '!!!Delete Service',
+  },
+});
+
+@observer
+class TabItem extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    clickHandler: PropTypes.func.isRequired,
+    shortcutIndex: PropTypes.number.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    disableService: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      service,
+      clickHandler,
+      shortcutIndex,
+      reload,
+      toggleNotifications,
+      deleteService,
+      disableService,
+      openSettings,
+    } = this.props;
+    const { intl } = this.context;
+
+
+    const menuTemplate = [{
+      label: service.name || service.recipe.name,
+      enabled: false,
+    }, {
+      type: 'separator',
+    }, {
+      label: intl.formatMessage(messages.reload),
+      click: reload,
+    }, {
+      label: intl.formatMessage(messages.edit),
+      click: () => openSettings({
+        path: `services/edit/${service.id}`,
+      }),
+    }, {
+      type: 'separator',
+    }, {
+      label: service.isNotificationEnabled
+        ? intl.formatMessage(messages.disableNotifications)
+        : intl.formatMessage(messages.enableNotifications),
+      click: () => toggleNotifications(),
+    }, {
+      label: intl.formatMessage(messages.disableService),
+      click: () => disableService(),
+    }, {
+      type: 'separator',
+    }, {
+      label: intl.formatMessage(messages.deleteService),
+      click: () => deleteService(),
+    }];
+    const menu = Menu.buildFromTemplate(menuTemplate);
+
+    return (
+      <li
+        className={classnames({
+          'tab-item': true,
+          'is-active': service.isActive,
+          'has-custom-icon': service.hasCustomIcon,
+        })}
+        onClick={clickHandler}
+        onContextMenu={() => menu.popup(remote.getCurrentWindow())}
+        data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`}
+      >
+        <img
+          src={service.icon}
+          className="tab-item__icon"
+          alt=""
+        />
+        {service.unreadDirectMessageCount > 0 && (
+          <span className="tab-item__message-count">
+            {service.unreadDirectMessageCount}
+          </span>
+        )}
+        {service.unreadIndirectMessageCount > 0
+          && service.unreadDirectMessageCount === 0
+          && service.isIndirectMessageBadgeEnabled && (
+            <span className="tab-item__message-count is-indirect">
+            •
+            </span>
+          )}
+      </li>
+    );
+  }
+}
+
+export default SortableElement(TabItem);
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
new file mode 100644
index 000000000..fdb2c0a59
--- /dev/null
+++ b/src/components/services/tabs/Tabbar.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+
+import TabBarSortableList from './TabBarSortableList';
+
+@observer
+export default class TabBar extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    setActive: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
+    enableToolTip: PropTypes.func.isRequired,
+    disableToolTip: PropTypes.func.isRequired,
+    reorder: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    updateService: PropTypes.func.isRequired,
+  }
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const {
+      enableToolTip,
+      reorder,
+    } = this.props;
+
+    enableToolTip();
+    reorder({ oldIndex, newIndex });
+  };
+
+  disableService = ({ serviceId }) => {
+    const { updateService } = this.props;
+
+    if (serviceId) {
+      updateService({
+        serviceId,
+        serviceData: {
+          isEnabled: false,
+        },
+        redirect: false,
+      });
+    }
+  }
+
+  render() {
+    const {
+      services,
+      setActive,
+      openSettings,
+      disableToolTip,
+      reload,
+      toggleNotifications,
+      deleteService,
+    } = this.props;
+
+    return (
+      <div>
+        <TabBarSortableList
+          services={services}
+          setActive={setActive}
+          onSortEnd={this.onSortEnd}
+          onSortStart={disableToolTip}
+          reload={reload}
+          toggleNotifications={toggleNotifications}
+          deleteService={deleteService}
+          disableService={this.disableService}
+          openSettings={openSettings}
+          distance={20}
+          axis="y"
+          lockAxis="y"
+          helperClass="is-reordering"
+        />
+      </div>
+    );
+  }
+}