refactor(voip): decouple peer autocomplete from Redux; simplify NewMediaCall

app/containers/NewMediaCall/FilterHeader.test.tsx

@@ -37,15 +37,11 @@ describe('FilterHeader', () => {
 	});
 
 	it('should update filter, clear selection and fetch options after debounce', () => {
-		const setFilter = jest.fn();
-		const clearSelection = jest.fn();
 		const fetchOptions = jest.fn();
 		usePeerAutocompleteStore.setState({
 			filter: '',
 			selectedPeer: null,
 			options: [],
-			setFilter,
-			clearSelection,
 			fetchOptions
 		});
 
@@ -57,15 +53,21 @@ describe('FilterHeader', () => {
 
 		fireEvent.changeText(getByTestId('new-media-call-search-input'), 'alice');
 
-		expect(setFilter).toHaveBeenCalledWith('alice');
-		expect(clearSelection).toHaveBeenCalledTimes(1);
+		expect(usePeerAutocompleteStore.getState().filter).toBe('alice');
+		expect(usePeerAutocompleteStore.getState().selectedPeer).toBeNull();
 		expect(fetchOptions).not.toHaveBeenCalled();
 
 		act(() => {
 			jest.advanceTimersByTime(textInputDebounceTime);
 		});
 
-		expect(fetchOptions).toHaveBeenCalledWith('alice');
+		expect(fetchOptions).toHaveBeenCalledTimes(1);
+		expect(fetchOptions.mock.calls[0][0]).toBe('alice');
+		expect(fetchOptions.mock.calls[0][1]).toEqual(
+			expect.objectContaining({
+				sipEnabled: expect.any(Boolean)
+			})
+		);
 	});
 });
 

app/containers/NewMediaCall/FilterHeader.tsx

@@ -1,29 +1,40 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { FormTextInput } from '../TextInput';
 import sharedStyles from '../../views/Styles';
 import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
 import { useDebounce } from '../../lib/methods/helpers';
