flowtype for Notification components

src/components/Notification/components/NotificationButton/index.js

@@ -1,10 +1,23 @@
-import React from 'react';
+/* @flow */
+
+import * as React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import { TRANSITION } from 'config/variables';
 
+type Props = {
+    type: string;
+    icon?: {
+        type: Array<string>;
+        color: string;
+        size: number;
+    };
+    onClick: () => void;
+    children: React.Node;
+};
+
 const Wrapper = styled.button`
     padding: 12px 58px;
     border-radius: 3px;
@@ -62,10 +75,9 @@ const IconWrapper = styled.span`
 `;
 
 const NotificationButton = ({
-    children, className, icon, onClick = () => { }, type = null,
-}) => (
+    type, icon, onClick, children,
+}: Props) => (
     <Wrapper
-        className={className}
         icon={icon}
         onClick={onClick}
         type={type}
@@ -84,15 +96,14 @@ const NotificationButton = ({
 );
 
 NotificationButton.propTypes = {
-    children: PropTypes.node.isRequired,
     type: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
     icon: PropTypes.shape({
         type: PropTypes.arrayOf(PropTypes.string).isRequired,
         color: PropTypes.string,
         size: PropTypes.number,
     }),
+    onClick: PropTypes.func,
+    children: PropTypes.node.isRequired,
 };
 
 export default NotificationButton;

src/components/Notification/index.js

@@ -1,9 +1,8 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
+import PropTypes from 'prop-types';
 import media from 'styled-media-query';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
 import { getColor, getIcon } from 'utils/notification';
@@ -13,16 +12,11 @@ import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 import * as NotificationActions from 'actions/NotificationActions';
 import Loader from 'components/Loader';
-import type { Action, State } from 'flowtype';
+
 import NotificationButton from './components/NotificationButton';
 
 type Props = {
-    key?: number,
-    notifications: $ElementType<State, 'notifications'>,
-    close: (notif?: any) => Action,
-};
-
-type NProps = {
+    key?: React.Key,
     type: string,
     cancelable?: boolean;
     title: string;
@@ -128,12 +122,11 @@ const ActionContent = styled.div`
     `}
 `;
 
-export const Notification = (props: NProps): React$Element<string> => {
+const Notification = (props: Props): React$Element<string> => {
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
 
-
     return (
-        <Wrapper type={props.type}>
+        <Wrapper key={props.key} type={props.type}>
             {props.loading && <Loader size={50} /> }
             {props.cancelable && (
                 <CloseClick onClick={() => close()}>
@@ -167,7 +160,6 @@ export const Notification = (props: NProps): React$Element<string> => {
                             <NotificationButton
                                 key={action.label}
                                 type={props.type}
-                                text={action.label}
                                 onClick={() => { close(); action.callback(); }}
                             >{action.label}
                             </NotificationButton>
@@ -179,26 +171,15 @@ export const Notification = (props: NProps): React$Element<string> => {
     );
 };
 
-export const NotificationGroup = (props: Props) => {
-    const { notifications, close } = props;
-    return notifications.map(n => (
-        <Notification
-            key={n.title}
-            type={n.type}
-            title={n.title}
-            message={n.message}
-            cancelable={n.cancelable}
-            actions={n.actions}
-            close={close}
-        />
-    ));
+Notification.propTypes = {
+    key: PropTypes.string,
+    type: PropTypes.string.isRequired,
+    cancelable: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string,
+    actions: PropTypes.arrayOf(PropTypes.func),
+    close: PropTypes.func,
+    loading: PropTypes.bool,
 };
 
-export default connect(
-    state => ({
-        notifications: state.notifications,
-    }),
-    dispatch => ({
-        close: bindActionCreators(NotificationActions.close, dispatch),
-    }),
-)(NotificationGroup);
+export default Notification;

src/components/notifications/App/components/OnlineStatus/index.js

@@ -1,11 +1,11 @@
 /* @flow */
 import * as React from 'react';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 import type { Props } from '../../index';
 
 export default (props: Props) => {
     const { online } = props.wallet;
     if (online) return null;
-    return (<Notification type="error" title="Wallet is offline" />);
+    return (<Notification key="wallet-offline" type="error" title="Wallet is offline" />);
 };

src/components/notifications/App/components/UpdateBridge/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 import type { Props } from '../../index';
 
@@ -8,6 +8,7 @@ export default (props: Props) => {
     if (props.connect.transport && props.connect.transport.outdated) {
         return (
             <Notification
+                key="update-bridge"
                 type="warning"
                 title="New Trezor Bridge is available"
                 actions={

src/components/notifications/App/components/UpdateFirmware/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 import type { Props } from '../../index';
 
@@ -10,6 +10,7 @@ export default (props: Props) => {
     if (!outdated) return null;
     return (
         <Notification
+            key="update-firmware"
             type="warning"
             title="Firmware update"
             actions={

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

@@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 import type { Props } from '../../index';
 

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 import { getIcon, getColor } from 'utils/notification';
 
 const Wrapper = styled.div``;

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

@@ -1,5 +1,7 @@
 /* @flow */
-import { Notification } from 'components/Notification';
+
+import * as React from 'react';
+import Notification from 'components/Notification';
 
 import type { Props } from '../../index';
 
@@ -8,9 +10,14 @@ export default (props: Props) => {
     if (!location) return null;
 
     const notifications: Array<Notification> = [];
+    // Example:
     // if (location.state.device) {
     //     notifications.push(<Notification key="example" type="info" title="Static example" />);
     // }
 
-    return notifications;
+    return (
+        <React.Fragment>
+            {notifications}
+        </React.Fragment>
+    );
 };

src/reducers/NotificationReducer.js

@@ -13,6 +13,7 @@ export type CallbackAction = {
 }
 
 export type NotificationEntry = {
+    +key: string; // React.Key
     +id: ?string;
     +devicePath: ?string;
     +type: string;
@@ -38,6 +39,7 @@ const initialState: State = [
 const addNotification = (state: State, payload: any): State => {
     const newState: State = state.filter(e => !e.cancelable);
     newState.push({
+        key: new Date().getTime().toString(),
         id: payload.id,
         devicePath: payload.devicePath,
         type: payload.type,

src/views/Landing/components/InitializationError/index.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 const Wrapper = styled.div`
     min-width: 720px;

src/views/Landing/index.js

@@ -7,7 +7,8 @@ import Footer from 'components/Footer';
 import Log from 'components/Log';
 import Link from 'components/Link';
 import Loader from 'components/Loader';
-import Notifications, { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
+import ContextNotifications from 'components/notifications/Context';
 import colors from 'config/colors';
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
@@ -98,7 +99,7 @@ export default (props: Props) => {
                             type="error"
                         />
                     )}
-                    <Notifications />
+                    <ContextNotifications />
                     {shouldShowInitializationError && <InitializationError error={connectError} />}
                     <Log />
                     <LandingContent>

src/views/Wallet/views/Acquire/index.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import colors from 'config/colors';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 import * as TrezorConnectActions from 'actions/TrezorConnectActions';
 
 import type { State, Dispatch } from 'flowtype';

src/views/Wallet/views/UnreadableDevice/index.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Notification } from 'components/Notification';
+import Notification from 'components/Notification';
 
 const Wrapper = styled.div``;