1 files changed, 148 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>
+    );
+  }
+}