Created basic components skeleton

src/components/Notification/NotificationGroups/components/Group/index.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+class Group extends Component {
+    hide() {
+
+    }
+
+    show() {
+
+    }
+
+    render() {
+        return (
+            <Wrapper>
+                Group
+            </Wrapper>
+        );
+    }
+}
+
+export default Group;

src/components/Notification/NotificationGroups/index.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import Group from './components/Group';
+
+const Wrapper = styled.div``;
+
+class NotificationsGroup extends Component {
+    constructor() {
+        super();
+        this.notificationPriority = {
+            error: 0,
+            warning: 1,
+            info: 2,
+            success: 3,
+        };
+
+        this.notifications = [
+            { type: 'warning' },
+            { type: 'error' },
+            { type: 'info' },
+            { type: 'error' },
+            { type: 'warning' },
+            { type: 'success' },
+            { type: 'error' },
+            { type: 'error' },
+        ];
+    }
+
+    getGroupNotifications(notifications, type) {
+        return notifications.filter(item => item.type === type);
+    }
+
+    groupNotifications = (items, key) => items.reduce(
+        (result, item) => ({
+            ...result,
+            [item[key]]: [...(result[item[key]] || []), item],
+        }),
+        {},
+    );
+
+    sortByPriority(notifications) {
+        const sorted = Object.keys(notifications).sort((a, b) => {
+            // sort
+        });
+        return sorted;
+    }
+
+    render() {
+        const { notifications } = this;
+        const notificationGroups = this.groupNotifications(notifications, 'type');
+        const sortedNotifications = this.sortByPriority(notificationGroups);
+
+        return (
+            <Wrapper>
+                {sortedNotifications.map(group => (
+                    <Group
+                        notifications={this.getGroupNotifications(group.type, sortedNotifications)}
+                        type={group.type}
+                    />
+                ))}
+            </Wrapper>
+        );
+    }
+}
+
+export default NotificationsGroup;

src/components/Notification/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import styled, { css } from 'styled-components';