From f0d9f5693827282bed0e73f067755dd15faed54f Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Tue, 21 Jun 2022 16:49:08 -0300 Subject: [PATCH 1/9] fix --- apps/meteor/client/providers/CallProvider/CallProvider.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index ba1e359e4acd..c173485dc6cf 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -55,9 +55,11 @@ export const CallProvider: FC = ({ children }) => { const [queueCounter, setQueueCounter] = useState(0); const [queueName, setQueueName] = useState(''); + const closeRoom = useCallCloseRoom(); + const openWrapUpModal = useCallback((): void => { - setModal(() => ); - }, [setModal]); + setModal(() => ); + }, [closeRoom, setModal]); const [queueAggregator, setQueueAggregator] = useState(); From 1db448d7ec1922f3d4d0b3f741fd0668006d083b Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 22 Jun 2022 15:09:13 -0300 Subject: [PATCH 2/9] fix closeRoom --- .../providers/CallProvider/CallProvider.tsx | 53 +++++++++---------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index c173485dc6cf..6282e421db22 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -21,7 +21,7 @@ import { OutgoingByeRequest } from 'sip.js/lib/core'; import { CustomSounds } from '../../../app/custom-sounds/client'; import { getUserPreference } from '../../../app/utils/client'; import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal'; -import { CallContext, CallContextValue, useCallCloseRoom } from '../../contexts/CallContext'; +import { CallContext, CallContextValue } from '../../contexts/CallContext'; import { roomCoordinator } from '../../lib/rooms/roomCoordinator'; import { QueueAggregator } from '../../lib/voip/QueueAggregator'; import { useVoipClient } from './hooks/useVoipClient'; @@ -44,6 +44,9 @@ export const CallProvider: FC = ({ children }) => { const voipEnabled = useSetting('VoIP_Enabled'); const subscribeToNotifyUser = useStream('notify-user'); const dispatchEvent = useEndpoint('POST', '/v1/voip/events'); + const visitorEndpoint = useEndpoint('POST', '/v1/livechat/visitor'); + const voipEndpoint = useEndpoint('GET', '/v1/voip/room'); + const voipCloseRoomEndpoint = useEndpoint('POST', '/v1/voip/room.close'); const setModal = useSetModal(); const result = useVoipClient(); @@ -54,8 +57,25 @@ export const CallProvider: FC = ({ children }) => { const [queueCounter, setQueueCounter] = useState(0); const [queueName, setQueueName] = useState(''); + const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>(); - const closeRoom = useCallCloseRoom(); + const closeRoom = useCallback( + async (data): Promise => { + roomInfo && + (await voipCloseRoomEndpoint({ + rid: roomInfo.rid, + token: roomInfo.v.token || '', + options: { comment: data?.comment, tags: data?.tags }, + })); + homeRoute.push({}); + + const queueAggregator = result?.voipClient?.getAggregator(); + if (queueAggregator) { + queueAggregator.callEnded(); + } + }, + [homeRoute, result?.voipClient, roomInfo, voipCloseRoomEndpoint], + ); const openWrapUpModal = useCallback((): void => { setModal(() => ); @@ -236,12 +256,6 @@ export const CallProvider: FC = ({ children }) => { }; }, [onNetworkConnected, onNetworkDisconnected, result.voipClient]); - const visitorEndpoint = useEndpoint('POST', '/v1/livechat/visitor'); - const voipEndpoint = useEndpoint('GET', '/v1/voip/room'); - const voipCloseRoomEndpoint = useEndpoint('POST', '/v1/voip/room.close'); - - const [roomInfo, setRoomInfo] = useState<{ v: { token?: string }; rid: string }>(); - const openRoom = (rid: IVoipRoom['_id']): void => { roomCoordinator.openRouteLink('v', { rid }); }; @@ -321,29 +335,10 @@ export const CallProvider: FC = ({ children }) => { } return ''; }, - closeRoom: async ({ comment, tags }: { comment?: string; tags?: string[] }): Promise => { - roomInfo && (await voipCloseRoomEndpoint({ rid: roomInfo.rid, token: roomInfo.v.token || '', options: { comment, tags } })); - homeRoute.push({}); - const queueAggregator = voipClient.getAggregator(); - if (queueAggregator) { - queueAggregator.callEnded(); - } - }, + closeRoom, openWrapUpModal, }; - }, [ - voipEnabled, - user, - result, - roomInfo, - queueCounter, - queueName, - openWrapUpModal, - visitorEndpoint, - voipEndpoint, - voipCloseRoomEndpoint, - homeRoute, - ]); + }, [voipEnabled, user, result, roomInfo, queueCounter, queueName, closeRoom, openWrapUpModal, visitorEndpoint, voipEndpoint]); return ( From 73040b0d70394a27c005cbfbe3cbf051df82666d Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 22 Jun 2022 17:47:26 -0300 Subject: [PATCH 3/9] fix --- apps/meteor/client/providers/CallProvider/CallProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index 6282e421db22..c66cff1023b7 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -69,7 +69,7 @@ export const CallProvider: FC = ({ children }) => { })); homeRoute.push({}); - const queueAggregator = result?.voipClient?.getAggregator(); + const queueAggregator = result.voipClient?.getAggregator(); if (queueAggregator) { queueAggregator.callEnded(); } From ac6385af513520d8909d4b7ba747ef8963cb318a Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 23 Jun 2022 12:52:08 -0300 Subject: [PATCH 4/9] fix infinite loop --- apps/meteor/client/contexts/CallContext.ts | 15 +- .../client/contexts/VoipAgentContext.ts | 23 +++ apps/meteor/client/lib/voip/VoIPUser.ts | 2 +- .../providers/CallProvider/CallProvider.tsx | 7 +- .../client/providers/VoipAgentProvider.tsx | 28 +++ .../components/OmnichannelCallToggleReady.tsx | 194 +++++++++--------- .../sidebar/sections/hooks/useVoipAgent.ts | 5 + 7 files changed, 160 insertions(+), 114 deletions(-) create mode 100644 apps/meteor/client/contexts/VoipAgentContext.ts create mode 100644 apps/meteor/client/providers/VoipAgentProvider.tsx create mode 100644 apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts diff --git a/apps/meteor/client/contexts/CallContext.ts b/apps/meteor/client/contexts/CallContext.ts index b28a325e97cf..884388fc6cba 100644 --- a/apps/meteor/client/contexts/CallContext.ts +++ b/apps/meteor/client/contexts/CallContext.ts @@ -62,16 +62,10 @@ export const useIsCallEnabled = (): boolean => { return enabled; }; -let callerInfo: VoIpCallerInfo; - export const useIsCallReady = (): boolean => { - const context = useContext(CallContext); - - if (isCallContextReady(context)) { - callerInfo = context.voipClient.callerInfo; - } + const { ready } = useContext(CallContext); - return !!context.ready; + return !!ready; }; export const useIsCallError = (): boolean => { @@ -79,6 +73,8 @@ export const useIsCallError = (): boolean => { return Boolean(isCallContextError(context)); }; +export const useCallContext = (): CallContextValue => useContext(CallContext); + export const useCallActions = (): CallActionsType => { const context = useContext(CallContext); @@ -106,7 +102,7 @@ export const useCallerInfo = (): VoIpCallerInfo => { [voipClient], ); - const getSnapshot = (): VoIpCallerInfo => callerInfo; + const getSnapshot = (): VoIpCallerInfo => voipClient.callerInfo; return useSyncExternalStore(subscribe, getSnapshot); }; @@ -147,6 +143,7 @@ export const useCallClient = (): VoIPUser => { if (!isCallContextReady(context)) { throw new Error('useClient only if Calls are enabled and ready'); } + return context.voipClient; }; diff --git a/apps/meteor/client/contexts/VoipAgentContext.ts b/apps/meteor/client/contexts/VoipAgentContext.ts new file mode 100644 index 000000000000..374c07d83e2d --- /dev/null +++ b/apps/meteor/client/contexts/VoipAgentContext.ts @@ -0,0 +1,23 @@ +import { createContext, Dispatch, SetStateAction } from 'react'; + +export type VoipAgentContextValue = { + agentEnabled: boolean; + registered: boolean; + networkStatus: 'online' | 'offline'; + voipButtonEnabled: boolean; + setAgentEnabled: Dispatch>; + setRegistered: Dispatch>; + setNetworkStatus: Dispatch>; + setVoipButtonEnabled: Dispatch>; +}; + +export const VoipAgentContext = createContext({ + agentEnabled: false, + registered: false, + networkStatus: 'offline', + voipButtonEnabled: false, + setAgentEnabled: () => undefined, + setRegistered: () => undefined, + setNetworkStatus: () => undefined, + setVoipButtonEnabled: () => undefined, +}); diff --git a/apps/meteor/client/lib/voip/VoIPUser.ts b/apps/meteor/client/lib/voip/VoIPUser.ts index b9e4a1850db9..7b5708b895aa 100644 --- a/apps/meteor/client/lib/voip/VoIPUser.ts +++ b/apps/meteor/client/lib/voip/VoIPUser.ts @@ -750,7 +750,7 @@ export class VoIPUser extends Emitter { return this.queueInfo; } - getRegistrarState(): string | undefined { + getRegisterState(): string | undefined { return this.registerer?.state.toString().toLocaleLowerCase(); } diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index c66cff1023b7..76bbd8c96c0e 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -24,6 +24,7 @@ import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal'; import { CallContext, CallContextValue } from '../../contexts/CallContext'; import { roomCoordinator } from '../../lib/rooms/roomCoordinator'; import { QueueAggregator } from '../../lib/voip/QueueAggregator'; +import VoipAgentProvider from '../VoipAgentProvider'; import { useVoipClient } from './hooks/useVoipClient'; const startRingback = (user: IUser): void => { @@ -342,8 +343,10 @@ export const CallProvider: FC = ({ children }) => { return ( - {children} - {contextValue.enabled && createPortal( ); }; diff --git a/apps/meteor/client/providers/VoipAgentProvider.tsx b/apps/meteor/client/providers/VoipAgentProvider.tsx new file mode 100644 index 000000000000..67cc816255b8 --- /dev/null +++ b/apps/meteor/client/providers/VoipAgentProvider.tsx @@ -0,0 +1,28 @@ +import React, { FC, useState } from 'react'; + +import { VoipAgentContext } from '../contexts/VoipAgentContext'; + +const VoipAgentProvider: FC = ({ children }) => { + const [agentEnabled, setAgentEnabled] = useState(false); + const [registered, setRegistered] = useState(false); + const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online'); + const [voipButtonEnabled, setVoipButtonEnabled] = useState(false); + + return ( + + ); +}; + +export default VoipAgentProvider; diff --git a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx index 97b75a42ccac..c9ad53b1f844 100644 --- a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx +++ b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx @@ -1,29 +1,106 @@ import { Sidebar } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import React, { ReactElement, useEffect, useState } from 'react'; +import React, { ReactElement, useCallback, useEffect, useMemo } from 'react'; -import { useCallClient, useCallerInfo, useCallActions } from '../../../contexts/CallContext'; +import { useCallActions, useCallClient } from '../../../contexts/CallContext'; +import { useVoipAgent } from '../hooks/useVoipAgent'; -type NetworkState = 'online' | 'offline'; export const OmnichannelCallToggleReady = (): ReactElement => { - const [agentEnabled, setAgentEnabled] = useState(false); // TODO: get from AgentInfo const t = useTranslation(); - const [registered, setRegistered] = useState(false); + + const { + agentEnabled, + networkStatus, + registered, + voipButtonEnabled, + setAgentEnabled, + setRegistered, + setNetworkStatus, + setVoipButtonEnabled, + } = useVoipAgent(); const voipClient = useCallClient(); - const [disableButtonClick, setDisableButtonClick] = useState(false); - const [networkStatus, setNetworkStatus] = useState('online'); - const callerInfo = useCallerInfo(); const callActions = useCallActions(); - const getTooltip = (): string => { + const registerState = useMemo(() => voipClient.getRegisterState(), [voipClient]); + + const toogleRegistered = useMutableCallback((): void => { + setRegistered(!registered); + }); + + const toogleRegistrationError = useCallback((): void => { + setRegistered(false); + setAgentEnabled(false); + }, [setAgentEnabled, setRegistered]); + + const onNetworkConnected = useCallback((): void => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + setNetworkStatus('online'); + }, [setNetworkStatus, setVoipButtonEnabled, voipClient.callerInfo.state]); + + const onNetworkDisconnected = useCallback((): void => { + setVoipButtonEnabled(true); + setNetworkStatus('offline'); + }, [setNetworkStatus, setVoipButtonEnabled]); + + const onClickVoipButton = useCallback((): void => { + if (voipButtonEnabled) { + return; + } + + setAgentEnabled(!agentEnabled); + + voipClient.callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); + }, [agentEnabled, callActions, setAgentEnabled, voipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + if (!agentEnabled) { + voipClient.register(); + } else { + voipClient.unregister(); + } + }, [agentEnabled, voipClient]); + + useEffect(() => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + }, [setVoipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + setRegistered(registerState === 'registered'); + }, [registerState, setRegistered]); + + useEffect(() => { + voipClient.on('registered', toogleRegistered); + voipClient.on('unregistered', toogleRegistered); + voipClient.on('registrationerror', toogleRegistrationError); + voipClient.on('unregistrationerror', toogleRegistrationError); + voipClient.onNetworkEvent('connected', onNetworkConnected); + voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); + + return (): void => { + voipClient.off('registered', toogleRegistered); + voipClient.off('unregistered', toogleRegistered); + voipClient.off('registrationerror', toogleRegistrationError); + voipClient.off('unregistrationerror', toogleRegistrationError); + voipClient.offNetworkEvent('connected', onNetworkConnected); + voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); + }; + }, [voipClient, onNetworkConnected, onNetworkDisconnected, toogleRegistered, toogleRegistrationError]); + + const getTitle = (): string => { if (networkStatus === 'offline') { return t('Signaling_connection_disconnected'); } - if (!registered) { + if (registered) { return t('Enable'); } - if (!disableButtonClick) { + if (!voipButtonEnabled) { // Color for this state still not defined return t('Disable'); } @@ -46,97 +123,10 @@ export const OmnichannelCallToggleReady = (): ReactElement => { }; const voipCallIcon = { - title: getTooltip(), - color: getColor(), + title: getTitle(), icon: getIcon(), - } as const; - - useEffect(() => { - // Any of the 2 states means the user is already talking - setDisableButtonClick(['IN_CALL', 'ON_HOLD'].includes(callerInfo.state)); - }, [callerInfo]); - - useEffect(() => { - let agentEnabled = false; - const state = voipClient.getRegistrarState(); - if (state === 'registered') { - agentEnabled = true; - } - setAgentEnabled(agentEnabled); - setRegistered(agentEnabled); - }, [voipClient]); - - // TODO: move registration flow to context provider - const handleVoipCallStatusChange = useMutableCallback((): void => { - if (disableButtonClick) { - return; - } - // TODO: backend set voip call status - // voipClient.setVoipCallStatus(!registered); - if (agentEnabled) { - callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); - setAgentEnabled(false); - voipClient.unregister(); - return; - } - setAgentEnabled(true); - voipClient.register(); - }); - - const onUnregistrationError = useMutableCallback((): void => { - setRegistered(false); - setAgentEnabled(false); - }); - - const onUnregistered = useMutableCallback((): void => { - setRegistered(!registered); - }); - - const onRegistrationError = useMutableCallback((): void => { - setRegistered(false); - setAgentEnabled(false); - }); - - const onRegistered = useMutableCallback((): void => { - setRegistered(!registered); - }); - - const onNetworkConnected = useMutableCallback((): void => { - setDisableButtonClick(['IN_CALL', 'ON_HOLD'].includes(callerInfo.state)); - setNetworkStatus('online'); - }); - - const onNetworkDisconnected = useMutableCallback((): void => { - setDisableButtonClick(true); - setNetworkStatus('offline'); - }); - - useEffect(() => { - if (!voipClient) { - return; - } - voipClient.on('registered', onRegistered); - voipClient.on('registrationerror', onRegistrationError); - voipClient.on('unregistered', onUnregistered); - voipClient.on('unregistrationerror', onUnregistrationError); - voipClient.onNetworkEvent('connected', onNetworkConnected); - voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); - - return (): void => { - voipClient.off('registered', onRegistered); - voipClient.off('registrationerror', onRegistrationError); - voipClient.off('unregistered', onUnregistered); - voipClient.off('unregistrationerror', onUnregistrationError); - voipClient.offNetworkEvent('connected', onNetworkConnected); - voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); - }; - }, [onRegistered, onRegistrationError, onUnregistered, onUnregistrationError, voipClient, onNetworkConnected, onNetworkDisconnected]); + color: getColor(), + }; - return ; + return ; }; diff --git a/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts b/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts new file mode 100644 index 000000000000..3715869b2e35 --- /dev/null +++ b/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { VoipAgentContext, VoipAgentContextValue } from '../../../contexts/VoipAgentContext'; + +export const useVoipAgent = (): VoipAgentContextValue => useContext(VoipAgentContext); From b8b025d482133160014eca4e3c945d42ce2faa4e Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 23 Jun 2022 13:32:27 -0300 Subject: [PATCH 5/9] fix --- apps/meteor/client/contexts/CallContext.ts | 19 +++++++++++++++---- .../client/sidebar/footer/voip/VoipFooter.tsx | 2 -- .../components/OmnichannelCallToggleReady.tsx | 8 +++++--- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/apps/meteor/client/contexts/CallContext.ts b/apps/meteor/client/contexts/CallContext.ts index 884388fc6cba..e721b244b7e4 100644 --- a/apps/meteor/client/contexts/CallContext.ts +++ b/apps/meteor/client/contexts/CallContext.ts @@ -1,6 +1,6 @@ import type { IVoipRoom } from '@rocket.chat/core-typings'; import { ICallerInfo, VoIpCallerInfo } from '@rocket.chat/core-typings'; -import { createContext, useCallback, useContext } from 'react'; +import { createContext, useCallback, useContext, useRef } from 'react'; import { useSyncExternalStore } from 'use-sync-external-store/shim'; import { VoIPUser } from '../lib/voip/VoIPUser'; @@ -90,19 +90,30 @@ export const useCallerInfo = (): VoIpCallerInfo => { if (!isCallContextReady(context)) { throw new Error('useCallerInfo only if Calls are enabled and ready'); } + const { voipClient } = context; + + const ref = useRef(voipClient.callerInfo); + const subscribe = useCallback( (callback: () => void): (() => void) => { - voipClient.on('stateChanged', callback); + ref.current = voipClient.callerInfo; + + const handleSubscribe = (): void => { + ref.current = voipClient.callerInfo; + callback(); + }; + + voipClient.on('stateChanged', handleSubscribe); return (): void => { - voipClient.off('stateChanged', callback); + voipClient.off('stateChanged', handleSubscribe); }; }, [voipClient], ); - const getSnapshot = (): VoIpCallerInfo => voipClient.callerInfo; + const getSnapshot = (): VoIpCallerInfo => ref.current; return useSyncExternalStore(subscribe, getSnapshot); }; diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx index 6f4ca4df40f9..98e2b9474534 100644 --- a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx +++ b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx @@ -130,7 +130,6 @@ export const VoipFooter = ({ small square danger - primary onClick={(e): unknown => { e.stopPropagation(); toggleMic(false); @@ -152,7 +151,6 @@ export const VoipFooter = ({ small square success - primary onClick={async (): Promise => { callActions.pickUp(); const rid = await createRoom(caller); diff --git a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx index c9ad53b1f844..4f28e126b42c 100644 --- a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx +++ b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx @@ -55,10 +55,12 @@ export const OmnichannelCallToggleReady = (): ReactElement => { useEffect(() => { if (!agentEnabled) { - voipClient.register(); - } else { - voipClient.unregister(); + return; } + + voipClient.register(); + + return (): void => voipClient.unregister(); }, [agentEnabled, voipClient]); useEffect(() => { From 47c9754cb1580862a8c63bca0a3bb4a2731ef6de Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 24 Jun 2022 12:22:30 -0300 Subject: [PATCH 6/9] Fix review --- .../client/contexts/VoipAgentContext.ts | 4 +- apps/meteor/client/lib/voip/VoIPUser.ts | 2 +- .../providers/CallProvider/CallProvider.tsx | 17 ++-- .../client/providers/MeteorProvider.tsx | 8 +- .../client/providers/VoipAgentProvider.tsx | 84 ++++++++++++++++-- .../components/OmnichannelCallToggleReady.tsx | 86 +------------------ 6 files changed, 102 insertions(+), 99 deletions(-) diff --git a/apps/meteor/client/contexts/VoipAgentContext.ts b/apps/meteor/client/contexts/VoipAgentContext.ts index 374c07d83e2d..ef27a32e09c3 100644 --- a/apps/meteor/client/contexts/VoipAgentContext.ts +++ b/apps/meteor/client/contexts/VoipAgentContext.ts @@ -1,6 +1,6 @@ import { createContext, Dispatch, SetStateAction } from 'react'; -export type VoipAgentContextValue = { +export type VoIPAgentContextValue = { agentEnabled: boolean; registered: boolean; networkStatus: 'online' | 'offline'; @@ -11,7 +11,7 @@ export type VoipAgentContextValue = { setVoipButtonEnabled: Dispatch>; }; -export const VoipAgentContext = createContext({ +export const VoIPAgentContext = createContext({ agentEnabled: false, registered: false, networkStatus: 'offline', diff --git a/apps/meteor/client/lib/voip/VoIPUser.ts b/apps/meteor/client/lib/voip/VoIPUser.ts index 7b5708b895aa..b9e4a1850db9 100644 --- a/apps/meteor/client/lib/voip/VoIPUser.ts +++ b/apps/meteor/client/lib/voip/VoIPUser.ts @@ -750,7 +750,7 @@ export class VoIPUser extends Emitter { return this.queueInfo; } - getRegisterState(): string | undefined { + getRegistrarState(): string | undefined { return this.registerer?.state.toString().toLocaleLowerCase(); } diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index 76bbd8c96c0e..daa1f9d496c5 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -24,7 +24,7 @@ import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal'; import { CallContext, CallContextValue } from '../../contexts/CallContext'; import { roomCoordinator } from '../../lib/rooms/roomCoordinator'; import { QueueAggregator } from '../../lib/voip/QueueAggregator'; -import VoipAgentProvider from '../VoipAgentProvider'; +import VoIPAgentProvider from '../VoIPAgentProvider'; import { useVoipClient } from './hooks/useVoipClient'; const startRingback = (user: IUser): void => { @@ -343,10 +343,17 @@ export const CallProvider: FC = ({ children }) => { return ( - - {children} - {contextValue.enabled && createPortal( + {voipEnabled ? ( + + {children} + {contextValue.enabled && createPortal( + ) : ( + <> + {children} + {contextValue.enabled && createPortal( ); }; diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx index ef0e5885cf7c..56273b2f854a 100644 --- a/apps/meteor/client/providers/MeteorProvider.tsx +++ b/apps/meteor/client/providers/MeteorProvider.tsx @@ -31,15 +31,15 @@ const MeteorProvider: FC = ({ children }) => ( - - + + {children} - - + + diff --git a/apps/meteor/client/providers/VoipAgentProvider.tsx b/apps/meteor/client/providers/VoipAgentProvider.tsx index 67cc816255b8..79f45cf32dfd 100644 --- a/apps/meteor/client/providers/VoipAgentProvider.tsx +++ b/apps/meteor/client/providers/VoipAgentProvider.tsx @@ -1,15 +1,89 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; -import { VoipAgentContext } from '../contexts/VoipAgentContext'; +import { useCallActions, useCallClient } from '../contexts/CallContext'; +import { VoIPAgentContext } from '../contexts/VoIPAgentContext'; -const VoipAgentProvider: FC = ({ children }) => { +const VoIPAgentProvider: FC = ({ children }) => { const [agentEnabled, setAgentEnabled] = useState(false); const [registered, setRegistered] = useState(false); const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online'); const [voipButtonEnabled, setVoipButtonEnabled] = useState(false); + const callActions = useCallActions(); + + const voipClient = useCallClient(); + const registerState = useMemo(() => voipClient.getRegistrarState(), [voipClient]); + + const toggleRegistered = useCallback((): void => { + setRegistered((registered) => !registered); + }, []); + + const toggleRegistrationError = useCallback((): void => { + setRegistered(false); + setAgentEnabled(false); + }, []); + + const onNetworkConnected = useCallback((): void => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + setNetworkStatus('online'); + }, [setNetworkStatus, setVoipButtonEnabled, voipClient.callerInfo.state]); + + const onNetworkDisconnected = useCallback((): void => { + setVoipButtonEnabled(true); + setNetworkStatus('offline'); + }, [setNetworkStatus, setVoipButtonEnabled]); + + useEffect(() => { + if (!agentEnabled) { + return; + } + + voipClient.register(); + + return (): void => voipClient.unregister(); + }, [agentEnabled, voipClient]); + + useEffect(() => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + }, [setVoipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + setRegistered(registerState === 'registered'); + }, [registerState]); + + useEffect(() => { + if (voipButtonEnabled) { + return; + } + + voipClient.callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); + }, [callActions, voipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + voipClient.on('registered', toggleRegistered); + voipClient.on('unregistered', toggleRegistered); + voipClient.on('registrationerror', toggleRegistrationError); + voipClient.on('unregistrationerror', toggleRegistrationError); + voipClient.onNetworkEvent('connected', onNetworkConnected); + voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); + + return (): void => { + voipClient.off('registered', toggleRegistered); + voipClient.off('unregistered', toggleRegistered); + voipClient.off('registrationerror', toggleRegistrationError); + voipClient.off('unregistrationerror', toggleRegistrationError); + voipClient.offNetworkEvent('connected', onNetworkConnected); + voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); + }; + }, [voipClient, onNetworkConnected, onNetworkDisconnected, toggleRegistered, toggleRegistrationError]); return ( - { ); }; -export default VoipAgentProvider; +export default VoIPAgentProvider; diff --git a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx index 4f28e126b42c..08b917ea58e2 100644 --- a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx +++ b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx @@ -1,99 +1,21 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import React, { ReactElement, useCallback, useEffect, useMemo } from 'react'; +import React, { ReactElement, useCallback } from 'react'; -import { useCallActions, useCallClient } from '../../../contexts/CallContext'; +// import { useCallActions, useCallClient } from '../../../contexts/CallContext'; import { useVoipAgent } from '../hooks/useVoipAgent'; export const OmnichannelCallToggleReady = (): ReactElement => { const t = useTranslation(); - const { - agentEnabled, - networkStatus, - registered, - voipButtonEnabled, - setAgentEnabled, - setRegistered, - setNetworkStatus, - setVoipButtonEnabled, - } = useVoipAgent(); - const voipClient = useCallClient(); - const callActions = useCallActions(); - - const registerState = useMemo(() => voipClient.getRegisterState(), [voipClient]); - - const toogleRegistered = useMutableCallback((): void => { - setRegistered(!registered); - }); - - const toogleRegistrationError = useCallback((): void => { - setRegistered(false); - setAgentEnabled(false); - }, [setAgentEnabled, setRegistered]); - - const onNetworkConnected = useCallback((): void => { - setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); - setNetworkStatus('online'); - }, [setNetworkStatus, setVoipButtonEnabled, voipClient.callerInfo.state]); - - const onNetworkDisconnected = useCallback((): void => { - setVoipButtonEnabled(true); - setNetworkStatus('offline'); - }, [setNetworkStatus, setVoipButtonEnabled]); - + const { agentEnabled, networkStatus, registered, voipButtonEnabled, setAgentEnabled } = useVoipAgent(); const onClickVoipButton = useCallback((): void => { if (voipButtonEnabled) { return; } setAgentEnabled(!agentEnabled); - - voipClient.callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); - }, [agentEnabled, callActions, setAgentEnabled, voipButtonEnabled, voipClient.callerInfo.state]); - - useEffect(() => { - if (!agentEnabled) { - return; - } - - voipClient.register(); - - return (): void => voipClient.unregister(); - }, [agentEnabled, voipClient]); - - useEffect(() => { - setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); - }, [setVoipButtonEnabled, voipClient.callerInfo.state]); - - useEffect(() => { - setRegistered(registerState === 'registered'); - }, [registerState, setRegistered]); - - useEffect(() => { - voipClient.on('registered', toogleRegistered); - voipClient.on('unregistered', toogleRegistered); - voipClient.on('registrationerror', toogleRegistrationError); - voipClient.on('unregistrationerror', toogleRegistrationError); - voipClient.onNetworkEvent('connected', onNetworkConnected); - voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); - - return (): void => { - voipClient.off('registered', toogleRegistered); - voipClient.off('unregistered', toogleRegistered); - voipClient.off('registrationerror', toogleRegistrationError); - voipClient.off('unregistrationerror', toogleRegistrationError); - voipClient.offNetworkEvent('connected', onNetworkConnected); - voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); - }; - }, [voipClient, onNetworkConnected, onNetworkDisconnected, toogleRegistered, toogleRegistrationError]); + }, [agentEnabled, setAgentEnabled, voipButtonEnabled]); const getTitle = (): string => { if (networkStatus === 'offline') { From 7a22f711f21c8576b4d0740cf7c50eaf3d76f9b7 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 24 Jun 2022 12:22:30 -0300 Subject: [PATCH 7/9] Fix review --- ...oipAgentContext.ts => VoIPAgentContext.ts} | 4 +- apps/meteor/client/lib/voip/VoIPUser.ts | 2 +- .../providers/CallProvider/CallProvider.tsx | 17 ++- .../client/providers/MeteorProvider.tsx | 8 +- .../client/providers/VoIPAgentProvider.tsx | 102 ++++++++++++++++++ .../client/providers/VoipAgentProvider.tsx | 28 ----- .../components/OmnichannelCallToggleReady.tsx | 86 +-------------- .../sidebar/sections/hooks/useVoipAgent.ts | 4 +- 8 files changed, 127 insertions(+), 124 deletions(-) rename apps/meteor/client/contexts/{VoipAgentContext.ts => VoIPAgentContext.ts} (86%) create mode 100644 apps/meteor/client/providers/VoIPAgentProvider.tsx delete mode 100644 apps/meteor/client/providers/VoipAgentProvider.tsx diff --git a/apps/meteor/client/contexts/VoipAgentContext.ts b/apps/meteor/client/contexts/VoIPAgentContext.ts similarity index 86% rename from apps/meteor/client/contexts/VoipAgentContext.ts rename to apps/meteor/client/contexts/VoIPAgentContext.ts index 374c07d83e2d..ef27a32e09c3 100644 --- a/apps/meteor/client/contexts/VoipAgentContext.ts +++ b/apps/meteor/client/contexts/VoIPAgentContext.ts @@ -1,6 +1,6 @@ import { createContext, Dispatch, SetStateAction } from 'react'; -export type VoipAgentContextValue = { +export type VoIPAgentContextValue = { agentEnabled: boolean; registered: boolean; networkStatus: 'online' | 'offline'; @@ -11,7 +11,7 @@ export type VoipAgentContextValue = { setVoipButtonEnabled: Dispatch>; }; -export const VoipAgentContext = createContext({ +export const VoIPAgentContext = createContext({ agentEnabled: false, registered: false, networkStatus: 'offline', diff --git a/apps/meteor/client/lib/voip/VoIPUser.ts b/apps/meteor/client/lib/voip/VoIPUser.ts index 7b5708b895aa..b9e4a1850db9 100644 --- a/apps/meteor/client/lib/voip/VoIPUser.ts +++ b/apps/meteor/client/lib/voip/VoIPUser.ts @@ -750,7 +750,7 @@ export class VoIPUser extends Emitter { return this.queueInfo; } - getRegisterState(): string | undefined { + getRegistrarState(): string | undefined { return this.registerer?.state.toString().toLocaleLowerCase(); } diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index 76bbd8c96c0e..daa1f9d496c5 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -24,7 +24,7 @@ import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal'; import { CallContext, CallContextValue } from '../../contexts/CallContext'; import { roomCoordinator } from '../../lib/rooms/roomCoordinator'; import { QueueAggregator } from '../../lib/voip/QueueAggregator'; -import VoipAgentProvider from '../VoipAgentProvider'; +import VoIPAgentProvider from '../VoIPAgentProvider'; import { useVoipClient } from './hooks/useVoipClient'; const startRingback = (user: IUser): void => { @@ -343,10 +343,17 @@ export const CallProvider: FC = ({ children }) => { return ( - - {children} - {contextValue.enabled && createPortal( + {voipEnabled ? ( + + {children} + {contextValue.enabled && createPortal( + ) : ( + <> + {children} + {contextValue.enabled && createPortal( ); }; diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx index ef0e5885cf7c..56273b2f854a 100644 --- a/apps/meteor/client/providers/MeteorProvider.tsx +++ b/apps/meteor/client/providers/MeteorProvider.tsx @@ -31,15 +31,15 @@ const MeteorProvider: FC = ({ children }) => ( - - + + {children} - - + + diff --git a/apps/meteor/client/providers/VoIPAgentProvider.tsx b/apps/meteor/client/providers/VoIPAgentProvider.tsx new file mode 100644 index 000000000000..79f45cf32dfd --- /dev/null +++ b/apps/meteor/client/providers/VoIPAgentProvider.tsx @@ -0,0 +1,102 @@ +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; + +import { useCallActions, useCallClient } from '../contexts/CallContext'; +import { VoIPAgentContext } from '../contexts/VoIPAgentContext'; + +const VoIPAgentProvider: FC = ({ children }) => { + const [agentEnabled, setAgentEnabled] = useState(false); + const [registered, setRegistered] = useState(false); + const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online'); + const [voipButtonEnabled, setVoipButtonEnabled] = useState(false); + const callActions = useCallActions(); + + const voipClient = useCallClient(); + const registerState = useMemo(() => voipClient.getRegistrarState(), [voipClient]); + + const toggleRegistered = useCallback((): void => { + setRegistered((registered) => !registered); + }, []); + + const toggleRegistrationError = useCallback((): void => { + setRegistered(false); + setAgentEnabled(false); + }, []); + + const onNetworkConnected = useCallback((): void => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + setNetworkStatus('online'); + }, [setNetworkStatus, setVoipButtonEnabled, voipClient.callerInfo.state]); + + const onNetworkDisconnected = useCallback((): void => { + setVoipButtonEnabled(true); + setNetworkStatus('offline'); + }, [setNetworkStatus, setVoipButtonEnabled]); + + useEffect(() => { + if (!agentEnabled) { + return; + } + + voipClient.register(); + + return (): void => voipClient.unregister(); + }, [agentEnabled, voipClient]); + + useEffect(() => { + setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); + }, [setVoipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + setRegistered(registerState === 'registered'); + }, [registerState]); + + useEffect(() => { + if (voipButtonEnabled) { + return; + } + + voipClient.callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); + }, [callActions, voipButtonEnabled, voipClient.callerInfo.state]); + + useEffect(() => { + voipClient.on('registered', toggleRegistered); + voipClient.on('unregistered', toggleRegistered); + voipClient.on('registrationerror', toggleRegistrationError); + voipClient.on('unregistrationerror', toggleRegistrationError); + voipClient.onNetworkEvent('connected', onNetworkConnected); + voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); + + return (): void => { + voipClient.off('registered', toggleRegistered); + voipClient.off('unregistered', toggleRegistered); + voipClient.off('registrationerror', toggleRegistrationError); + voipClient.off('unregistrationerror', toggleRegistrationError); + voipClient.offNetworkEvent('connected', onNetworkConnected); + voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); + voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); + voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); + voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); + }; + }, [voipClient, onNetworkConnected, onNetworkDisconnected, toggleRegistered, toggleRegistrationError]); + + return ( + + ); +}; + +export default VoIPAgentProvider; diff --git a/apps/meteor/client/providers/VoipAgentProvider.tsx b/apps/meteor/client/providers/VoipAgentProvider.tsx deleted file mode 100644 index 67cc816255b8..000000000000 --- a/apps/meteor/client/providers/VoipAgentProvider.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { FC, useState } from 'react'; - -import { VoipAgentContext } from '../contexts/VoipAgentContext'; - -const VoipAgentProvider: FC = ({ children }) => { - const [agentEnabled, setAgentEnabled] = useState(false); - const [registered, setRegistered] = useState(false); - const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online'); - const [voipButtonEnabled, setVoipButtonEnabled] = useState(false); - - return ( - - ); -}; - -export default VoipAgentProvider; diff --git a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx index 4f28e126b42c..08b917ea58e2 100644 --- a/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx +++ b/apps/meteor/client/sidebar/sections/components/OmnichannelCallToggleReady.tsx @@ -1,99 +1,21 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import React, { ReactElement, useCallback, useEffect, useMemo } from 'react'; +import React, { ReactElement, useCallback } from 'react'; -import { useCallActions, useCallClient } from '../../../contexts/CallContext'; +// import { useCallActions, useCallClient } from '../../../contexts/CallContext'; import { useVoipAgent } from '../hooks/useVoipAgent'; export const OmnichannelCallToggleReady = (): ReactElement => { const t = useTranslation(); - const { - agentEnabled, - networkStatus, - registered, - voipButtonEnabled, - setAgentEnabled, - setRegistered, - setNetworkStatus, - setVoipButtonEnabled, - } = useVoipAgent(); - const voipClient = useCallClient(); - const callActions = useCallActions(); - - const registerState = useMemo(() => voipClient.getRegisterState(), [voipClient]); - - const toogleRegistered = useMutableCallback((): void => { - setRegistered(!registered); - }); - - const toogleRegistrationError = useCallback((): void => { - setRegistered(false); - setAgentEnabled(false); - }, [setAgentEnabled, setRegistered]); - - const onNetworkConnected = useCallback((): void => { - setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); - setNetworkStatus('online'); - }, [setNetworkStatus, setVoipButtonEnabled, voipClient.callerInfo.state]); - - const onNetworkDisconnected = useCallback((): void => { - setVoipButtonEnabled(true); - setNetworkStatus('offline'); - }, [setNetworkStatus, setVoipButtonEnabled]); - + const { agentEnabled, networkStatus, registered, voipButtonEnabled, setAgentEnabled } = useVoipAgent(); const onClickVoipButton = useCallback((): void => { if (voipButtonEnabled) { return; } setAgentEnabled(!agentEnabled); - - voipClient.callerInfo.state === 'OFFER_RECEIVED' && callActions.reject(); - }, [agentEnabled, callActions, setAgentEnabled, voipButtonEnabled, voipClient.callerInfo.state]); - - useEffect(() => { - if (!agentEnabled) { - return; - } - - voipClient.register(); - - return (): void => voipClient.unregister(); - }, [agentEnabled, voipClient]); - - useEffect(() => { - setVoipButtonEnabled(['IN_CALL', 'ON_HOLD'].includes(voipClient.callerInfo.state)); - }, [setVoipButtonEnabled, voipClient.callerInfo.state]); - - useEffect(() => { - setRegistered(registerState === 'registered'); - }, [registerState, setRegistered]); - - useEffect(() => { - voipClient.on('registered', toogleRegistered); - voipClient.on('unregistered', toogleRegistered); - voipClient.on('registrationerror', toogleRegistrationError); - voipClient.on('unregistrationerror', toogleRegistrationError); - voipClient.onNetworkEvent('connected', onNetworkConnected); - voipClient.onNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.onNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.onNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.onNetworkEvent('localnetworkoffline', onNetworkDisconnected); - - return (): void => { - voipClient.off('registered', toogleRegistered); - voipClient.off('unregistered', toogleRegistered); - voipClient.off('registrationerror', toogleRegistrationError); - voipClient.off('unregistrationerror', toogleRegistrationError); - voipClient.offNetworkEvent('connected', onNetworkConnected); - voipClient.offNetworkEvent('disconnected', onNetworkDisconnected); - voipClient.offNetworkEvent('connectionerror', onNetworkDisconnected); - voipClient.offNetworkEvent('localnetworkonline', onNetworkConnected); - voipClient.offNetworkEvent('localnetworkoffline', onNetworkDisconnected); - }; - }, [voipClient, onNetworkConnected, onNetworkDisconnected, toogleRegistered, toogleRegistrationError]); + }, [agentEnabled, setAgentEnabled, voipButtonEnabled]); const getTitle = (): string => { if (networkStatus === 'offline') { diff --git a/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts b/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts index 3715869b2e35..c61b65bc237e 100644 --- a/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts +++ b/apps/meteor/client/sidebar/sections/hooks/useVoipAgent.ts @@ -1,5 +1,5 @@ import { useContext } from 'react'; -import { VoipAgentContext, VoipAgentContextValue } from '../../../contexts/VoipAgentContext'; +import { VoIPAgentContext, VoIPAgentContextValue } from '../../../contexts/VoIPAgentContext'; -export const useVoipAgent = (): VoipAgentContextValue => useContext(VoipAgentContext); +export const useVoipAgent = (): VoIPAgentContextValue => useContext(VoIPAgentContext); From fa1114e0d744c0e39357969f862c85474418bbb7 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Fri, 24 Jun 2022 15:56:44 -0300 Subject: [PATCH 8/9] fix --- apps/meteor/client/providers/CallProvider/CallProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index daa1f9d496c5..72756543a250 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -343,7 +343,7 @@ export const CallProvider: FC = ({ children }) => { return ( - {voipEnabled ? ( + {contextValue.ready ? ( {children} {contextValue.enabled && createPortal(