Connect actions notification with grouped notifications

src/components/Notification/NotificationGroups/index.js

@@ -1,56 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import { PRIORITY } from 'constants/notifications';
-import Group from './components/Group';
-
-const Wrapper = styled.div``;
-
-class NotificationsGroup extends Component {
-    constructor() {
-        super();
-        this.notifications = [
-            { type: 'warning', title: 'adddaa', message: 'aaaa' },
-            { type: 'error', title: 'aaddda', message: 'aaaa' },
-            { type: 'info', title: 'aafffa', message: 'aaaa' },
-            { type: 'error', title: 'aggaa', message: 'aaaa' },
-            { type: 'warning', title: 'aasssa', message: 'aaaa' },
-            { type: 'success', title: 'afaa', message: 'aaaa' },
-            { type: 'error', title: 'aada', message: 'aaaa' },
-            { type: 'error', title: 'aafffa', message: 'aaaa' },
-        ];
-    }
-
-    groupNotifications = notifications => notifications
-        .reduce((acc, obj) => {
-            const key = obj.type;
-            if (!acc[key]) {
-                acc[key] = [];
-            }
-            acc[key].push(obj);
-            return acc;
-        }, {});
-
-    sortByPriority(notifications) {
-        return notifications;
-    }
-
-    render() {
-        const { notifications } = this;
-        const notificationGroups = this.groupNotifications(notifications);
-        const sortedNotifications = this.sortByPriority(notificationGroups);
-
-        return (
-            <Wrapper>
-                {Object.keys(sortedNotifications).map(group => (
-                    <Group
-                        groupNotifications={notificationGroups[group]}
-                        type={group}
-                    />
-                ))}
-            </Wrapper>
-        );
-    }
-}
-
-export default NotificationsGroup;

src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js

@@ -56,7 +56,7 @@ class Group extends Component {
     }
 
     render() {
-        const { type, groupNotifications } = this.props;
+        const { type, groupNotifications, close } = this.props;
         const color = getColor(type);
         return (
             <Wrapper>
@@ -92,6 +92,9 @@ class Group extends Component {
                                 type={notification.type}
                                 title={notification.title}
                                 message={notification.message}
+                                cancelable={notification.cancelable}
+                                actions={notification.actions}
+                                close={close}
                             />
                         ))}
                 </Body>
@@ -102,6 +105,7 @@ class Group extends Component {
 
 Group.propTypes = {
     type: PropTypes.string,
+    close: PropTypes.func.isRequired,
     groupNotifications: PropTypes.arrayOf({
         key: PropTypes.string,
         type: PropTypes.string,

src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { PRIORITY } from 'constants/notifications';
+import Group from './components/Group';
+
+const Wrapper = styled.div``;
+
+class NotificationsGroup extends Component {
+    groupNotifications = notifications => notifications
+        .reduce((acc, obj) => {
+            const key = obj.type;
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(obj);
+            return acc;
+        }, {});
+
+    sortByPriority(notifications) {
+        return notifications;
+    }
+
+    render() {
+        const { close, notifications } = this.props;
+        // const notifications = [
+        //     {
+        //         key: '1',
+        //         title: 'this is a title of error notification',
+        //         type: 'error',
+        //         message: 'this is a message of error notification',
+        //     },
+        //     {
+        //         key: '2',
+        //         title: 'this is a title of warning notification',
+        //         type: 'warning',
+        //         message: 'this is a message of warning notification',
+        //     },
+        //     {
+        //         key: '3',
+        //         title: 'this is a title of warning notification',
+        //         type: 'warning',
+        //         message: 'this is a message of warning notification',
+        //     },
+        //     {
+        //         key: '4',
+        //         title: 'this is a title of warning notification',
+        //         type: 'warning',
+        //         message: 'this is a message of warning notification',
+        //     },
+        //     {
+        //         key: '5',
+        //         title: 'this is a title of warning notification',
+        //         type: 'info',
+        //         message: 'this is a message of warning notification',
+        //     },
+        //     {
+        //         key: '6',
+        //         title: 'this is a title of info notification',
+        //         type: 'info',
+        //         message: 'this is a message of info notification',
+        //     },
+        // ];
+        const notificationGroups = this.groupNotifications(notifications);
+        const sortedNotifications = this.sortByPriority(notificationGroups);
+
+        return (
+            <Wrapper>
+                {Object.keys(sortedNotifications).map(group => (
+                    <Group
+                        groupNotifications={notificationGroups[group]}
+                        type={group}
+                        close={close}
+                    />
+                ))}
+            </Wrapper>
+        );
+    }
+}
+
+NotificationsGroup.propTypes = {
+    notifications: PropTypes.array.isRequired,
+    close: PropTypes.func.isRequired,
+};
+
+export default NotificationsGroup;

src/components/notifications/Context/components/Action/index.js

@@ -1,20 +1,15 @@
 /* @flow */
 import * as React from 'react';
-import { Notification } from 'components/Notification';
+import NotificationsGroups from './components/NotificationsGroups';
 
 import type { Props } from '../../index';
 
 export default (props: Props) => {
     const { notifications, close } = props;
-    return notifications.map(n => (
+    return (
-        <Notification
+        <NotificationsGroups
-            key={n.title}
+            notifications={notifications}
-            type={n.type}
-            title={n.title}
-            message={n.message}
-            cancelable={n.cancelable}
-            actions={n.actions}
             close={close}
         />
-    ));
+    );
 };