diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx index fce9c3d14fd4..e554d3c16c82 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useUserMenu.tsx @@ -7,14 +7,14 @@ import React from 'react'; import UserMenuHeader from '../UserMenuHeader'; import { useAccountItems } from './useAccountItems'; import { useStatusItems } from './useStatusItems'; -import { useVoipItems } from './useVoipItems'; +import { useVoipItemsSection } from './useVoipItemsSection'; export const useUserMenu = (user: IUser) => { const t = useTranslation(); const statusItems = useStatusItems(); const accountItems = useAccountItems(); - const voipItems = useVoipItems(); + const voipSection = useVoipItemsSection(); const logout = useLogout(); const handleLogout = useEffectEvent(() => { @@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => { title: t('Status'), items: statusItems, }, - { - items: voipItems, - }, + voipSection, { title: t('Account'), items: accountItems, @@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => { { items: [logoutItem], }, - ]; + ].filter((section) => section !== undefined); }; diff --git a/apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx similarity index 72% rename from apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx rename to apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx index d7cbf2428c32..9b126e4eb1e5 100644 --- a/apps/meteor/client/sidebar/header/hooks/useVoipItems.tsx +++ b/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx @@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -const useVoipItems = (): GenericMenuItemProps[] => { +export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => { const { t } = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -45,23 +45,25 @@ const useVoipItems = (): GenericMenuItemProps[] => { return useMemo(() => { if (!isEnabled) { - return []; + return; } - return [ - { - id: 'toggle-voip', - icon: isRegistered ? 'phone-disabled' : 'phone', - disabled: !isReady || toggleVoip.isLoading, - onClick: () => toggleVoip.mutate(), - content: ( - - {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')} - - ), - }, - ]; + return { + items: [ + { + id: 'toggle-voip', + icon: isRegistered ? 'phone-disabled' : 'phone', + disabled: !isReady || toggleVoip.isLoading, + onClick: () => toggleVoip.mutate(), + content: ( + + {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')} + + ), + }, + ], + }; }, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]); }; -export default useVoipItems; +export default useVoipItemsSection; diff --git a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx index e9ad8cc73836..030c248036a8 100644 --- a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx +++ b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx @@ -7,14 +7,14 @@ import React from 'react'; import UserMenuHeader from '../UserMenuHeader'; import { useAccountItems } from './useAccountItems'; import { useStatusItems } from './useStatusItems'; -import useVoipItems from './useVoipItems'; +import { useVoipItemsSection } from './useVoipItemsSection'; export const useUserMenu = (user: IUser) => { const t = useTranslation(); const statusItems = useStatusItems(); const accountItems = useAccountItems(); - const voipItems = useVoipItems(); + const voipItemsSection = useVoipItemsSection(); const logout = useLogout(); const handleLogout = useMutableCallback(() => { @@ -37,9 +37,7 @@ export const useUserMenu = (user: IUser) => { title: t('Status'), items: statusItems, }, - { - items: voipItems, - }, + voipItemsSection, { title: t('Account'), items: accountItems, @@ -47,5 +45,5 @@ export const useUserMenu = (user: IUser) => { { items: [logoutItem], }, - ]; + ].filter((section) => section !== undefined); }; diff --git a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx b/apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx similarity index 73% rename from apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx rename to apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx index b3e4cbf22d52..35922ff68cf5 100644 --- a/apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItems.tsx +++ b/apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx @@ -6,7 +6,7 @@ import { useMutation } from '@tanstack/react-query'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -export const useVoipItems = (): GenericMenuItemProps[] => { +export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undefined => { const { t } = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -45,23 +45,23 @@ export const useVoipItems = (): GenericMenuItemProps[] => { return useMemo(() => { if (!isEnabled) { - return []; + return; } - return [ - { - id: 'toggle-voip', - icon: isRegistered ? 'phone-disabled' : 'phone', - disabled: !isReady || toggleVoip.isLoading, - onClick: () => toggleVoip.mutate(), - content: ( - - {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')} - - ), - }, - ]; + return { + items: [ + { + id: 'toggle-voip', + icon: isRegistered ? 'phone-disabled' : 'phone', + disabled: !isReady || toggleVoip.isLoading, + onClick: () => toggleVoip.mutate(), + content: ( + + {isRegistered ? t('Disable_voice_calling') : t('Enable_voice_calling')} + + ), + }, + ], + }; }, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]); }; - -export default useVoipItems;