PLT-2962 Added channel switcher modal (#3216)

* Added channel switcher modal

* Fixed typos

* Added handling for duplicate channels

1 files changed, 30 insertions, 0 deletions

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index ee199fc03..cfda38670 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -18,6 +18,8 @@ import UserStore from 'stores/user_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
+import ChannelSwitchModal from './channel_switch_modal.jsx';
+
 import Client from 'utils/web_client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -50,11 +52,15 @@ export default class Navbar extends React.Component {
         this.createCollapseButtons = this.createCollapseButtons.bind(this);
         this.createDropdown = this.createDropdown.bind(this);
 
+        this.showChannelSwitchModal = this.showChannelSwitchModal.bind(this);
+        this.hideChannelSwitchModal = this.hideChannelSwitchModal.bind(this);
+
         const state = this.getStateFromStores();
         state.showEditChannelPurposeModal = false;
         state.showEditChannelHeaderModal = false;
         state.showMembersModal = false;
         state.showRenameChannelModal = false;
+        state.showChannelSwitchModal = false;
         this.state = state;
     }
     getStateFromStores() {
@@ -72,10 +78,12 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner-wrap').click(this.hideSidebars);
+        document.addEventListener('keydown', this.showChannelSwitchModal);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
         ChannelStore.removeExtraInfoChangeListener(this.onChange);
+        document.removeEventListener('keydown', this.showChannelSwitchModal);
     }
     handleSubmit(e) {
         e.preventDefault();
@@ -150,6 +158,19 @@ export default class Navbar extends React.Component {
             showRenameChannelModal: false
         });
     }
+    showChannelSwitchModal(e) {
+        if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.K) {
+            e.preventDefault();
+            this.setState({
+                showChannelSwitchModal: true
+            });
+        }
+    }
+    hideChannelSwitchModal() {
+        this.setState({
+            showChannelSwitchModal: false
+        });
+    }
     createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent) {
         if (channel) {
             var viewInfoOption = (
@@ -441,6 +462,7 @@ export default class Navbar extends React.Component {
         var editChannelPurposeModal = null;
         let renameChannelModal = null;
         let channelMembersModal = null;
+        let channelSwitchModal = null;
 
         if (channel) {
             popoverContent = (
@@ -540,6 +562,13 @@ export default class Navbar extends React.Component {
                     channel={channel}
                 />
             );
+
+            channelSwitchModal = (
+                <ChannelSwitchModal
+                    show={this.state.showChannelSwitchModal}
+                    onHide={this.hideChannelSwitchModal}
+                />
+            );
         }
 
         var collapseButtons = this.createCollapseButtons(currentId);
@@ -574,6 +603,7 @@ export default class Navbar extends React.Component {
                 {editChannelPurposeModal}
                 {renameChannelModal}
                 {channelMembersModal}
+                {channelSwitchModal}
             </div>
         );
     }