bootstraping right panel

2 files changed, 76 insertions, 0 deletions

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};