Adding React.js, Redux, revamping dashboard

2 files changed, 50 insertions, 0 deletions

diff --git a/app/assets/javascripts/components/containers/root.jsx b/app/assets/javascripts/components/containers/root.jsx
new file mode 100644
index 000000000..7da984d89
--- /dev/null
+++ b/app/assets/javascripts/components/containers/root.jsx
@@ -0,0 +1,40 @@
+import { Provider }               from 'react-redux';
+import configureStore             from '../store/configureStore';
+import Frontend                   from '../components/frontend';
+import { setTimeline, addStatus } from '../actions/statuses';
+
+const store = configureStore();
+
+const Root = React.createClass({
+
+  componentWillMount() {
+    for (var timelineType in this.props.timelines) {
+      if (this.props.timelines.hasOwnProperty(timelineType)) {
+        store.dispatch(setTimeline(timelineType, JSON.parse(this.props.timelines[timelineType])));
+      }
+    }
+
+    if (typeof App !== 'undefined') {
+      App.timeline = App.cable.subscriptions.create("TimelineChannel", {
+        connected: function() {},
+
+        disconnected: function() {},
+
+        received: function(data) {
+          return store.dispatch(addStatus(data.timeline, JSON.parse(data.message)));
+        }
+      });
+    }
+  },
+
+  render() {
+    return (
+      <Provider store={store}>
+        <Frontend />
+      </Provider>
+    );
+  }
+
+});
+
+export default Root;
diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx
new file mode 100644
index 000000000..c2e55db66
--- /dev/null
+++ b/app/assets/javascripts/components/containers/status_list_container.jsx
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import StatusList  from '../components/status_list';
+
+const mapStateToProps = function (state, props) {
+  return {
+    statuses: state.getIn(['statuses', props.type])
+  };
+};
+
+export default connect(mapStateToProps)(StatusList);