From ebb8c14eebbabb99842d00553a5224ed98131860 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 27 Sep 2024 13:08:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20register=20short?=
 =?UTF-8?q?cut=20using=20a=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Encapsulate the logic for shortcuts registering in a proper hook.
It makes the code reusable and easier to read.
---
 .../controls/SelectToggleDevice.tsx           | 19 +++++--------------
 .../shortcuts/useRegisterKeyboardShortcut.ts  | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
index e9157b10..e6b1954d 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -16,14 +16,11 @@ import {
 } from '@remixicon/react'
 import { Track } from 'livekit-client'
 
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
-import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
-import {
-  formatShortcutKey,
-  appendShortcutLabel,
-} from '@/features/shortcuts/utils'
+import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { Shortcut } from '@/features/shortcuts/types'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -87,6 +84,8 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const { devices, activeDeviceId, setActiveMediaDevice } =
     useMediaDeviceSelect({ kind })
 
+  useRegisterKeyboardShortcut({ shortcut: config.shortcut, handler: toggle })
+
   const toggleLabel = useMemo(() => {
     const label = t(enabled ? 'disable' : 'enable', {
       keyPrefix: `join.${kind}`,
@@ -97,14 +96,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const selectLabel = t('choose', { keyPrefix: `join.${kind}` })
   const Icon = enabled ? iconOn : iconOff
 
-  useEffect(() => {
-    if (!config.shortcut) return
-    keyboardShortcutsStore.shortcuts.set(
-      formatShortcutKey(config.shortcut),
-      () => toggle()
-    )
-  }, [toggle, config.shortcut])
-
   return (
     <HStack gap={0}>
       <ToggleButton
diff --git a/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts b/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts
new file mode 100644
index 00000000..3637d465
--- /dev/null
+++ b/src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
+import { formatShortcutKey } from '@/features/shortcuts/utils'
+import { Shortcut } from '@/features/shortcuts/types'
+
+export type useRegisterKeyboardShortcutProps = {
+  shortcut?: Shortcut
+  handler: () => void
+}
+
+export const useRegisterKeyboardShortcut = ({
+  shortcut,
+  handler,
+}: useRegisterKeyboardShortcutProps) => {
+  useEffect(() => {
+    if (!shortcut) return
+    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
+  }, [handler, shortcut])
+}