Moves the attach-file shortcut into the component

ts/components/CompositionArea.tsx

@@ -50,6 +50,10 @@ import { MediaQualitySelector } from './MediaQualitySelector';
 import { Quote, Props as QuoteProps } from './conversation/Quote';
 import { StagedLinkPreview } from './conversation/StagedLinkPreview';
 import { countStickers } from './stickers/lib';
+import {
+  useAttachFileShortcut,
+  useKeyboardShortcuts,
+} from '../hooks/useKeyboardShortcuts';
 
 export type CompositionAPIType =
   | {
@@ -269,7 +273,7 @@ export const CompositionArea = ({
     [draftAttachments, onSendMessage, setLarge]
   );
 
-  const launchAttachmentPicker = () => {
+  const launchAttachmentPicker = useCallback(() => {
     const fileInput = fileInputRef.current;
     if (fileInput) {
       // Setting the value to empty so that onChange always fires in case
@@ -277,7 +281,10 @@ export const CompositionArea = ({
       fileInput.value = '';
       fileInput.click();
     }
-  };
+  }, []);
+
+  const attachFileShortcut = useAttachFileShortcut(launchAttachmentPicker);
+  useKeyboardShortcuts(attachFileShortcut);
 
   const focusInput = useCallback(() => {
     if (inputApiRef.current) {

ts/components/conversation/AudioCapture.tsx

@@ -1,7 +1,7 @@
 // Copyright 2016-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import * as moment from 'moment';
 import { noop } from 'lodash';
 
@@ -13,7 +13,7 @@ import { ToastVoiceNoteLimit } from '../ToastVoiceNoteLimit';
 import { ToastVoiceNoteMustBeOnlyAttachment } from '../ToastVoiceNoteMustBeOnlyAttachment';
 import { useEscapeHandling } from '../../hooks/useEscapeHandling';
 import {
-  getStartRecordingShortcut,
+  useStartRecordingShortcut,
   useKeyboardShortcuts,
 } from '../../hooks/useKeyboardShortcuts';
 
@@ -94,10 +94,7 @@ export const AudioCapture = ({
 
   useEscapeHandling(escapeRecording);
 
-  const startRecordingShortcut = useMemo(() => {
-    return getStartRecordingShortcut(startRecording);
-  }, [startRecording]);
-
+  const startRecordingShortcut = useStartRecordingShortcut(startRecording);
   useKeyboardShortcuts(startRecordingShortcut);
 
   // Update timestamp regularly, then timeout if recording goes over five minutes