suggestion

RocketChat · Jul 6, 2022 · b2bfff0 · b2bfff0
1 parent 8357794
commit b2bfff0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx
@@ -1,3 +1,4 @@
+import { VoIpCallerInfo } from '@rocket.chat/core-typings';
 import { Box, Icon } from '@rocket.chat/fuselage';
 import { ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
@@ -62,27 +63,30 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 	const [muted, toggleMic] = useState(false);
 	const [paused, togglePause] = useState(false);
 
-	const getSubtitle = () => {
-		switch (args.callerState) {
-			case 'IN_CALL':
-				return 'In Progress';
-			case 'OFFER_RECEIVED':
-				return 'Ringing';
-			case 'OFFER_SENT':
-				return 'Calling';
-			case 'ON_HOLD':
-				return 'On Hold';
-		}
+	const getSubtitle = (state: VoIpCallerInfo['state']): string => {
+		const subtitles = {
+			INITIAL: '',
+			REGISTERED: '',
+			IDLE: '',
+			ANSWER_SENT: '',
+			ANSWER_RECEIVED: '',
+			UNREGISTERED: '',
+			ERROR: '',
+			IN_CALL: 'In Progress',
+			OFFER_RECEIVED: 'Ringing',
+			OFFER_SENT: 'Calling',
+			ON_HOLD: 'On Hold',
+		};
 
-		return '';
+		return subtitles[state];
 	};
 
 	return (
 		<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
 			<VoipFooter
 				{...args}
 				callActions={callActions}
-				subtitle={getSubtitle()}
+				subtitle={getSubtitle(args.callerState)}
 				muted={muted}
 				paused={paused}
 				toggleMic={toggleMic}

diff --git a/apps/meteor/client/sidebar/footer/voip/index.tsx b/apps/meteor/client/sidebar/footer/voip/index.tsx
@@ -50,20 +50,13 @@ export const VoipFooter = (): ReactElement | null => {
 		[callActions],
 	);
 
-	const getSubtitle = (): string => {
-		switch (callerInfo.state) {
-			case 'IN_CALL':
-				return t('In_progress');
-			case 'OFFER_RECEIVED':
-				return t('Ringing');
-			case 'OFFER_SENT':
-				return t('Calling');
-			case 'ON_HOLD':
-				return t('On_Hold');
-		}
-
-		return '';
-	};
+	const getSubtitle = (state: 'IN_CALL' | 'OFFER_RECEIVED' | 'OFFER_SENT' | 'ON_HOLD'): string =>
+		({
+			IN_CALL: t('In_progress'),
+			OFFER_RECEIVED: t('Ringing'),
+			OFFER_SENT: t('Calling'),
+			ON_HOLD: t('On_Hold'),
+		}[state]);
 
 	const tooltips = {
 		mute: t('Mute'),
@@ -95,7 +88,7 @@ export const VoipFooter = (): ReactElement | null => {
 			callerState={callerInfo.state}
 			callActions={callActions}
 			title={queueName || t('Phone_call')}
-			subtitle={getSubtitle()}
+			subtitle={getSubtitle(callerInfo.state)}
 			muted={muted}
 			paused={paused}
 			toggleMic={toggleMic}

diff --git a/packages/core-typings/src/voip/VoIpCallerInfo.ts b/packages/core-typings/src/voip/VoIpCallerInfo.ts
@@ -9,11 +9,11 @@ export interface IState {
 
 export type VoIpCallerInfo =
 	| {
-			state: Exclude<CallStates, 'IN_CALL' | 'OFFER_RECEIVED' | 'ON_HOLD'>;
+			state: Exclude<CallStates, 'IN_CALL' | 'OFFER_RECEIVED' | 'ON_HOLD' | 'OFFER_SENT'>;
 			userState: UserState;
 	  }
 	| {
-			state: 'IN_CALL' | 'ON_HOLD' | 'OFFER_RECEIVED';
+			state: 'IN_CALL' | 'ON_HOLD' | 'OFFER_RECEIVED' | 'OFFER_SENT';
 			userState: UserState;
 			caller: ICallerInfo;
 	  }; // TODO: Check for additional properties and States (E.g. call on hold, muted, etc)