+import type { IApplicationState } from '../../definitions';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
+const selectSipEnabled = (state: IApplicationState) => Boolean(state.settings.VoIP_TeamCollab_SIP_Integration_For_Internal_Calls);
+
+const selectUsername = (state: IApplicationState) => state.login.user?.username;
+
 export const FilterHeader = (): React.ReactElement => {
 	const { colors } = useTheme();
 
 	const filter = usePeerAutocompleteStore(state => state.filter);
-	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
-	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
-	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
 
-	const debouncedFetchOptions = useDebounce((value: string) => {
-		fetchOptions(value);
-	}, textInputDebounceTime);
+	const username = useSelector(selectUsername);
+	const sipEnabled = useSelector(selectSipEnabled);
+
+	const debouncedFetchOptions = useDebounce(
+		useCallback(
+			(value: string) => {
+				usePeerAutocompleteStore.getState().fetchOptions(value, { username, sipEnabled });
+			},
+			[username, sipEnabled]
+		),
+		textInputDebounceTime
+	);
 
 	const handleChangeText = (value: string) => {
-		setFilter(value);
-		clearSelection();
+		usePeerAutocompleteStore.getState().setFilter(value);
 		debouncedFetchOptions(value);
 	};
 

app/containers/NewMediaCall/NewMediaCall.tsx

@@ -1,23 +1,32 @@
 import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { PeerList } from './PeerList';
 import { SelectedPeer } from './SelectedPeer';
-import { Container } from './Container';
 import { CreateCall } from './CreateCall';
 import { FilterHeader } from './FilterHeader';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { useTheme } from '../../theme';
 
 export const NewMediaCall = (): React.ReactElement => {
-	// reset the store when the action sheet is closed
+	const { colors } = useTheme();
 	const reset = usePeerAutocompleteStore(state => state.reset);
 	useEffect(() => () => reset(), [reset]);
 
 	return (
-		<Container>
+		<View style={[styles.screen, { backgroundColor: colors.surfaceLight }]}>
 			<FilterHeader />
 			<SelectedPeer />
 			<PeerList />
 			<CreateCall />
-		</Container>
+		</View>
 	);
 };
+
+const styles = StyleSheet.create({
+	screen: {
+		flex: 1,
+		paddingHorizontal: 16,
+		paddingTop: 16
+	}
+});

app/containers/NewMediaCall/PeerList.tsx

@@ -13,18 +13,7 @@ export const PeerList = () => {
 	if (selectedPeer) return null;
 
 	const handleSelectOption = (option: TPeerItem) => {
-		const peerItem: TPeerItem =
-			option.type === 'sip'
-				? { type: 'sip', value: option.value, label: option.label }
-				: {
-						type: 'user',
-						value: option.value,
-						label: option.label,
-						username: option.username,
-						callerId: option.callerId
-				  };
-
-		setSelectedPeer(peerItem);
+		setSelectedPeer(option);
 	};
 
 	const renderItem = ({ item }: { item: TPeerItem }) => <PeerItem item={item} onSelectOption={handleSelectOption} />;
@@ -33,7 +22,7 @@ export const PeerList = () => {
 		<FlatList
 			data={options}
 			contentContainerStyle={{ flexShrink: 1 }}
-			keyExtractor={item => item.value}
+			keyExtractor={item => `${item.type}:${item.value}`}
 			keyboardShouldPersistTaps='always'
 			renderItem={renderItem}
 			ItemSeparatorComponent={List.Separator}

app/containers/NewMediaCall/SelectedPeer.test.tsx

@@ -69,9 +69,8 @@ describe('SelectedPeer', () => {
 		expect(getByText('+55 11 99999-9999')).toBeTruthy();
 	});
 
-	it('should call clearSelection when clear button is pressed', () => {
-		const clearSelection = jest.fn();
-		usePeerAutocompleteStore.setState({ selectedPeer: userPeer, clearSelection });
+	it('should clear selected peer when clear button is pressed', () => {
+		usePeerAutocompleteStore.setState({ selectedPeer: userPeer });
 
 		const { getByTestId } = render(
 			<Wrapper>
@@ -80,7 +79,7 @@ describe('SelectedPeer', () => {
 		);
 
 		fireEvent.press(getByTestId('new-media-call-clear-selected-peer'));
-		expect(clearSelection).toHaveBeenCalledTimes(1);
+		expect(usePeerAutocompleteStore.getState().selectedPeer).toBeNull();
 	});
 });
 

app/containers/NewMediaCall/SelectedPeer.tsx

@@ -15,7 +15,7 @@ export const SelectedPeer = () => {
 
 export const SelectedPeerInner = ({ selectedPeer }: { selectedPeer: TPeerItem | null }) => {
 	const { colors } = useTheme();
-	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
+	const setSelectedPeer = usePeerAutocompleteStore(state => state.setSelectedPeer);
 
 	if (!selectedPeer) return null;
 
@@ -24,7 +24,7 @@ export const SelectedPeerInner = ({ selectedPeer }: { selectedPeer: TPeerItem |
 			<View style={[styles.selectedTag, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
 				<PeerItemInner item={selectedPeer} />
 				<BorderlessButton
-					onPress={clearSelection}
+					onPress={() => setSelectedPeer(null)}
 					testID='new-media-call-clear-selected-peer'
 					rippleColor={colors.buttonBackgroundSecondaryPress}
 					foreground

app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap

@@ -201,19 +201,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [
@@ -386,19 +374,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [
@@ -633,19 +609,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [
@@ -893,19 +857,7 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [
@@ -1091,19 +1043,7 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [
@@ -1351,19 +1291,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         onActiveStateChange={[Function]}
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
-        onPress={
-          [MockFunction] {
-            "calls": [
-              [],
-            ],
-            "results": [
-              {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
+        onPress={[Function]}
         rippleColor="#9EA2A8"
         style={
           [

app/lib/services/voip/MediaSessionInstance.ts

@@ -236,7 +236,6 @@ class MediaSessionInstance {
 			const currentIceServers = this.getIceServers();
 			if (currentIceServers !== this.iceServers) {
 				this.iceServers = currentIceServers;
-				// this.instance?.setIceServers(this.iceServers);
 			}
 		});
 	}