import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import SideNavContainer from 'src/side_nav';
import {
  publishNotification as publishNotificationAction,
  dismissNotification as dismissNotificationAction,
} from 'src/shared/actions/notifications';

const App = React.createClass({
  propTypes: {
    children: PropTypes.node.isRequired,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
    params: PropTypes.shape({
      sourceID: PropTypes.string.isRequired,
    }).isRequired,
    publishNotification: PropTypes.func.isRequired,
    dismissNotification: PropTypes.func.isRequired,
    notifications: PropTypes.shape({
      success: PropTypes.string,
      error: PropTypes.string,
      warning: PropTypes.string,
    }),
  },

  handleNotification({type, text}) {
    this.props.publishNotification(type, text);
  },

  handleDismissNotification(type) {
    this.props.dismissNotification(type);
  },

  render() {
    const {sourceID} = this.props.params;

    return (
      <div className="enterprise-wrapper--flex">
        <SideNavContainer sourceID={sourceID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
        <div className="page-wrapper">
          {this.renderNotifications()}
          {this.props.children && React.cloneElement(this.props.children, {
            addFlashMessage: this.handleNotification,
          })}
        </div>
      </div>
    );
  },

  renderNotifications() {
    const {success, error} = this.props.notifications;
    if (!success && !error) {
      return null;
    }
    if (success) {
      return (
        <div className="flash-messages">
          <div className="alert alert-success" role="alert">
            {success}{this.renderDismiss()}
          </div>
        </div>
      );
    }
    if (error) {
      return (
        <div className="flash-messages">
          <div className="alert alert-danger" role="alert">
            {error}{this.renderDismiss()}
          </div>
        </div>
      );
    }
  },

  renderDismiss() {
    return (
      <button className="close" data-dismiss="alert" aria-label="Close" onClick={this.handleDismissNotification}>
        <span className="icon remove"></span>
      </button>
    );
  },
});

function mapStateToProps(state) {
  return {
    notifications: state.notifications,
  };
}

export default connect(mapStateToProps, {
  publishNotification: publishNotificationAction,
  dismissNotification: dismissNotificationAction,
})(App);

@@ -70,16 +70,53 @@
 redux';%0A
+import classnames from 'classnames';%0A
 import S
@@ -1651,29 +1651,8 @@
   %7D%0A
-    if (success) %7B%0A  
     
@@ -1652,34 +1652,32 @@
  %7D%0A    return (%0A
-  
       %3Cdiv class
@@ -1711,151 +1711,167 @@
     
-  %3Cdiv className=%22alert alert-success%22 role=%22alert%22%3E%0A            %7Bsuccess%7D%7Bthis.renderDismiss()%7D%0A          %3C/div%3E%0A        %3C/div%3E%0A      );%0A    %7D
+%7Bthis.renderNotification('success', success)%7D%0A        %7Bthis.renderNotification('error', error)%7D%0A      %3C/div%3E%0A    );%0A  %7D,%0A%0A  renderNotification(type, message) %7B
 %0A   
@@ -1875,21 +1875,24 @@
     if (
-error
+!message
 ) %7B%0A    
@@ -1904,55 +1904,162 @@
 urn 
-(
+null;
 %0A    
+%7D%0A
     
-%3Cdiv
+const cls =
  class
-Name=%22flash-messages%22%3E%0A    
+names('alert', %7B%0A      'alert-danger': type === 'error',%0A      'alert-success': type === 'success',%0A    %7D);%0A    return (%0A
     
@@ -2079,28 +2079,13 @@
 ame=
-%22alert alert-danger%22
+%7Bcls%7D
  rol
@@ -2107,18 +2107,16 @@
     
-    %7Berror
+%7Bmessage
 %7D%7Bth
@@ -2137,28 +2137,24 @@
 ss()%7D%0A      
-    
 %3C/div%3E%0A     
@@ -2156,33 +2156,10 @@
     
-    %3C/div%3E%0A      );%0A    %7D
+);
 %0A  %7D

Refactor rendering of notifications. Moar DRY