Minor refactoring to move repeated code into utility class

src/components/downloadManager/DownloadManagerLayout.tsx

@@ -10,7 +10,7 @@ import {
 import { mdiClose } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
 import type { Actions } from '../../actions/lib/actions';
-import { isEscKeyPress } from '../../jsUtils';
+import { isEscapeKeyPress } from '../../jsUtils';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
 import ErrorBoundary from '../util/ErrorBoundary';
@@ -45,7 +45,7 @@ class DownloadManagerLayout extends Component<IProps> {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (isEscKeyPress(e.key)) {
+    if (isEscapeKeyPress(e.key)) {
       this.props.actions!.ui.closeSettings();
     }
   }

src/components/services/tabs/TabItem.tsx

@@ -19,7 +19,7 @@ import globalMessages from '../../../i18n/globalMessages';
 import type Service from '../../../models/Service';
 import Icon from '../../ui/icon';
 import MenuItemConstructorOptions = Electron.MenuItemConstructorOptions;
-import { acceleratorString } from '../../../jsUtils';
+import { acceleratorString, isShiftKeyPress } from '../../../jsUtils';
 
 const IS_SERVICE_DEBUGGING_ENABLED = (
   localStorage.getItem('debug') || ''
@@ -171,8 +171,8 @@ class TabItem extends Component<IProps, IState> {
     );
   }
 
-  handleShortcutIndex = (event, showShortcutIndex = true) => {
-    if (event.key === 'Shift') {
+  handleShortcutIndex = (event: KeyboardEvent, showShortcutIndex = true) => {
+    if (isShiftKeyPress(event.key)) {
       this.setState({ showShortcutIndex });
     }
   };

src/components/settings/SettingsLayout.tsx

@@ -7,7 +7,7 @@ import {
   injectIntl,
 } from 'react-intl';
 import { Outlet } from 'react-router-dom';
-import { isEscKeyPress } from '../../jsUtils';
+import { isEscapeKeyPress } from '../../jsUtils';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
 import ErrorBoundary from '../util/ErrorBoundary';
@@ -41,7 +41,7 @@ class SettingsLayout extends Component<PropsWithChildren<IProps>> {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
-    if (isEscKeyPress(e.key)) {
+    if (isEscapeKeyPress(e.key)) {
       this.props.closeSettings();
     }
   }

src/components/settings/releaseNotes/ReleaseNotesLayout.tsx

@@ -9,7 +9,7 @@ import {
 import { mdiClose } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
 import type { Actions } from '../../../actions/lib/actions';
-import { isEscKeyPress } from '../../../jsUtils';
+import { isEscapeKeyPress } from '../../../jsUtils';
 import Appear from '../../ui/effects/Appear';
 import Icon from '../../ui/icon';
 import ErrorBoundary from '../../util/ErrorBoundary';
@@ -44,7 +44,7 @@ class ReleaseNotesLayout extends Component<IProps> {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (isEscKeyPress(e.key)) {
+    if (isEscapeKeyPress(e.key)) {
       this.props.actions!.ui.closeSettings();
     }
   }

src/components/ui/input/index.tsx

@@ -16,6 +16,7 @@ import {
   injectIntl,
 } from 'react-intl';
 import withStyles, { type WithStylesProps } from 'react-jss';
+import { isEnterKeyPress } from '../../../jsUtils';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
 import Icon from '../icon';
@@ -96,7 +97,7 @@ class Input extends Component<IProps, IState> {
   }
 
   onInputKeyPress(e: KeyboardEvent<HTMLInputElement>): void {
-    if (e.key === 'Enter') {
+    if (isEnterKeyPress(e.key)) {
       const { onEnterKey = noop } = this.props;
       onEnterKey();
     }

src/components/ui/select/index.tsx

@@ -13,6 +13,11 @@ import {
   createRef,
 } from 'react';
 import withStyles, { type WithStylesProps } from 'react-jss';
+import {
+  isArrowDownKeyPress,
+  isArrowUpKeyPress,
+  isEnterKeyPress,
+} from '../../../jsUtils';
 import type { Theme } from '../../../themes';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
@@ -288,23 +293,23 @@ class SelectComponent extends Component<IProps, IState> {
 
     if (!open) return;
 
-    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    if (isArrowUpKeyPress(e.key) || isArrowDownKeyPress(e.key)) {
       e.preventDefault();
     }
 
     if (this.componentRef?.current) {
-      if (e.key === 'ArrowUp' && selected > 0) {
+      if (isArrowUpKeyPress(e.key) && selected > 0) {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
       } else if (
-        e.key === 'ArrowDown' &&
+        isArrowDownKeyPress(e.key) &&
         selected < Object.keys(options!).length - 1
       ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
-      } else if (e.key === 'Enter') {
+      } else if (isEnterKeyPress(e.key)) {
         this.select(Object.keys(options!)[selected]);
       }
 

src/features/webControls/components/WebControls.tsx

@@ -15,6 +15,7 @@ import {
 import withStyles, { type WithStylesProps } from 'react-jss';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import Icon from '../../../components/ui/icon';
+import { isEnterKeyPress, isEscapeKeyPress } from '../../../jsUtils';
 
 const messages = defineMessages({
   goHome: {
@@ -215,7 +216,7 @@ class WebControls extends Component<IProps, IState> {
             });
           }}
           onKeyDown={event => {
-            if (event.key === 'Enter') {
+            if (isEnterKeyPress(event.key)) {
               this.setState({
                 editUrl: false,
               });
@@ -224,7 +225,7 @@ class WebControls extends Component<IProps, IState> {
               if (this.inputRef?.current) {
                 this.inputRef.current.blur();
               }
-            } else if (event.key === 'Escape') {
+            } else if (isEscapeKeyPress(event.key)) {
               this.setState({
                 editUrl: false,
                 inputUrl: url,

src/features/workspaces/components/WorkspaceDrawer.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-intl';
 import withStyles, { type WithStylesProps } from 'react-jss';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
-import type { StoresProps } from 'src/@types/ferdium-components.types';
+import type { StoresProps } from '../../../@types/ferdium-components.types';
 import { H1 } from '../../../components/ui/headline';
 import Icon from '../../../components/ui/icon';
 import workspaceActions from '../actions';

src/jsUtils.ts

@@ -9,7 +9,11 @@ export const convertToJSON = (data?: string | any | null) =>
 export const cleanseJSObject = (data?: any | null) =>
   JSON.parse(JSON.stringify(data));
 
-export const isEscKeyPress = (key: string) => key === 'Escape';
+export const isArrowUpKeyPress = (key: string) => key === 'ArrowUp';
+export const isArrowDownKeyPress = (key: string) => key === 'ArrowDown';
+export const isEnterKeyPress = (key: string) => key === 'Enter';
+export const isEscapeKeyPress = (key: string) => key === 'Escape';
+export const isShiftKeyPress = (key: string) => key === 'Shift';
 
 export const safeParseInt = (text?: string | number | null) => {
   if (text === undefined || text === null) {

test/jsUtils.test.ts

@@ -96,14 +96,62 @@ describe('jsUtils', () => {
     });
   });
 
-  describe('isEscKeyPress', () => {
+  describe('isArrowUpKeyPress', () => {
+    it('returns true if the key is "ArrowUp"', () => {
+      const result = jsUtils.isArrowUpKeyPress('ArrowUp');
+      expect(result).toEqual(true);
+    });
+
+    it('returns false if the key is some other key', () => {
+      const result = jsUtils.isArrowUpKeyPress('Backspace');
+      expect(result).toEqual(false);
+    });
+  });
+
+  describe('isArrowDownKeyPress', () => {
+    it('returns true if the key is "ArrowDown"', () => {
+      const result = jsUtils.isArrowDownKeyPress('ArrowDown');
+      expect(result).toEqual(true);
+    });
+
+    it('returns false if the key is some other key', () => {
+      const result = jsUtils.isArrowDownKeyPress('Backspace');
+      expect(result).toEqual(false);
+    });
+  });
+
+  describe('isEnterKeyPress', () => {
+    it('returns true if the key is "Enter"', () => {
+      const result = jsUtils.isEnterKeyPress('Enter');
+      expect(result).toEqual(true);
+    });
+
+    it('returns false if the key is some other key', () => {
+      const result = jsUtils.isEnterKeyPress('Backspace');
+      expect(result).toEqual(false);
+    });
+  });
+
+  describe('isEscapeKeyPress', () => {
     it('returns true if the key is "Escape"', () => {
-      const result = jsUtils.isEscKeyPress('Escape');
+      const result = jsUtils.isEscapeKeyPress('Escape');
+      expect(result).toEqual(true);
+    });
+
+    it('returns false if the key is some other key', () => {
+      const result = jsUtils.isEscapeKeyPress('Backspace');
+      expect(result).toEqual(false);
+    });
+  });
+
+  describe('isShiftKeyPress', () => {
+    it('returns true if the key is "Shift"', () => {
+      const result = jsUtils.isShiftKeyPress('Shift');
       expect(result).toEqual(true);
     });
 
     it('returns false if the key is some other key', () => {
-      const result = jsUtils.isEscKeyPress('Backspace');
+      const result = jsUtils.isShiftKeyPress('Backspace');
       expect(result).toEqual(false);
     });
   });