Refactoring center panel away. Moving tutorial to a route. Fixing a

bunch of bugs.

1 files changed, 63 insertions, 4 deletions

diff --git a/webapp/components/channel_view.jsx b/webapp/components/channel_view.jsx
index 34e1666d0..54d796ac1 100644
--- a/webapp/components/channel_view.jsx
+++ b/webapp/components/channel_view.jsx
@@ -1,14 +1,73 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import CenterPanel from 'components/center_panel.jsx';
-
 import React from 'react';
 
+import ChannelHeader from 'components/channel_header.jsx';
+import PostsViewContainer from 'components/posts_view_container.jsx';
+import CreatePost from 'components/create_post.jsx';
+
+import ChannelStore from 'stores/channel_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
 export default class ChannelView extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.getStateFromStores = this.getStateFromStores.bind(this);
+        this.isStateValid = this.isStateValid.bind(this);
+        this.updateState = this.updateState.bind(this);
+
+        this.state = this.getStateFromStores(props);
+    }
+    getStateFromStores(props) {
+        const channel = ChannelStore.getByName(props.params.channel);
+        const channelId = channel ? channel.id : '';
+        const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
+        return {
+            channelId,
+            profiles
+        };
+    }
+    isStateValid() {
+        return this.state.channelId !== '' && this.state.profiles;
+    }
+    updateState() {
+        this.setState(this.getStateFromStores(this.props));
+    }
+    componentDidMount() {
+        ChannelStore.addChangeListener(this.updateState);
+    }
+    componentWillUnmount() {
+        ChannelStore.removeChangeListener(this.updateState);
+    }
+    componentWillReceiveProps(nextProps) {
+        this.setState(this.getStateFromStores(nextProps));
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextState.channelId !== this.state.channelId) {
+            return true;
+        }
+
+        return false;
+    }
     render() {
         return (
-            <CenterPanel/>
+            <div
+                id='app-content'
+                className='app__content'
+            >
+                <ChannelHeader
+                    channelId={this.state.channelId}
+                />
+                <PostsViewContainer profiles={this.state.profiles}/>
+                <div
+                    className='post-create__container'
+                    id='post-create'
+                >
+                    <CreatePost/>
+                </div>
+            </div>
         );
     }
 }
@@ -16,5 +75,5 @@ ChannelView.defaultProps = {
 };
 
 ChannelView.propTypes = {
-    params: React.PropTypes.object
+    params: React.PropTypes.object.isRequired
 };