System messages showed to users

Author: SemaiCZE

src/components/layout/Sidebar/Admin.js

@@ -29,7 +29,7 @@ const Admin = ({ currentUrl, links: { ADMIN_INSTANCES_URI, USERS_URI, FAILURES_U
       link={FAILURES_URI}
     />
     <MenuItem
-      icon="flag"
+      icon="envelope"
       title={<FormattedMessage id="app.sidebar.menu.admin.messages" defaultMessage="System Messages" />}
       currentPath={currentUrl}
       link={MESSAGES_URI}

src/components/widgets/Header/Header.js

@@ -5,6 +5,7 @@ import { IndexLink } from 'react-router';
 import MediaQuery from 'react-responsive';
 
 import HeaderNotificationsContainer from '../../../containers/HeaderNotificationsContainer';
+import HeaderSystemMessagesContainer from '../../../containers/HeaderSystemMessagesContainer';
 import HeaderLanguageSwitching from '../HeaderLanguageSwitching';
 import ClientOnly from '../../helpers/ClientOnly';
 import { LoadingIcon } from '../../icons';
@@ -76,6 +77,7 @@ class Header extends Component {
           </ClientOnly>
           <div className="navbar-custom-menu">
             <ul className="nav navbar-nav">
+              <HeaderSystemMessagesContainer />
               <HeaderNotificationsContainer />
               {availableLangs.map(lang => (
                 <HeaderLanguageSwitching lang={lang} active={currentLang === lang} key={lang} currentUrl={currentUrl} />

src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import classnames from 'classnames';
+import { Label, Alert } from 'react-bootstrap';
+
+import Icon from '../../icons';
+import Markdown from '../Markdown';
+import { getLocalizedText } from '../../../helpers/localizedData';
+
+import styles from './HeaderSystemMessagesDropdown.less';
+
+const HeaderSystemMessagesDropdown = ({ isOpen, toggleOpen, markClick, systemMessages, intl: { locale } }) => (
+  <li
+    className={classnames({
+      'notifications-menu': true,
+      dropdown: true,
+      open: isOpen,
+    })}>
+    <a href="#" className="dropdown-toggle" onClick={toggleOpen}>
+      <Icon icon={['far', 'envelope']} />
+      {systemMessages.length > 0 && <Label bsStyle="warning">{systemMessages.length}</Label>}
+    </a>
+    <ul className={classnames(['dropdown-menu', styles.dropdownMenu])} onClick={markClick}>
+      <li className="header">
+        <FormattedMessage
+          id="app.systemMessages.title"
+          defaultMessage="You have {count, number} active {count, plural, one {message} two {messages} other {messages}}"
+          values={{ count: systemMessages.length }}
+        />
+      </li>
+      <li>
+        <ul className={classnames(['menu', styles.messageList])}>
+          {systemMessages.map((message, idx) => (
+            <Alert key={idx} bsStyle={message.type} className={styles.messageAlert}>
+              <Markdown source={getLocalizedText(message, locale)} />
+            </Alert>
+          ))}
+        </ul>
+      </li>
+    </ul>
+  </li>
+);
+
+HeaderSystemMessagesDropdown.propTypes = {
+  isOpen: PropTypes.bool,
+  showAll: PropTypes.bool,
+  toggleOpen: PropTypes.func.isRequired,
+  markClick: PropTypes.func.isRequired,
+  systemMessages: PropTypes.array.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(HeaderSystemMessagesDropdown);

src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.less

@@ -0,0 +1,14 @@
+.dropdownMenu {
+  width: 42vw !important;
+  min-width: 400px !important;
+}
+
+.messageList {
+  max-height: 80vh !important;
+}
+
+.messageAlert {
+  margin-bottom: 0px;
+  border-radius: 0px !important;
+  border-style: none;
+}

src/components/widgets/HeaderSystemMessagesDropdown/index.js

@@ -0,0 +1,2 @@
+import HeaderSystemMessagesDropdown from './HeaderSystemMessagesDropdown';
+export default HeaderSystemMessagesDropdown;

src/containers/HeaderSystemMessagesContainer/HeaderSystemMessagesContainer.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { canUseDOM } from 'exenv';
+import { connect } from 'react-redux';
+import HeaderSystemMessagesDropdown from '../../components/widgets/HeaderSystemMessagesDropdown';
+import { readyActiveSystemMessagesSelector, fetchManyUserStatus } from '../../redux/selectors/systemMessages';
+import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';
+import { fetchAllUserMessages } from '../../redux/modules/systemMessages';
+
+class HeaderSystemMessagesContainer extends Component {
+  state = { isOpen: false };
+
+  static loadAsync = (params, dispatch) => Promise.all([dispatch(fetchAllUserMessages)]);
+
+  //
+  // Monitor clicking and hide the notifications panel when the user clicks sideways
+
+  componentWillMount = () => {
+    this.props.loadAsync();
+    this.lastClick = 0;
+    if (canUseDOM) {
+      window.addEventListener('click', () => this.clickAnywhere());
+    }
+  };
+
+  componentWillUnMount = () => {
+    if (canUseDOM) {
+      window.removeEventListener(() => this.clickAnywhere());
+    }
+  };
+
+  clickAnywhere = () => {
+    if (this.state.isOpen === true && this.isClickingSomewhereElse()) {
+      this.close();
+    }
+  };
+
+  markClick = () => {
+    this.lastClick = Date.now();
+  };
+
+  /**
+   * Determines, whether this click is on the container or not - a 50ms tolerance
+   * between now and the time of last click on the container is defined.
+   */
+  isClickingSomewhereElse = () => Date.now() - this.lastClick > 50;
+
+  toggleOpen = e => {
+    e.preventDefault();
+    this.state.isOpen ? this.close() : this.open();
+    this.markClick();
+  };
+
+  close = () => {
+    this.setState({ isOpen: false });
+  };
+
+  open = () => this.setState({ isOpen: true });
+
+  render() {
+    const { systemMessages, fetchStatus } = this.props;
+    const { isOpen } = this.state;
+
+    return (
+      <FetchManyResourceRenderer fetchManyStatus={fetchStatus} loading={<span />}>
+        {() => (
+          <HeaderSystemMessagesDropdown
+            isOpen={isOpen}
+            toggleOpen={this.toggleOpen}
+            markClick={this.markClick}
+            systemMessages={systemMessages}
+          />
+        )}
+      </FetchManyResourceRenderer>
+    );
+  }
+}
+
+HeaderSystemMessagesContainer.propTypes = {
+  systemMessages: PropTypes.array.isRequired,
+  fetchStatus: PropTypes.string,
+  loadAsync: PropTypes.func.isRequired,
+};
+
+export default connect(
+  state => ({
+    fetchStatus: fetchManyUserStatus(state),
+    systemMessages: readyActiveSystemMessagesSelector(state),
+  }),
+  dispatch => ({
+    loadAsync: () => HeaderSystemMessagesContainer.loadAsync({}, dispatch),
+  })
+)(HeaderSystemMessagesContainer);

src/containers/HeaderSystemMessagesContainer/index.js

@@ -0,0 +1,2 @@
+import HeaderSystemMessagesContainer from './HeaderSystemMessagesContainer';
+export default HeaderSystemMessagesContainer;

src/pages/SystemMessages/SystemMessages.js

@@ -104,7 +104,7 @@ class SystemMessages extends Component {
             breadcrumbs={[
               {
                 text: <FormattedMessage id="app.systemMessages.title" defaultMessage="System Messages" />,
-                iconName: 'flag',
+                iconName: 'envelope',
               },
             ]}>
             <React.Fragment>

src/redux/modules/systemMessages.js

@@ -16,6 +16,11 @@ export const fetchAllMessages = actions.fetchMany({
   endpoint: fetchManyEndpoint,
 });
 
+export const fetchManyUserEndpoint = '/notifications';
+export const fetchAllUserMessages = actions.fetchMany({
+  endpoint: fetchManyUserEndpoint,
+});
+
 /**
  * Reducer takes mainly care about all the state of individual attachments
  */

src/redux/selectors/systemMessages.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { fetchManyEndpoint } from '../modules/systemMessages';
+import { fetchManyEndpoint, fetchManyUserEndpoint } from '../modules/systemMessages';
 import { isReady, getJsData } from '../helpers/resourceManager';
 
 const getSystemMessages = state => state.systemMessages;
@@ -15,6 +15,11 @@ export const fetchManyStatus = createSelector(
   state => state.getIn(['fetchManyStatus', fetchManyEndpoint])
 );
 
+export const fetchManyUserStatus = createSelector(
+  getSystemMessages,
+  state => state.getIn(['fetchManyStatus', fetchManyUserEndpoint])
+);
+
 export const getMessage = messageId =>
   createSelector(
     systemMessagesSelector,
@@ -30,3 +35,11 @@ export const readySystemMessagesSelector = createSelector(
       .map(getJsData)
       .toArray()
 );
+
+export const readyActiveSystemMessagesSelector = createSelector(
+  readySystemMessagesSelector,
+  messages =>
+    messages
+      .filter(m => m.visibleFrom * 1000 <= Date.now() && m.visibleTo * 1000 >= Date.now())
+      .sort((a, b) => a.visibleTo - b.visibleTo) // show messages with shortest expiration first
+);