feat: added new hot key hook since useKey doesnt ignore special keys

replaced all alpha numeric shortcuts

ts/components/buttons/CopyToClipboardButton.tsx

@@ -1,7 +1,7 @@
 import { isEmpty } from 'lodash';
 import { useState } from 'react';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
-import useKey from 'react-use/lib/useKey';
+import { useHotkey } from '../../hooks/useHotkey';
 import { ToastUtils } from '../../session/utils';
 import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
 import { SessionIconButton } from '../icon';
@@ -30,17 +30,7 @@ export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
     }
   };
 
-  useKey(
+  useHotkey('c', onClick, !hotkey);
-    (event: KeyboardEvent) => {
-      return event.key === 'c';
-    },
-    () => {
-      if (!hotkey) {
-        return;
-      }
-      onClick();
-    }
-  );
 
   return (
     <SessionButton
@@ -73,17 +63,7 @@ export const CopyToClipboardIcon = (props: CopyToClipboardIconProps) => {
     }
   };
 
-  useKey(
+  useHotkey('c', onClick, !hotkey);
-    (event: KeyboardEvent) => {
-      return event.key === 'c';
-    },
-    () => {
-      if (!hotkey) {
-        return;
-      }
-      onClick();
-    }
-  );
 
   return (
     <SessionIconButton

ts/components/dialog/EnterPasswordModal.tsx

@@ -2,7 +2,6 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
 import { useRef } from 'react';
-import useKey from 'react-use/lib/useKey';
 import useMount from 'react-use/lib/useMount';
 import { ToastUtils } from '../../session/utils';
 import { matchesHash } from '../../util/passwordUtils';
@@ -10,6 +9,7 @@ import { matchesHash } from '../../util/passwordUtils';
 import { updateEnterPasswordModal } from '../../state/ducks/modalDialog';
 import { SpacerSM } from '../basic/Text';
 
+import { useHotkey } from '../../hooks/useHotkey';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 
@@ -65,16 +65,11 @@ export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
     }
   });
 
-  useKey(
+  useHotkey('Enter', (event: KeyboardEvent) => {
-    (event: KeyboardEvent) => event.key === 'Enter',
-    (event: KeyboardEvent) => {
-      if (event.key === 'Enter') {
     if (event.target === passwordInputRef.current) {
       confirmPassword();
     }
-      }
+  });
-    }
-  );
 
   return (
     <SessionWrapperModal

ts/components/dialog/edit-profile/EditProfileDialog.tsx

@@ -1,13 +1,13 @@
 import { isEmpty } from 'lodash';
 import { RefObject, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
 import { Dispatch } from '@reduxjs/toolkit';
 import { SyncUtils, UserUtils } from '../../../session/utils';
 import { YourSessionIDPill, YourSessionIDSelectable } from '../../basic/YourSessionIDPill';
 
+import { useHotkey } from '../../../hooks/useHotkey';
 import { useOurAvatarPath, useOurConversationUsername } from '../../../hooks/useParamSelector';
 import { ConversationTypeEnum } from '../../../models/conversationAttributes';
 import { getConversationController } from '../../../session/conversations';
@@ -65,8 +65,7 @@ const handleKeyEditMode = (
   }
 };
 
-const handleKeyCancel =
+const handleKeyCancel = (
-  (
   mode: ProfileDialogModes,
   setMode: (mode: ProfileDialogModes) => void,
   inputRef: RefObject<HTMLInputElement>,
@@ -74,8 +73,7 @@ const handleKeyCancel =
   setProfileName: (name: string) => void,
   setProfileNameError: (error: string | undefined) => void,
   loading: boolean
-  ) =>
+) => {
-  () => {
   if (loading) {
     return;
   }
@@ -94,7 +92,7 @@ const handleKeyCancel =
     case 'default':
     default:
   }
-  };
+};
 
 const handleKeyEscape = (
   mode: ProfileDialogModes,
@@ -249,25 +247,11 @@ export const EditProfileDialog = () => {
     );
   };
 
-  useKey(
+  useHotkey('v', () => handleKeyQRMode(mode, setMode, loading), loading);
-    (event: KeyboardEvent) => {
+  useHotkey('Enter', () => handleKeyEditMode(mode, setMode, onClickOK, loading), loading);
-      return (
+  useHotkey(
-        event.key === 'v' ||
+    'Backspace',
-        event.key === 'Enter' ||
+    () =>
-        event.key === 'Backspace' ||
-        event.key === 'Esc' ||
-        event.key === 'Escape'
-      );
-    },
-    (event: KeyboardEvent) => {
-      switch (event.key) {
-        case 'v':
-          handleKeyQRMode(mode, setMode, loading);
-          break;
-        case 'Enter':
-          handleKeyEditMode(mode, setMode, onClickOK, loading);
-          break;
-        case 'Backspace':
       handleKeyCancel(
         mode,
         setMode,
@@ -276,10 +260,12 @@ export const EditProfileDialog = () => {
         setProfileName,
         setProfileNameError,
         loading
+      ),
+    loading
   );
-          break;
+  useHotkey(
-        case 'Esc':
+    'Escape',
-        case 'Escape':
+    () =>
       handleKeyEscape(
         mode,
         setMode,
@@ -288,11 +274,8 @@ export const EditProfileDialog = () => {
         setProfileNameError,
         loading,
         dispatch
-          );
+      ),
-          break;
+    loading
-        default:
-      }
-    }
   );
 
   return (

ts/hooks/useHotkey.tsx

@@ -0,0 +1,66 @@
+import useKey, { Handler, KeyPredicate, UseKeyOptions } from 'react-use/lib/useKey';
+
+function specialKeyPressed(event: KeyboardEvent) {
+  const pressed = [];
+
+  if (event.metaKey) {
+    pressed.push('super');
+  }
+  if (event.ctrlKey) {
+    pressed.push('ctrl');
+  }
+  if (event.altKey) {
+    pressed.push('alt');
+  }
+  if (event.shiftKey) {
+    pressed.push('shift');
+  }
+
+  return pressed.join(' + ');
+}
+
+export function useHotkey(
+  key: string,
+  onPress: (event: KeyboardEvent) => void | Promise<void>,
+  disabled?: boolean
+) {
+  const opts: UseKeyOptions<HTMLElement> = {};
+
+  const predicate: KeyPredicate = event => {
+    const lowerKey = key.toLowerCase();
+    const eventKey = event.key.toLowerCase();
+
+    window.log.debug(
+      `WIP: [useHotkey] key: ${key} lowerKey: ${lowerKey} eventKey: ${eventKey} event.target: ${JSON.stringify(event)}`
+    );
+
+    switch (lowerKey) {
+      case 'esc':
+      case 'escape':
+        return eventKey === 'escape' || eventKey === 'esc';
+      default:
+        return eventKey === lowerKey;
+    }
+  };
+
+  const handler: Handler = event => {
+    if (disabled) {
+      window.log.debug(`WIP: [useHotkey] '${key}' is disabled. Triggered by ${event.key}`);
+      return;
+    }
+
+    const specialKeys = specialKeyPressed(event);
+
+    if (specialKeys) {
+      window.log.debug(
+        `WIP: [useHotkey] '${key}' was ignored because it was pressed with ${specialKeys}. Triggered by ${event.key} + ${specialKeys}`
+      );
+      return;
+    }
+
+    window.log.debug(`WIP: [useHotkey] '${key}' onPress event. Triggered by ${event.key}`);
+    void onPress(event);
+  };
+
+  useKey(predicate, handler, opts);
+}