Refactoring and optimizations for useHotkeys

src/components/left/LeftColumn.tsx

@@ -282,10 +282,10 @@ const LeftColumn: FC<StateProps> = ({
     openChat({ id: currentUserId });
   }, [currentUserId, openChat]);
 
-  useHotkeys([
+  useHotkeys({
-    ['mod+shift+F', handleHotkeySearch],
+    'mod+shift+F': handleHotkeySearch,
-    ['mod+shift+S', handleHotkeySavedMessages],
+    'mod+shift+S': handleHotkeySavedMessages,
-  ]);
+  });
 
   useEffect(() => {
     clearTwoFaError();

src/components/left/main/ChatFolders.tsx

@@ -163,7 +163,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown, true);
     };
-  });
+  }, [currentUserId, folderTabs, openChat, setActiveChatFolder]);
 
   const {
     shouldRender: shouldRenderPlaceholder, transitionClassNames,

src/components/left/main/ChatList.tsx

@@ -19,7 +19,7 @@ import usePrevious from '../../../hooks/usePrevious';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import { useFolderManagerForOrderedIds } from '../../../hooks/useFolderManager';
 import { useChatAnimationType } from './hooks';
-import { HotkeyItem, useHotkeys } from '../../../hooks/useHotkeys';
+import { useHotkeys } from '../../../hooks/useHotkeys';
 
 import InfiniteScroll from '../../ui/InfiniteScroll';
 import Loading from '../../ui/Loading';
@@ -76,19 +76,16 @@ const ChatList: FC<OwnProps> = ({
   const [viewportIds, getMore] = useInfiniteScroll(undefined, orderedIds, undefined, CHAT_LIST_SLICE);
 
   // Support <Alt>+<Up/Down> to navigate between chats
-  const hotkeys: HotkeyItem[] = [];
+  useHotkeys(isActive && orderedIds?.length ? {
-  if (isActive && orderedIds?.length) {
+    'alt+ArrowUp': (e: KeyboardEvent) => {
-    hotkeys.push(['alt+ArrowUp', (e: KeyboardEvent) => {
       e.preventDefault();
       openNextChat({ targetIndexDelta: -1, orderedIds });
-    }]);
+    },
-    hotkeys.push(['alt+ArrowDown', (e: KeyboardEvent) => {
+    'alt+ArrowDown': (e: KeyboardEvent) => {
       e.preventDefault();
       openNextChat({ targetIndexDelta: 1, orderedIds });
-    }]);
+    },
-  }
+  } : undefined);
-
-  useHotkeys(hotkeys);
 
   // Support <Cmd>+<Digit> to navigate between chats
   useEffect(() => {

src/components/middle/HeaderActions.tsx

@@ -151,9 +151,9 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
     handleSearchClick();
   }, [canSearch, handleSearchClick]);
 
-  useHotkeys([
+  useHotkeys({
-    ['meta+F', handleHotkeySearchClick],
+    'meta+F': handleHotkeySearchClick,
-  ]);
+  });
 
   const lang = useLang();
 

src/components/middle/hooks/useCopySelectedMessages.ts

@@ -10,7 +10,7 @@ const useCopySelectedMessages = (isActive: boolean, copySelectedMessages: NoneTo
     copySelectedMessages();
   }
 
-  useHotkeys([['meta+C', handleCopy]]);
+  useHotkeys({ 'meta+C': handleCopy });
 };
 
 export default useCopySelectedMessages;

src/hooks/useHotkeys.ts

@@ -1,31 +1,40 @@
-// Original source from Mantine
-// https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-hotkeys/
-
 import { useEffect } from '../lib/teact/teact';
-import { getHotkeyHandler, getHotkeyMatcher } from '../util/parseHotkey';
+import { getHotkeyMatcher } from '../util/parseHotkey';
+import { createCallbackManager } from '../util/callbacks';
 
-export { getHotkeyHandler };
+const IGNORE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
 
-export type HotkeyItem = [string, (event: KeyboardEvent) => void];
+const handlers = createCallbackManager();
+document.documentElement.addEventListener('keydown', handlers.runCallbacks);
 
-function shouldFireEvent(event: KeyboardEvent) {
+export function useHotkeys(hotkeys?: Record<string, (e: KeyboardEvent) => void>) {
-  if (event.target instanceof HTMLElement) {
-    return !['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName);
-  }
-  return true;
-}
-
-export function useHotkeys(hotkeys: HotkeyItem[]) {
   useEffect(() => {
-    const keydownListener = (event: KeyboardEvent) => {
+    if (!hotkeys) {
-      hotkeys.forEach(([hotkey, handler]) => {
+      return undefined;
-        if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event)) {
+    }
-          handler(event);
+
+    const entries = Object.entries(hotkeys);
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (!shouldFireEvent(e)) {
+        return;
+      }
+
+      entries.forEach(([hotkey, handler]) => {
+        if (getHotkeyMatcher(hotkey)(e)) {
+          handler(e);
         }
       });
-    };
+    }
 
-    document.documentElement.addEventListener('keydown', keydownListener);
+    return handlers.addCallback(handleKeyDown);
-    return () => document.documentElement.removeEventListener('keydown', keydownListener);
   }, [hotkeys]);
 }
+
+function shouldFireEvent(e: KeyboardEvent) {
+  if (e.target instanceof HTMLElement) {
+    return !IGNORE_TAGS.has(e.target.tagName);
+  }
+
+  return true;
+}

src/hooks/useNativeCopySelectedMessages.ts

@@ -11,7 +11,7 @@ const useNativeCopySelectedMessages = (copyMessagesByIds: ({ messageIds }: { mes
     }
   }
 
-  useHotkeys([['meta+C', handleCopy]]);
+  useHotkeys({ 'meta+C': handleCopy });
 };
 
 export default useNativeCopySelectedMessages;

src/util/parseHotkey.ts

@@ -13,8 +13,6 @@ export type Hotkey = KeyboardModifiers & {
   key?: string;
 };
 
-type HotkeyItem = [string, (event: React.KeyboardEvent<HTMLElement>) => void];
-
 type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
 
 export function parseHotkey(hotkey: string): Hotkey {
@@ -77,14 +75,3 @@ function isExactHotkey(hotkey: Hotkey, event: KeyboardEvent): boolean {
 export function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch {
   return (event) => isExactHotkey(parseHotkey(hotkey), event);
 }
-
-export function getHotkeyHandler(hotkeys: HotkeyItem[]) {
-  return (event: React.KeyboardEvent<HTMLElement>) => {
-    hotkeys.forEach(([hotkey, handler]) => {
-      if (getHotkeyMatcher(hotkey)(event.nativeEvent)) {
-        event.preventDefault();
-        handler(event);
-      }
-    });
-  };
-}