Update some syntax to convention and for consistency around publishNotifications + mapStateToProps + mapDispatchToProps

ui/src/App.js

@@ -1,10 +1,11 @@
 import React, {PropTypes} from 'react'
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
 import SideNavContainer from 'src/side_nav'
 import Notifications from 'shared/components/Notifications'
-import {
-  publishNotification as publishNotificationAction,
-} from 'src/shared/actions/notifications'
+
+import {publishNotification} from 'src/shared/actions/notifications'
 
 const {
   func,
@@ -50,6 +51,8 @@ const App = React.createClass({
   },
 })
 
-export default connect(null, {
-  notify: publishNotificationAction,
-})(App)
+const mapDispatchToProps = (dispatch) => ({
+  notify: bindActionCreators(publishNotification, dispatch),
+})
+
+export default connect(null, mapDispatchToProps)(App)

ui/src/CheckSources.js

@@ -1,16 +1,18 @@
 import React, {PropTypes} from 'react'
 import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
 import {getSources} from 'src/shared/apis'
 import {loadSources as loadSourcesAction} from 'src/shared/actions/sources'
 import {showDatabases} from 'src/shared/apis/metaQuery'
+import {publishNotification as publishNotificationAction} from 'src/shared/actions/notifications'
 
 // Acts as a 'router middleware'. The main `App` component is responsible for
 // getting the list of data nodes, but not every page requires them to function.
 // Routes that do require data nodes can be nested under this component.
 const CheckSources = React.createClass({
   propTypes: {
-    addFlashMessage: PropTypes.func,
     children: PropTypes.node,
     params: PropTypes.shape({
       sourceID: PropTypes.string,
@@ -22,7 +24,8 @@ const CheckSources = React.createClass({
       pathname: PropTypes.string.isRequired,
     }).isRequired,
     sources: PropTypes.array.isRequired,
-    loadSourcesAction: PropTypes.func.isRequired,
+    notify: PropTypes.func.isRequired,
+    loadSources: PropTypes.func.isRequired,
   },
 
   getInitialState() {
@@ -32,17 +35,19 @@ const CheckSources = React.createClass({
   },
 
   componentDidMount() {
+    const {loadSources, notify} = this.props
+
     getSources().then(({data: {sources}}) => {
-      this.props.loadSourcesAction(sources)
+      loadSources(sources)
       this.setState({isFetching: false})
     }).catch(() => {
-      this.props.addFlashMessage({type: 'error', text: "Unable to connect to Chronograf server"})
+      notify('error', 'Unable to connect to Chronograf server')
       this.setState({isFetching: false})
     })
   },
 
   componentWillUpdate(nextProps, nextState) {
-    const {router, location, params, addFlashMessage, sources} = nextProps
+    const {router, location, params, notify, sources} = nextProps
     const {isFetching} = nextState
     const source = sources.find((s) => s.id === params.sourceID)
     const defaultSource = sources.find((s) => s.default === true)
@@ -57,7 +62,7 @@ const CheckSources = React.createClass({
     if (!isFetching && !location.pathname.includes("/manage-sources")) {
       // Do simple query to proxy to see if the source is up.
       showDatabases(source.links.proxy).catch(() => {
-        addFlashMessage({type: 'error', text: `Unable to connect to source`})
+        notify('error', 'Unable to connect to source')
       })
     }
   },
@@ -77,10 +82,13 @@ const CheckSources = React.createClass({
   },
 })
 
-function mapStateToProps(state) {
-  return {
-    sources: state.sources,
-  }
-}
+const mapStateToProps = ({sources}) => ({
+  sources,
+})
 
-export default connect(mapStateToProps, {loadSourcesAction})(withRouter(CheckSources))
+const mapDispatchToProps = (dispatch) => ({
+  loadSources: bindActionCreators(loadSourcesAction, dispatch),
+  notify: bindActionCreators(publishNotificationAction, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(CheckSources))

ui/src/index.js

@@ -21,7 +21,7 @@ import configureStore from 'src/store/configureStore'
 import {getMe, getSources} from 'shared/apis'
 import {authRequested, authReceived, meRequested, meReceived} from 'shared/actions/auth'
 import {disablePresentationMode} from 'shared/actions/app'
-import {publishNotification} from 'shared/actions/notifications'
+import {publishNotification as notify} from 'shared/actions/notifications'
 import {loadLocalStorage} from './localStorage'
 
 import 'src/style/chronograf.scss'
@@ -111,12 +111,12 @@ const Root = React.createClass({
       if (error.status === HTTP_FORBIDDEN) {
         const {auth: {me}} = store.getState()
         if (me === null) {
-          dispatch(publishNotification('error', 'Please login to use Chronograf.'))
+          dispatch(notify('error', 'Please login to use Chronograf.'))
         } else {
-          dispatch(publishNotification('error', 'Session timed out. Please login again.'))
+          dispatch(notify('error', 'Session timed out. Please login again.'))
         }
       } else {
-        dispatch(publishNotification('error', 'Cannot communicate with server.'))
+        dispatch(notify('error', 'Cannot communicate with server.'))
       }
       if (error.auth) {
         dispatch(authReceived(error.auth))