initial commit

2 files changed, 223 insertions, 0 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
new file mode 100644
index 000000000..f60c170a8
--- /dev/null
+++ b/src/components/layout/AppLayout.js
@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import InfoBar from '../ui/InfoBar';
+import globalMessages from '../../i18n/globalMessages';
+
+function createMarkup(HTMLString) {
+  return { __html: HTMLString };
+}
+
+const messages = defineMessages({
+  servicesUpdated: {
+    id: 'infobar.servicesUpdated',
+    defaultMessage: '!!!Your services have been updated.',
+  },
+  updateAvailable: {
+    id: 'infobar.updateAvailable',
+    defaultMessage: '!!!A new update for Franz is available.',
+  },
+  buttonReloadServices: {
+    id: 'infobar.buttonReloadServices',
+    defaultMessage: '!!!Reload services',
+  },
+  buttonInstallUpdate: {
+    id: 'infobar.buttonInstallUpdate',
+    defaultMessage: '!!!Restart & install update',
+  },
+  requiredRequestsFailed: {
+    id: 'infobar.requiredRequestsFailed',
+    defaultMessage: '!!!Could not load services and user information',
+  },
+});
+
+@observer
+export default class AppLayout extends Component {
+  static propTypes = {
+    sidebar: PropTypes.element.isRequired,
+    services: PropTypes.element.isRequired,
+    children: PropTypes.element,
+    news: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isOnline: PropTypes.bool.isRequired,
+    showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
+    appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    removeNewsItem: PropTypes.func.isRequired,
+    reloadServicesAfterUpdate: PropTypes.func.isRequired,
+    installAppUpdate: PropTypes.func.isRequired,
+    showRequiredRequestsError: PropTypes.bool.isRequired,
+    areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
+    retryRequiredRequests: PropTypes.func.isRequired,
+    areRequiredRequestsLoading: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    children: [],
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      sidebar,
+      services,
+      children,
+      isOnline,
+      news,
+      showServicesUpdatedInfoBar,
+      appUpdateIsDownloaded,
+      removeNewsItem,
+      reloadServicesAfterUpdate,
+      installAppUpdate,
+      showRequiredRequestsError,
+      areRequiredRequestsSuccessful,
+      retryRequiredRequests,
+      areRequiredRequestsLoading,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div>
+        <div className="app">
+          {sidebar}
+          <div className="app__service">
+            {news.length > 0 && news.map(item => (
+              <InfoBar
+                key={item.id}
+                position="top"
+                type={item.type}
+                sticky={item.sticky}
+                onHide={() => removeNewsItem({ newsId: item.id })}
+              >
+                <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+              </InfoBar>
+            ))}
+            {!isOnline && (
+              <InfoBar
+                type="danger"
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+              </InfoBar>
+            )}
+            {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+              <InfoBar
+                type="danger"
+                ctaLabel="Try again"
+                ctaLoading={areRequiredRequestsLoading}
+                sticky
+                onClick={retryRequiredRequests}
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(messages.requiredRequestsFailed)}
+              </InfoBar>
+            )}
+            {showServicesUpdatedInfoBar && (
+              <InfoBar
+                type="primary"
+                ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                onClick={reloadServicesAfterUpdate}
+                sticky
+              >
+                <span className="mdi mdi-power-plug" />
+                {intl.formatMessage(messages.servicesUpdated)}
+              </InfoBar>
+            )}
+            {appUpdateIsDownloaded && (
+              <InfoBar
+                type="primary"
+                ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                onClick={installAppUpdate}
+                sticky
+              >
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.updateAvailable)}
+              </InfoBar>
+            )}
+            {services}
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
new file mode 100644
index 000000000..4aee1ec60
--- /dev/null
+++ b/src/components/layout/Sidebar.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Tabbar from '../services/tabs/Tabbar';
+import { ctrlKey } from '../../environment';
+
+const messages = defineMessages({
+  settings: {
+    id: 'sidebar.settings',
+    defaultMessage: '!!!Settings',
+  },
+});
+
+export default class Sidebar extends Component {
+  static propTypes = {
+    openSettings: PropTypes.func.isRequired,
+    isPremiumUser: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    isPremiumUser: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    tooltipEnabled: true,
+  };
+
+  enableToolTip() {
+    this.setState({ tooltipEnabled: true });
+  }
+
+  disableToolTip() {
+    this.setState({ tooltipEnabled: false });
+  }
+
+  render() {
+    const { openSettings, isPremiumUser } = this.props;
+    const { intl } = this.context;
+    return (
+      <div className="sidebar">
+        <Tabbar
+          {...this.props}
+          enableToolTip={() => this.enableToolTip()}
+          disableToolTip={() => this.disableToolTip()}
+        />
+        <button
+          onClick={openSettings}
+          className="sidebar__settings-button"
+          data-tip={`Settings (${ctrlKey}+,)`}
+        >
+          {isPremiumUser && (
+            <span className="emoji">
+              <img src="./assets/images/emoji/star.png" alt="" />
+            </span>
+          )}
+          <img
+            src="./assets/images/logo.svg"
+            className="sidebar__logo"
+            alt=""
+          />
+          {intl.formatMessage(messages.settings)}
+        </button>
+        {this.state.tooltipEnabled && (
+          <ReactTooltip place="right" type="dark" effect="solid" />
+        )}
+      </div>
+    );
+  }
+}