First commit for toggling mentions using shortcut and button (#4169)

Also did some refactoring and moved code to actions

Fixed coding style errors

webapp/actions/global_actions.jsx

@@ -487,3 +487,49 @@ export function emitJoinChannelEvent(channel, success, failure) {
         failure
     );
 }
+
+export function emitSearchMentionsEvent(user) {
+    let terms = '';
+    if (user.notify_props && user.notify_props.mention_keys) {
+        const termKeys = UserStore.getMentionKeys(user.id);
+
+        if (termKeys.indexOf('@channel') !== -1) {
+            termKeys[termKeys.indexOf('@channel')] = '';
+        }
+
+        if (termKeys.indexOf('@all') !== -1) {
+            termKeys[termKeys.indexOf('@all')] = '';
+        }
+
+        terms = termKeys.join(' ');
+    }
+
+    AppDispatcher.handleServerAction({
+        type: ActionTypes.RECEIVED_SEARCH_TERM,
+        term: terms,
+        do_search: true,
+        is_mention_search: true
+    });
+}
+
+export function toggleSideBarAction(visible) {
+    if (!visible) {
+        //Array of actions resolving in the closing of the sidebar
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.RECEIVED_SEARCH,
+            results: null
+        });
+
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.RECEIVED_SEARCH_TERM,
+            term: null,
+            do_search: false,
+            is_mention_search: false
+        });
+
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.RECEIVED_POST_SELECTED,
+            postId: null
+        });
+    }
+}

webapp/components/channel_header.jsx

@@ -50,7 +50,7 @@ export default class ChannelHeader extends React.Component {
         this.searchMentions = this.searchMentions.bind(this);
         this.showRenameChannelModal = this.showRenameChannelModal.bind(this);
         this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this);
-        this.openRecentMentions = this.openRecentMentions.bind(this);
+        this.handleShortcut = this.handleShortcut.bind(this);
         this.getFlagged = this.getFlagged.bind(this);
         this.initWebrtc = this.initWebrtc.bind(this);
         this.onBusy = this.onBusy.bind(this);
@@ -97,7 +97,7 @@ export default class ChannelHeader extends React.Component {
         WebrtcStore.addChangedListener(this.onListenerChange);
         WebrtcStore.addBusyListener(this.onBusy);
         $('.sidebar--left .dropdown-menu').perfectScrollbar();
-        document.addEventListener('keydown', this.openRecentMentions);
+        document.addEventListener('keydown', this.handleShortcut);
     }
 
     componentWillUnmount() {
@@ -109,7 +109,7 @@ export default class ChannelHeader extends React.Component {
         UserStore.removeStatusesChangeListener(this.onListenerChange);
         WebrtcStore.removeChangedListener(this.onListenerChange);
         WebrtcStore.removeBusyListener(this.onBusy);
-        document.removeEventListener('keydown', this.openRecentMentions);
+        document.removeEventListener('keydown', this.handleShortcut);
     }
 
     shouldComponentUpdate(nextProps) {
@@ -142,41 +142,35 @@ export default class ChannelHeader extends React.Component {
 
     searchMentions(e) {
         e.preventDefault();
-
         const user = this.state.currentUser;
-
-        let terms = '';
-        if (user.notify_props && user.notify_props.mention_keys) {
-            const termKeys = UserStore.getMentionKeys(user.id);
-
-            if (termKeys.indexOf('@channel') !== -1) {
-                termKeys[termKeys.indexOf('@channel')] = '';
-            }
-
-            if (termKeys.indexOf('@all') !== -1) {
-                termKeys[termKeys.indexOf('@all')] = '';
-            }
-
-            terms = termKeys.join(' ');
+        if (SearchStore.isMentionSearch) {
+            // Close
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            GlobalActions.emitSearchMentionsEvent(user);
         }
-
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_SEARCH_TERM,
-            term: terms,
-            do_search: true,
-            is_mention_search: true
-        });
     }
 
     getFlagged(e) {
         e.preventDefault();
-        getFlaggedPosts();
+        if (SearchStore.isFlaggedPosts) {
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            getFlaggedPosts();
+        }
     }
 
-    openRecentMentions(e) {
-        if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.M) {
+    handleShortcut(e) {
+        if (Utils.cmdOrCtrlPressed(e) && e.shiftKey) {
             e.preventDefault();
-            this.searchMentions(e);
+            if (e.keyCode === Constants.KeyCodes.M) {
+                this.searchMentions(e);
+            }
+
+          //@TODO create shortcut for toggling flagged posts
+          // else if (e.keyCode == Constants.KeyCodes.<keycode>) {
+          //   this.toggleFlagged();
+          // }
         }
     }
 

webapp/components/search_results_header.jsx

@@ -1,14 +1,12 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Constants from 'utils/constants.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import * as GlobalActions from 'actions/global_actions.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
-var ActionTypes = Constants.ActionTypes;
-
 import React from 'react';
 
 export default class SearchResultsHeader extends React.Component {
@@ -22,22 +20,7 @@ export default class SearchResultsHeader extends React.Component {
     handleClose(e) {
         e.preventDefault();
 
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_SEARCH,
-            results: null
-        });
-
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_SEARCH_TERM,
-            term: null,
-            do_search: false,
-            is_mention_search: false
-        });
-
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_POST_SELECTED,
-            postId: null
-        });
+        GlobalActions.toggleSideBarAction(false);
 
         this.props.shrink();
     }

