mock_notifications.js

import React from 'react';
import { connect } from 'react-redux';
import onClickOutside from 'react-onclickoutside';
import * as NotificationActions from '../../redux/actions/notifications';
import './notifications.scss';
import ToggleIcon from './toggleIcon/';
import Drawer from './drawer/';
import { groupBy, isUndefined } from 'lodash';

class notificationContainer extends React.Component {
  componentDidMount() {
    const { startNotificationsPolling, data: { url } } = this.props;

    startNotificationsPolling(url);
  }

  handleClickOutside() {
    const { isDrawerOpen, isReady, toggleDrawer } = this.props;

    if (isReady && isDrawerOpen) {
      toggleDrawer();
    }
  }

  render() {
    let tempProps = Object.assign({}, this.props, {
      expandedGroup: 'React devs2',
      // isDrawerOpen: true,
      // isReady: true,
      isPolling: false,
      notifications: {
        'React devs': [
          {
            actions: {
              links: [
                {
                  href: 'https://theforeman.org/blog',
                  title: 'Link to blog'
                }
              ]
            },
            created_at: '2017-02-23T05:00:28.715Z',
            group: 'React devs',
            id: 1,
            level: 'info',
            seen: false,
            text: 'sample text'
          }
        ],
        'React devs2': [
          {
            actions: {
              links: [
                {
                  href: 'https://theforeman.org/blog',
                  title: 'Link to blog'
                }
              ]
            },
            created_at: '2017-03-14T11:25:07.138Z',
            group: 'React devs2',
            id: 6,
            level: 'info',
            seen: false,
            text: 'Hi! This is a notification message'
          }
        ]
      },
      hasUnreadMessages: true
    });

    // console.log('tempProps', tempProps);

    const {
      notifications,
      isDrawerOpen,
      toggleDrawer,
      expandGroup,
      expandedGroup,
      onMarkAsRead,
      onMarkGroupAsRead,
      hasUnreadMessages,
      isReady,
      onClickedLink
    } = tempProps;

    return (
      <div id="notifications_container">
        <ToggleIcon hasUnreadMessages={hasUnreadMessages} onClick={toggleDrawer} />
        {isReady &&
          isDrawerOpen && (
            <Drawer
              onExpandGroup={expandGroup}
              onClickedLink={onClickedLink}
              onMarkAsRead={onMarkAsRead}
              onMarkGroupAsRead={onMarkGroupAsRead}
              expandedGroup={expandedGroup}
              notificationGroups={notifications}
              toggleDrawer={toggleDrawer}
            />
          )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  const {
    notifications,
    isDrawerOpen,
    expandedGroup,
    isPolling,
    hasUnreadMessages
  } = state.notifications;

  return {
    isDrawerOpen,
    isPolling,
    notifications: groupBy(notifications, 'group'),
    expandedGroup,
    isReady: !isUndefined(notifications),
    hasUnreadMessages
  };
};

export default connect(mapStateToProps, NotificationActions)(onClickOutside(notificationContainer));