Add hotkey ctrl+k for search

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/modal/RawModal.jsx

@@ -4,6 +4,8 @@ import './RawModal.scss';
 
 import Modal from 'react-modal';
 
+import navigation from '../../../client/state/navigation';
+
 Modal.setAppElement('#root');
 
 function RawModal({
@@ -23,6 +25,9 @@ function RawModal({
     default:
       modalClass += 'raw-modal__small ';
   }
+
+  navigation.setIsRawModalVisible(isOpen);
+
   const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
   return (
     <Modal

src/client/action/navigation.js

@@ -1,21 +1,21 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-function selectTab(tabId) {
+export function selectTab(tabId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_TAB,
     tabId,
   });
 }
 
-function selectSpace(roomId) {
+export function selectSpace(roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_SPACE,
     roomId,
   });
 }
 
-function selectRoom(roomId, eventId) {
+export function selectRoom(roomId, eventId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_ROOM,
     roomId,
@@ -23,26 +23,26 @@ function selectRoom(roomId, eventId) {
   });
 }
 
-function openInviteList() {
+export function openInviteList() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_LIST,
   });
 }
 
-function openPublicRooms(searchTerm) {
+export function openPublicRooms(searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
     searchTerm,
   });
 }
 
-function openCreateRoom() {
+export function openCreateRoom() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_CREATE_ROOM,
   });
 }
 
-function openInviteUser(roomId, searchTerm) {
+export function openInviteUser(roomId, searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_USER,
     roomId,
@@ -50,7 +50,7 @@ function openInviteUser(roomId, searchTerm) {
   });
 }
 
-function openProfileViewer(userId, roomId) {
+export function openProfileViewer(userId, roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_PROFILE_VIEWER,
     userId,
@@ -58,13 +58,13 @@ function openProfileViewer(userId, roomId) {
   });
 }
 
-function openSettings() {
+export function openSettings() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_SETTINGS,
   });
 }
 
-function openEmojiBoard(cords, requestEmojiCallback) {
+export function openEmojiBoard(cords, requestEmojiCallback) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_EMOJIBOARD,
     cords,
@@ -72,7 +72,7 @@ function openEmojiBoard(cords, requestEmojiCallback) {
   });
 }
 
-function openReadReceipts(roomId, userIds) {
+export function openReadReceipts(roomId, userIds) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_READRECEIPTS,
     roomId,
@@ -80,7 +80,7 @@ function openReadReceipts(roomId, userIds) {
   });
 }
 
-function openRoomOptions(cords, roomId) {
+export function openRoomOptions(cords, roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_ROOMOPTIONS,
     cords,
@@ -88,7 +88,7 @@ function openRoomOptions(cords, roomId) {
   });
 }
 
-function replyTo(userId, eventId, body) {
+export function replyTo(userId, eventId, body) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CLICK_REPLY_TO,
     userId,
@@ -97,26 +97,9 @@ function replyTo(userId, eventId, body) {
   });
 }
 
-function openSearch(term) {
+export function openSearch(term) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_SEARCH,
     term,
   });
 }
-
-export {
-  selectTab,
-  selectSpace,
-  selectRoom,
-  openInviteList,
-  openPublicRooms,
-  openCreateRoom,
-  openInviteUser,
-  openProfileViewer,
-  openSettings,
-  openEmojiBoard,
-  openReadReceipts,
-  openRoomOptions,
-  replyTo,
-  openSearch,
-};

src/client/event/hotkeys.js

@@ -0,0 +1,24 @@
+import { openSearch } from '../action/navigation';
+import navigation from '../state/navigation';
+
+function listenKeyboard(event) {
+  // Ctrl +
+  if (event.ctrlKey) {
+    // k - for search Modal
+    if (event.keyCode === 75) {
+      if (navigation.isRawModalVisible) return;
+      event.preventDefault();
+      openSearch();
+    }
+  }
+}
+
+function initHotkeys() {
+  document.body.addEventListener('keydown', listenKeyboard);
+}
+
+function removeHotkeys() {
+  document.body.removeEventListener('keydown', listenKeyboard);
+}
+
+export { initHotkeys, removeHotkeys };

src/client/initMatrix.js

@@ -6,6 +6,7 @@ import { secret } from './state/auth';
 import RoomList from './state/RoomList';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
+import { initHotkeys } from './event/hotkeys';
 
 global.Olm = require('@matrix-org/olm');
 
@@ -62,6 +63,7 @@ class InitMatrix extends EventEmitter {
           this.roomList = new RoomList(this.matrixClient);
           this.roomsInput = new RoomsInput(this.matrixClient);
           this.notifications = new Notifications(this.roomList);
+          initHotkeys();
           this.emit('init_loading_finished');
         }
       },

src/client/state/navigation.js

@@ -12,6 +12,8 @@ class Navigation extends EventEmitter {
 
     this.selectedRoomId = null;
     this.recentRooms = [];
+
+    this.isRawModalVisible = false;
   }
 
   _setSpacePath(roomId) {
@@ -38,13 +40,16 @@ class Navigation extends EventEmitter {
   addRecentRoom(roomId) {
     if (typeof roomId !== 'string') return;
 
-    this.removeRecentRoom(roomId);
     this.recentRooms.push(roomId);
     if (this.recentRooms.length > 10) {
       this.recentRooms.splice(0, 1);
     }
   }
 
+  setIsRawModalVisible(visible) {
+    this.isRawModalVisible = visible;
+  }
+
   navigate(action) {
     const actions = {
       [cons.actions.navigation.SELECT_TAB]: () => {
@@ -69,6 +74,7 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.SELECT_ROOM]: () => {
         const prevSelectedRoomId = this.selectedRoomId;
         this.selectedRoomId = action.roomId;
+        this.removeRecentRoom(prevSelectedRoomId);
         this.addRecentRoom(prevSelectedRoomId);
         this.removeRecentRoom(this.selectedRoomId);
         this.emit(