webapp/components/sidebar_right.jsx

@@ -37,6 +37,7 @@ export default class SidebarRight extends React.Component {
         this.state = {
             searchVisible: SearchStore.getSearchResults() !== null,
             isMentionSearch: SearchStore.getIsMentionSearch(),
+            isFlaggedPosts: SearchStore.getIsFlaggedPosts(),
             postRightVisible: Boolean(PostStore.getSelectedPost()),
             expanded: false,
             fromSearch: false,
@@ -125,7 +126,9 @@ export default class SidebarRight extends React.Component {
     }
 
     onShrink() {
-        this.setState({expanded: false});
+        this.setState({
+            expanded: false
+        });
     }
 
     onSearchChange() {

webapp/components/sidebar_right_menu.jsx

@@ -9,6 +9,7 @@ import AboutBuildModal from './about_build_modal.jsx';
 
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
+import SearchStore from 'stores/search_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import WebrtcStore from 'stores/webrtc_store.jsx';
 
@@ -92,32 +93,13 @@ export default class SidebarRightMenu extends React.Component {
 
     searchMentions(e) {
         e.preventDefault();
-
         const user = this.state.currentUser;
-
-        let terms = '';
-        if (user.notify_props && user.notify_props.mention_keys) {
-            const termKeys = UserStore.getMentionKeys(user.id);
-
-            if (termKeys.indexOf('@channel') !== -1) {
-                termKeys[termKeys.indexOf('@channel')] = '';
-            }
-
-            if (termKeys.indexOf('@all') !== -1) {
-                termKeys[termKeys.indexOf('@all')] = '';
-            }
-
-            terms = termKeys.join(' ');
+        if (SearchStore.isMentionSearch) {
+            GlobalActions.toggleSideBarAction(false);
+        } else {
+            GlobalActions.emitSearchMentionsEvent(user);
+            this.hideSidebars();
         }
-
-        this.hideSidebars();
-
-        AppDispatcher.handleServerAction({
-            type: ActionTypes.RECEIVED_SEARCH_TERM,
-            term: terms,
-            do_search: true,
-            is_mention_search: true
-        });
     }
 
     closeLeftSidebar() {

webapp/stores/search_store.jsx

@@ -19,6 +19,7 @@ class SearchStoreClass extends EventEmitter {
         this.searchResults = null;
         this.isMentionSearch = false;
         this.isFlaggedPosts = false;
+        this.isVisible = false;
         this.searchTerm = '';
     }