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

bunch of bugs.

webapp/components/sidebar.jsx

@@ -15,7 +15,6 @@ import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
-import * as Client from 'utils/client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import Constants from 'utils/constants.jsx';
@@ -29,7 +28,7 @@ import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 import loadingGif from 'images/load.gif';
 
 import React from 'react';
-import {browserHistory} from 'react-router';
+import {browserHistory, Link} from 'react-router';
 
 import favicon from 'images/favicon/favicon-16x16.png';
 import redFavicon from 'images/favicon/redfavicon-16x16.png';
@@ -259,7 +258,7 @@ export default class Sidebar extends React.Component {
         }
 
         if (channel.id === this.state.activeId) {
-            Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL));
+            browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/town-square');
         }
     }
 
@@ -406,48 +405,6 @@ export default class Sidebar extends React.Component {
             icon = <div className='status'><i className='fa fa-lock'></i></div>;
         }
 
-        // set up click handler to switch channels (or create a new channel for non-existant ones)
-        var handleClick = null;
-
-        if (!channel.fake) {
-            handleClick = function clickHandler(e) {
-                if (e.target.attributes.getNamedItem('data-close')) {
-                    handleClose(channel);
-                } else {
-                    Utils.switchChannel(channel);
-                }
-
-                e.preventDefault();
-            };
-        } else if (channel.fake) {
-            // It's a direct message channel that doesn't exist yet so let's create it now
-            var otherUserId = Utils.getUserIdFromChannelName(channel);
-
-            if (this.state.loadingDMChannel === -1) {
-                handleClick = function clickHandler(e) {
-                    e.preventDefault();
-
-                    if (e.target.attributes.getNamedItem('data-close')) {
-                        handleClose(channel);
-                    } else {
-                        this.setState({loadingDMChannel: index});
-
-                        Client.createDirectChannel(channel, otherUserId,
-                            (data) => {
-                                this.setState({loadingDMChannel: -1});
-                                AsyncClient.getChannel(data.id);
-                                Utils.switchChannel(data);
-                            },
-                            () => {
-                                this.setState({loadingDMChannel: -1});
-                                browserHistory('/' + this.state.currentTeam.name);
-                            }
-                        );
-                    }
-                }.bind(this);
-            }
-        }
-
         let closeButton = null;
         const removeTooltip = (
             <Tooltip id='remove-dm-tooltip'>
@@ -464,12 +421,12 @@ export default class Sidebar extends React.Component {
                     placement='top'
                     overlay={removeTooltip}
                 >
-                <span
-                    className='btn-close'
-                    data-close='true'
-                >
-                    {'×'}
-                </span>
+                    <span
+                        onClick={() => handleClose(channel)}
+                        className='btn-close'
+                    >
+                        {'×'}
+                    </span>
                 </OverlayTrigger>
             );
 
@@ -481,23 +438,29 @@ export default class Sidebar extends React.Component {
             tutorialTip = this.createTutorialTip();
         }
 
+        let link = '';
+        if (channel.fake) {
+            link = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name + '?fakechannel=' + encodeURIComponent(JSON.stringify(channel));
+        } else {
+            link = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
+        }
+
         return (
             <li
                 key={channel.name}
                 ref={channel.name}
                 className={linkClass}
             >
-                <a
+                <Link
+                    to={link}
                     className={rowClass}
-                    href={'#'}
-                    onClick={handleClick}
                 >
                     {icon}
                     {status}
                     {channel.display_name}
                     {badge}
                     {closeButton}
-                </a>
+                </Link>
                 {tutorialTip}
             </li>
         );
@@ -600,6 +563,7 @@ export default class Sidebar extends React.Component {
             <div
                 className='sidebar--left'
                 id='sidebar-left'
+                key='sidebar-left'
             >
                 <NewChannelFlow
                     show={showChannelModal}