Add container for NotificationArea

3 files changed, 39 insertions, 22 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index b39f09e705..08b9a3c35a 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -10,7 +10,7 @@ import { Brand, HeaderBarStyle, SettingsBarButton } from './HeaderBar';
 import ImageView from './ImageView';
 import { Container, Header, Layout } from './Layout';
 import Map, { MarkerStyle, ZoomLevel } from './Map';
-import NotificationArea from './NotificationArea';
+import NotificationAreaContainer from '../containers/NotificationAreaContainer';
 import TunnelControl from './TunnelControl';
 
 interface IProps {
@@ -166,14 +166,7 @@ export default class Connect extends Component<IProps, IState> {
             onSelectLocation={this.props.onSelectLocation}
           />
 
-          <NotificationArea
-            style={styles.notificationArea}
-            tunnelState={this.props.connection.status}
-            version={this.props.version}
-            accountExpiry={this.props.accountExpiry}
-            openExternalLink={this.props.onExternalLink}
-            blockWhenDisconnected={this.props.blockWhenDisconnected}
-          />
+          <NotificationAreaContainer style={styles.notificationArea} />
         </View>
       </View>
     );
diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index a0cc9e08e3..01de4f2d83 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -2,7 +2,6 @@ import moment from 'moment';
 import * as React from 'react';
 import { Component, Types } from 'reactxp';
 import { sprintf } from 'sprintf-js';
-import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import {
   NotificationActions,
@@ -24,8 +23,9 @@ interface IProps {
   accountExpiry?: AccountExpiry;
   tunnelState: TunnelState;
   version: IVersionReduxState;
-  openExternalLink: (url: string) => void;
   blockWhenDisconnected: boolean;
+  onOpenDownloadLink: () => void;
+  onOpenBuyMoreLink: () => void;
 }
 
 type NotificationAreaPresentation =
@@ -277,7 +277,7 @@ export default class NotificationArea extends Component<IProps, State> {
               </NotificationSubtitle>
             </NotificationContent>
             <NotificationActions>
-              <NotificationOpenLinkAction onPress={this.handleOpenDownloadLink} />
+              <NotificationOpenLinkAction onPress={this.props.onOpenDownloadLink} />
             </NotificationActions>
           </React.Fragment>
         )}
@@ -303,7 +303,7 @@ export default class NotificationArea extends Component<IProps, State> {
               </NotificationSubtitle>
             </NotificationContent>
             <NotificationActions>
-              <NotificationOpenLinkAction onPress={this.handleOpenDownloadLink} />
+              <NotificationOpenLinkAction onPress={this.props.onOpenDownloadLink} />
             </NotificationActions>
           </React.Fragment>
         )}
@@ -318,19 +318,11 @@ export default class NotificationArea extends Component<IProps, State> {
               <NotificationSubtitle>{this.state.timeLeft}</NotificationSubtitle>
             </NotificationContent>
             <NotificationActions>
-              <NotificationOpenLinkAction onPress={this.handleOpenBuyMoreLink} />
+              <NotificationOpenLinkAction onPress={this.props.onOpenBuyMoreLink} />
             </NotificationActions>
           </React.Fragment>
         )}
       </NotificationBanner>
     );
   }
-
-  private handleOpenDownloadLink = () => {
-    this.props.openExternalLink(links.download);
-  };
-
-  private handleOpenBuyMoreLink = () => {
-    this.props.openExternalLink(links.purchase);
-  };
 }
diff --git a/gui/src/renderer/containers/NotificationAreaContainer.tsx b/gui/src/renderer/containers/NotificationAreaContainer.tsx
new file mode 100644
index 0000000000..27e86c57ba
--- /dev/null
+++ b/gui/src/renderer/containers/NotificationAreaContainer.tsx
@@ -0,0 +1,32 @@
+import { shell } from 'electron';
+import { connect } from 'react-redux';
+import NotificationArea from '../components/NotificationArea';
+import { links } from '../../config.json';
+import { IReduxState, ReduxDispatch } from '../redux/store';
+import { ISharedRouteProps } from '../routes';
+import AccountExpiry from '../lib/account-expiry';
+
+const mapStateToProps = (state: IReduxState) => ({
+  accountExpiry: state.account.expiry
+    ? new AccountExpiry(state.account.expiry, state.userInterface.locale)
+    : undefined,
+  tunnelState: state.connection.status,
+  version: state.version,
+  blockWhenDisconnected: state.settings.blockWhenDisconnected,
+});
+
+const mapDispatchToProps = (_dispatch: ReduxDispatch, _props: ISharedRouteProps) => {
+  return {
+    onOpenDownloadLink() {
+      shell.openExternal(links.download);
+    },
+    onOpenBuyMoreLink() {
+      shell.openExternal(links.purchase);
+    },
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(NotificationArea);