Creating hierarchy

4 files changed, 108 insertions, 16 deletions

diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
new file mode 100644
index 000000000..7cb55898f
--- /dev/null
+++ b/web/react/components/center_panel.jsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var CreatePost = require('../components/create_post.jsx');
+var PostListContainer = require('../components/post_list_container.jsx');
+var ChannelHeader = require('../components/channel_header.jsx');
+var Navbar = require('../components/navbar.jsx');
+var FileUploadOverlay = require('../components/file_upload_overlay.jsx');
+
+export default class CenterPanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div className='inner__wrap channel__wrap'>
+                <div className='row header'>
+                    <div id='navbar'>
+                        <Navbar/>
+                    </div>
+                </div>
+                <div className='row main'>
+                    <FileUploadOverlay
+                        id='file_upload_overlay'
+                        overlayType='center'
+                    />
+                    <div
+                        id='app-content'
+                        className='app__content'
+                    >
+                        <div id='channel-header'>
+                            <ChannelHeader />
+                        </div>
+                        <div id='post-list'>
+                            <PostListContainer />
+                        </div>
+                        <div
+                            className='post-create__container'
+                            id='post-create'
+                        >
+                            <CreatePost />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+CenterPanel.defaultProps = {
+};
+
+CenterPanel.propTypes = {
+};
diff --git a/web/react/components/channel_view.jsx b/web/react/components/channel_view.jsx
new file mode 100644
index 000000000..beafa7d63
--- /dev/null
+++ b/web/react/components/channel_view.jsx
@@ -0,0 +1,43 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var CenterPanel = require('../components/center_panel.jsx');
+var Sidebar = require('../components/sidebar.jsx');
+var SidebarRight = require('../components/sidebar_right.jsx');
+var SidebarRightMenu = require('../components/sidebar_right_menu.jsx');
+
+export default class ChannelView extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div className='container-fluid'>
+                <div
+                    className='sidebar--right'
+                    id='sidebar-right'
+                >
+                    <SidebarRight/>
+                </div>
+                <div
+                    className='sidebar--menu'
+                    id='sidebar-menu'
+                >
+                    <SidebarRightMenu/>
+                </div>
+                <div
+                    className='sidebar--left'
+                    id='sidebar-left'
+                >
+                    <Sidebar/>
+                </div>
+                <CenterPanel />
+            </div>
+        );
+    }
+}
+ChannelView.defaultProps = {
+};
+
+ChannelView.propTypes = {
+};
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 5cb6d168b..88753556c 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -178,10 +178,6 @@ export default class Sidebar extends React.Component {
         window.addEventListener('resize', this.handleResize);
     }
     shouldComponentUpdate(nextProps, nextState) {
-        if (!Utils.areStatesEqual(nextProps, this.props)) {
-            return true;
-        }
-
         if (!Utils.areStatesEqual(nextState, this.state)) {
             return true;
         }
@@ -235,7 +231,7 @@ export default class Sidebar extends React.Component {
             const unread = this.getUnreadCount();
             const mentionTitle = unread.mentions > 0 ? '(' + unread.mentions + ') ' : '';
             const unreadTitle = unread.msgs > 0 ? '* ' : '';
-            document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + this.props.teamDisplayName + ' ' + currentSiteName;
+            document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + TeamStore.getCurrent().display_name + ' ' + currentSiteName;
         }
     }
     onScroll() {
@@ -543,9 +539,9 @@ export default class Sidebar extends React.Component {
                 />
 
                 <SidebarHeader
-                    teamDisplayName={this.props.teamDisplayName}
-                    teamName={this.props.teamName}
-                    teamType={this.props.teamType}
+                    teamDisplayName={TeamStore.getCurrent().display_name}
+                    teamName={TeamStore.getCurrent().name}
+                    teamType={TeamStore.getCurrent().type}
                 />
                 <SearchBox />
 
@@ -631,11 +627,6 @@ export default class Sidebar extends React.Component {
 }
 
 Sidebar.defaultProps = {
-    teamType: '',
-    teamDisplayName: ''
 };
 Sidebar.propTypes = {
-    teamType: React.PropTypes.string,
-    teamDisplayName: React.PropTypes.string,
-    teamName: React.PropTypes.string
 };
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 51225cbbe..2ec2b5bbf 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -53,9 +53,13 @@ export default class SidebarRight extends React.Component {
     }
     render() {
         var postHolder = $('.post-list-holder-by-time').not('.inactive');
-        const position = postHolder.scrollTop() + postHolder.height() + 14;
-        const bottom = postHolder[0].scrollHeight;
-        this.plScrolledToBottom = position >= bottom;
+        if (postHolder[0]) {
+            const position = postHolder.scrollTop() + postHolder.height() + 14;
+            const bottom = postHolder[0].scrollHeight;
+            this.plScrolledToBottom = position >= bottom;
+        } else {
+            this.plScrolledToBottom = true;
+        }
 
         if (!(this.state.search_visible || this.state.post_right_visible)) {
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');