More goodness

caravel/assets/javascripts/SqlLab/index.jsx

@@ -4,13 +4,16 @@ require('bootstrap');
 
 import React from 'react';
 import { render } from 'react-dom';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from './actions';
 
 import SplitPane from 'react-split-pane';
-
 import { Label, Tab, Tabs } from 'react-bootstrap';
 
 import LeftPane from './components/LeftPane';
 import TabbedSqlEditors from './components/TabbedSqlEditors';
+import Alerts from './components/Alerts';
 
 import { compose, createStore } from 'redux';
 import { Provider } from 'react-redux';
@@ -25,11 +28,12 @@ let store = createStore(sqlLabReducer, initialState, compose(persistState(), win
 // jquery hack to highlight the navbar menu
 $('a[href="/caravel/sqllab"]').parent().addClass('active');
 
-const App = React.createClass({
+class App extends React.Component {
   render() {
     return (
       <div className="App SqlLab">
         <div className="container-fluid">
+          <Alerts alerts={this.props.alerts} />
           <SplitPane split="vertical" minSize={200} defaultSize={300}>
             <div className="pane-cell pane-west m-t-5">
               <LeftPane />
@@ -41,8 +45,21 @@ const App = React.createClass({
         </div>
       </div>
     );
-  },
-});
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+App = connect(mapStateToProps, mapDispatchToProps)(App);
 
 render(
   <Provider store={store}>
@@ -50,3 +67,4 @@ render(
   </Provider>,
   document.getElementById('app')
 );
+