From 8af4a487da95593d18734875783688a738b020f5 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 26 Sep 2018 22:49:35 +0200 Subject: [PATCH] Basic component rendering --- .../components/Group/index.js | 31 +++++++- .../Notification/NotificationGroups/index.js | 77 +++++++++++-------- src/components/Notification/index.js | 2 +- src/constants/notifications.js | 8 ++ src/views/Landing/index.js | 2 + 5 files changed, 86 insertions(+), 34 deletions(-) create mode 100644 src/constants/notifications.js diff --git a/src/components/Notification/NotificationGroups/components/Group/index.js b/src/components/Notification/NotificationGroups/components/Group/index.js index 7559e7a2..2c98f7e9 100644 --- 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 ( - Group +
+ {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} +
+ + {groupNotifications.map(notification => ( + + ))} + ); } diff --git a/src/components/Notification/NotificationGroups/index.js b/src/components/Notification/NotificationGroups/index.js index 2e5ad4d2..2c665807 100644 --- 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 ( - {sortedNotifications.map(group => ( + {Object.keys(sortedNotifications).map(group => ( ))} diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 5c55082b..6654a152 100644 --- 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'; diff --git a/src/constants/notifications.js b/src/constants/notifications.js new file mode 100644 index 00000000..1ffed4c1 --- /dev/null +++ b/src/constants/notifications.js @@ -0,0 +1,8 @@ +export default { + PRIORITY: { + error: 0, + warning: 1, + info: 2, + success: 3, + }, +}; \ No newline at end of file diff --git a/src/views/Landing/index.js b/src/views/Landing/index.js index 398b9ef4..15b8bf55 100644 --- 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) && (
+

The private bank in your hands.

TREZOR Wallet is an easy-to-use interface for your TREZOR.

TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.