5 files changed, 132 insertions, 0 deletions
diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js
new file mode 100644
index 00000000..3cd549e5
--- /dev/null
+++ b/src/web/js/actions/RightPanelActions.js
@@ -0,0 +1,20 @@
+var JarrDispatcher = require('../dispatcher/JarrDispatcher');
+var RightActionTypes = require('../constants/JarrConstants').RightPanelActionTypes;
+var jquery = require('jquery');
+var RightPanelStore = require('../stores/RightPanelStore');
+
+
+var RightPanelActions = {
+    load: function(obj_type, obj_id) {
+        filters = MiddlePanelStore.getRequestFilter();
+        jquery.getJSON('api/v2.0/' + obj_type + '/' + obj_id, function(payload) {
+            _last_fetched_with = filters;
+            JarrDispatcher.dispatch({
+                type: RightPanelActionTypes.LOAD_RIGHT_PANEL,
+                articles: payload.articles,
+            });
+        });
+    },
+};
+
+module.exports = RightPanelActions;
diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 059d2646..bd643be1 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -4,6 +4,7 @@ var Grid = require('react-bootstrap/lib/Grid');
 
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
+var RightPanel = require('./RightPanel.react');
 
 
 var MainApp = React.createClass({
@@ -17,6 +18,10 @@ var MainApp = React.createClass({
                         <MiddlePanel.MiddlePanelFilter />
                         <MiddlePanel.MiddlePanel />
                     </Col>
+                    <Col xs={10} sm={10} md={8} lg={8}>
+                        <RightPanel.RightPanelMenu />
+                        <RightPanel.RightPanel />
+                    </Col>
                 </Grid>
        );
     },
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
new file mode 100644
index 00000000..422b8e5b
--- /dev/null
+++ b/src/web/js/components/RightPanel.react.js
@@ -0,0 +1,71 @@
+var React = require('react');
+
+var RightPanelStore = require('../stores/RightPanelStore');
+var RightPanelActions = require('../actions/RightPanelActions');
+
+
+var Article = React.createClass({
+
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var Feed = React.createClass({
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var Category = React.createClass({
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var RightPanelMenu = React.createClass({
+    getInitialState: function() {
+        return {};
+    },
+    render: function() {
+        return (<div />);
+    },
+    componentDidMount: function() {
+        RightPanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        RightPanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+    },
+});
+
+var RightPanel = React.createClass({
+    getInitialState: function() {
+        return {obj_type: null, obj_id: null};
+    },
+    render: function() {
+        if (this.state.obj_type == 'article') {
+            return <Article />;
+        } else if (this.state.obj_type == 'feed') {
+            return <Feed />;
+        } else if (this.state.obj_type == 'category') {
+            return <Category />;
+        }
+        return <div />;
+    },
+    componentDidMount: function() {
+        RightPanelActions.reload();
+        RightPanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        RightPanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+    },
+});
+
+module.exports = {RightPanelMenu: RightPanelMenu, RightPanel: RightPanel};
diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js
index d00f24a8..c7b419e4 100644
--- a/src/web/js/constants/JarrConstants.js
+++ b/src/web/js/constants/JarrConstants.js
@@ -23,4 +23,7 @@ module.exports = {
         MIDDLE_PANEL_FILTER: null,
         CHANGE_ATTR: null,
     }),
+    RightPanelActionTypes: keyMirror({
+        LOAD_RIGHT_PANEL: null,
+    }),
 };
diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js
new file mode 100644
index 00000000..0bca9f54
--- /dev/null
+++ b/src/web/js/stores/RightPanelStore.js
@@ -0,0 +1,33 @@
+var JarrDispatcher = require('../dispatcher/JarrDispatcher');
+var RightPanelActionTypes = require('../constants/JarrConstants').RightPanelActionTypes;
+var MenuActionTypes = require('../constants/JarrConstants').MenuActionTypes;
+var EventEmitter = require('events').EventEmitter;
+var CHANGE_EVENT = 'change_middle_panel';
+var assign = require('object-assign');
+
+
+var RightPanelStore = assign({}, EventEmitter.prototype, {
+    _datas: {},
+    getAll: function() {
+        return this._datas;
+    },
+    emitChange: function() {
+        this.emit(CHANGE_EVENT);
+    },
+    addChangeListener: function(callback) {
+        this.on(CHANGE_EVENT, callback);
+    },
+    removeChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    },
+});
+
+
+RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) {
+    switch(action.type) {
+        default:
+            // pass
+    }
+});
+
+module.exports = RightPanelStore;