Basic component rendering

6 years ago · 8af4a487da
parent 00d0fc1ccb
commit 8af4a487da
5 changed files with 86 additions and 34 deletions
--- a/src/components/Notification/NotificationGroups/components/Group/index.js
+++ b/src/components/Notification/NotificationGroups/components/Group/index.js
@ -1,8 +1,24 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import colors from 'config/colors';
+import { Notification } from 'components/Notification';

 const Wrapper = styled.div``;

+const Header = styled.div`
+    display: flex;
+    background: ${colors.WHITE};
+    padding: 5px 10px;
+    border-bottom: 1px solid ${colors.BACKGROUND};
+`;
+
+const Body = styled.div`
+`;
+
+const Title = styled.div`
+    color: ${props => props.color};
+`;
+
 class Group extends Component {
    hide() {

@ -13,9 +29,22 @@ class Group extends Component {
    }

    render() {
+        const { type, groupNotifications, color } = this.props;
        return (
            <Wrapper>
-                Group
+                <Header>
+                    <Title color={color}>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}</Title>
+                </Header>
+                <Body>
+                    {groupNotifications.map(notification => (
+                        <Notification
+                            key={notification.title}
+                            type={notification.type}
+                            title={notification.title}
+                            message={notification.message}
+                        />
+                    ))}
+                </Body>
            </Wrapper>
        );
    }
--- a/src/components/Notification/NotificationGroups/index.js
+++ b/src/components/Notification/NotificationGroups/index.js
@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import colors from 'config/colors';

+import { PRIORITY } from 'constants/notifications';
 import Group from './components/Group';

 const Wrapper = styled.div``;
@ -8,44 +10,54 @@ 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' },
+            { type: 'warning', title: 'aaa', message: 'aaaa' },
+            { type: 'error', title: 'aaa', message: 'aaaa' },
+            { type: 'info', title: 'aaa', message: 'aaaa' },
+            { type: 'error', title: 'aaa', message: 'aaaa' },
+            { type: 'warning', title: 'aaa', message: 'aaaa' },
+            { type: 'success', title: 'aaa', message: 'aaaa' },
+            { type: 'error', title: 'aaa', message: 'aaaa' },
+            { type: 'error', title: 'aaa', message: 'aaaa' },
        ];
    }

-    getGroupNotifications(notifications, type) {
-        return notifications.filter(item => item.type === type);
-    }
+    getColor = (type) => {
+        let color;
+        switch (type) {
+            case 'info':
+                color = colors.INFO_PRIMARY;
+                break;
+            case 'error':
+                color = colors.ERROR_PRIMARY;
+                break;
+            case 'warning':
+                color = colors.WARNING_PRIMARY;
+                break;
+            case 'success':
+                color = colors.SUCCESS_PRIMARY;
+                break;
+            default:
+                color = null;
+        }
+        return color;
+    };

-    groupNotifications = (items, key) => items.reduce(
-        (result, item) => ({
-            ...result,
-            [item[key]]: [...(result[item[key]] || []), item],
-        }),
-        {},
-    );
+    groupNotifications = notifications => notifications.reduce((acc, obj) => {
+        const key = obj.type;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(obj);
+
+        return acc;
+    }, {});

    sortByPriority(notifications) {
-        const sorted = Object.keys(notifications).sort((a, b) => {
-            // sort
-        });
-        return sorted;
+        return notifications;
    }

+
    render() {
        const { notifications } = this;
        const notificationGroups = this.groupNotifications(notifications, 'type');
@ -53,10 +65,11 @@ class NotificationsGroup extends Component {

        return (
            <Wrapper>
-                {sortedNotifications.map(group => (
+                {Object.keys(sortedNotifications).map(group => (
                    <Group
-                        notifications={this.getGroupNotifications(group.type, sortedNotifications)}
-                        type={group.type}
+                        groupNotifications={notificationGroups[group]}
+                        color={this.getColor(group)}
+                        type={group}
                    />
                ))}
            </Wrapper>
--- a/src/components/Notification/index.js
+++ b/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';
--- a/src/constants/notifications.js
+++ b/src/constants/notifications.js
@ -0,0 +1,8 @@
+export default {
+    PRIORITY: {
+        error: 0,
+        warning: 1,
+        info: 2,
+        success: 3,
+    },
+};
--- a/src/views/Landing/index.js
+++ b/src/views/Landing/index.js
@ -4,6 +4,7 @@ import CaseImage from 'images/case.png';
 import styled from 'styled-components';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
+import GroupNotifications from 'components/Notification/NotificationGroups';
 import Log from 'components/Log';
 import Link from 'components/Link';
 import Loader from 'components/Loader';
@ -108,6 +109,7 @@ export default (props: Props) => {
                        {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
                            <div>
                                <TitleWrapper>
+                                    <GroupNotifications />
                                    <H2 claim>The private bank in your hands.</H2>
                                    <P>TREZOR Wallet is an easy-to-use interface for your TREZOR.</P>
                                    <P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>