♻️(frontend) extract menu items into individual components

Each menu item is now a standalone component, improving: - Code organization & reusability - Maintainability by reducing OptionsMenuItems complexity This breaks down large components.
suitenumerique · Jan 27, 2025 · 1b52d76 · 1b52d76
1 parent a44b6e8
commit 1b52d76
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 61 deletions.
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiAccountBoxLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+
+export const EffectsMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useSidePanel()
+
+  return (
+    <MenuItem
+      onAction={() => toggleEffects()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiAccountBoxLine size={20} />
+      {t('effects')}
+    </MenuItem>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiMegaphoneLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { GRIST_FORM } from '@/utils/constants'
+
+export const FeedbackMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+
+  return (
+    <MenuItem
+      href={GRIST_FORM}
+      target="_blank"
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiMegaphoneLine size={20} />
+      {t('feedback')}
+    </MenuItem>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
@@ -0,0 +1,34 @@
+import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useFullScreen } from '../../../hooks/useFullScreen'
+
+export const FullScreenMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
+    useFullScreen()
+
+  if (!isFullscreenAvailable) {
+    return null
+  }
+
+  return (
+    <MenuItem
+      onAction={() => toggleFullScreen()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      {isCurrentlyFullscreen ? (
+        <>
+          <RiFullscreenExitLine size={20} />
+          {t('fullscreen.exit')}
+        </>
+      ) : (
+        <>
+          <RiFullscreenLine size={20} />
+          {t('fullscreen.enter')}
+        </>
+      )}
+    </MenuItem>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
@@ -1,28 +1,12 @@
-import {
-  RiAccountBoxLine,
-  RiFullscreenExitLine,
-  RiFullscreenLine,
-  RiMegaphoneLine,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
 import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useSettingsDialog } from '../SettingsDialogContext'
-import { GRIST_FORM } from '@/utils/constants'
-import { useFullScreen } from '../../../hooks/useFullScreen'
+import { FullScreenMenuItem } from './FullScreenMenuItem'
+import { SettingsMenuItem } from './SettingsMenuItem'
+import { FeedbackMenuItem } from './FeedbackMenuItem'
+import { EffectsMenuItem } from './EffectsMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-  const { setDialogOpen } = useSettingsDialog()
-
-  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen()
-
   return (
     <RACMenu
       style={{
@@ -31,49 +15,13 @@ export const OptionsMenuItems = () => {
       }}
     >
       <MenuSection>
-        {isFullscreenAvailable && (
-          <MenuItem
-            onAction={() => toggleFullScreen()}
-            className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          >
-            {isCurrentlyFullscreen ? (
-              <>
-                <RiFullscreenExitLine size={20} />
-                {t('fullscreen.exit')}
-              </>
-            ) : (
-              <>
-                <RiFullscreenLine size={20} />
-                {t('fullscreen.enter')}
-              </>
-            )}
-          </MenuItem>
-        )}
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
+        <FullScreenMenuItem />
+        <EffectsMenuItem />
       </MenuSection>
       <Separator />
       <MenuSection>
-        <MenuItem
-          href={GRIST_FORM}
-          target="_blank"
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiMegaphoneLine size={20} />
-          {t('feedback')}
-        </MenuItem>
-        <MenuItem
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          onAction={() => setDialogOpen(true)}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
+        <FeedbackMenuItem />
+        <SettingsMenuItem />
       </MenuSection>
     </RACMenu>
   )

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiSettings3Line } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSettingsDialog } from '../SettingsDialogContext'
+
+export const SettingsMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { setDialogOpen } = useSettingsDialog()
+
+  return (
+    <MenuItem
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+      onAction={() => setDialogOpen(true)}
+    >
+      <RiSettings3Line size={20} />
+      {t('settings')}
+    </MenuItem>
+  )
+}