From 0da8aa846a979088ab2b9ffb082153ee068e0149 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 9 Oct 2024 17:21:27 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20encapsulate=20si?=
 =?UTF-8?q?de=20panel=20values?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor values in an enum, enhance code's typing.
---
 .../rooms/livekit/hooks/useWidgetInteraction.ts     | 13 +++++++++----
 src/frontend/src/stores/layout.ts                   |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts b/src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts
index 19f2af07..b886ddfd 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts
@@ -2,20 +2,25 @@ import { useLayoutContext } from '@livekit/components-react'
 import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 
+export enum SidePanel {
+  PARTICIPANTS = 'participants',
+  EFFECTS = 'effects',
+}
+
 export const useWidgetInteraction = () => {
   const { dispatch, state } = useLayoutContext().widget
 
   const layoutSnap = useSnapshot(layoutStore)
   const sidePanel = layoutSnap.sidePanel
 
-  const isParticipantsOpen = sidePanel == 'participants'
-  const isEffectsOpen = sidePanel == 'effects'
+  const isParticipantsOpen = sidePanel == SidePanel.PARTICIPANTS
+  const isEffectsOpen = sidePanel == SidePanel.EFFECTS
 
   const toggleParticipants = () => {
     if (dispatch && state?.showChat) {
       dispatch({ msg: 'toggle_chat' })
     }
-    layoutStore.sidePanel = isParticipantsOpen ? null : 'participants'
+    layoutStore.sidePanel = isParticipantsOpen ? null : SidePanel.PARTICIPANTS
   }
 
   const toggleChat = () => {
@@ -31,7 +36,7 @@ export const useWidgetInteraction = () => {
     if (dispatch && state?.showChat) {
       dispatch({ msg: 'toggle_chat' })
     }
-    layoutStore.sidePanel = isEffectsOpen ? null : 'effects'
+    layoutStore.sidePanel = isEffectsOpen ? null : SidePanel.EFFECTS
   }
 
   return {
diff --git a/src/frontend/src/stores/layout.ts b/src/frontend/src/stores/layout.ts
index f8f42994..1dbf9e9f 100644
--- a/src/frontend/src/stores/layout.ts
+++ b/src/frontend/src/stores/layout.ts
@@ -1,8 +1,9 @@
 import { proxy } from 'valtio'
+import { SidePanel } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
 
 type State = {
   showHeader: boolean
-  sidePanel: 'participants' | 'effects' | null
+  sidePanel: SidePanel | null
 }
 
 export const layoutStore = proxy<State>({