From 26fdaac58972af7d600bb4436db704d786b25fac Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 3 Sep 2024 14:06:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20extract=20raised?=
 =?UTF-8?q?=20hand=20logic=20in=20a=20reusable=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Encapsulate code responsible for toggling hand,
and determining the hand state based on participant metadata.

This gonna be reused across the codebase.
---
 .../components/controls/HandToggle.tsx        | 23 +++++++------------
 .../rooms/livekit/hooks/useRaisedHand.tsx     | 22 ++++++++++++++++++
 2 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
index 92bd3cb5..db917c4c 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
@@ -2,25 +2,18 @@ import { useTranslation } from 'react-i18next'
 import { RiHand } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import {
-  useLocalParticipant,
-  useParticipantInfo,
-} from '@livekit/components-react'
+import { useLocalParticipant } from '@livekit/components-react'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
 
 export const HandToggle = () => {
   const { t } = useTranslation('rooms')
 
   const localParticipant = useLocalParticipant().localParticipant
-  const { metadata } = useParticipantInfo({ participant: localParticipant })
+  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
+    participant: localParticipant,
+  })
 
-  const parsedMetadata = JSON.parse(metadata || '{}')
-
-  const sendRaise = () => {
-    parsedMetadata.raised = !parsedMetadata.raised
-    localParticipant.setMetadata(JSON.stringify(parsedMetadata))
-  }
-
-  const label = parsedMetadata.raised
+  const label = isHandRaised
     ? t('controls.hand.lower')
     : t('controls.hand.raise')
 
@@ -36,8 +29,8 @@ export const HandToggle = () => {
         legacyStyle
         aria-label={label}
         tooltip={label}
-        isSelected={parsedMetadata.raised}
-        onPress={() => sendRaise()}
+        isSelected={isHandRaised}
+        onPress={() => toggleRaisedHand()}
       >
         <RiHand />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx b/src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx
new file mode 100644
index 00000000..a2539bb0
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx
@@ -0,0 +1,22 @@
+import { LocalParticipant, Participant } from 'livekit-client'
+import { useParticipantInfo } from '@livekit/components-react'
+import { isLocal } from '@/utils/livekit'
+
+type useRaisedHandProps = {
+  participant: Participant
+}
+
+export function useRaisedHand({ participant }: useRaisedHandProps) {
+  const { metadata } = useParticipantInfo({ participant })
+  const parsedMetadata = JSON.parse(metadata || '{}')
+
+  const toggleRaisedHand = () => {
+    if (isLocal(participant)) {
+      parsedMetadata.raised = !parsedMetadata.raised
+      const localParticipant = participant as LocalParticipant
+      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+    }
+  }
+
+  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
+}