-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
115 lines (102 loc) · 3.41 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import {Image, Text, TouchableOpacity, View} from 'react-native';
import React, {useCallback, useEffect, useState} from 'react';
import {contacts, log, reOpenApp} from '../../utils';
import {Contact, FirebaseSnapshot, Meeting} from '../../types/general';
import {ContactListScreenProps} from '../../types/navigation';
import messaging, {
FirebaseMessagingTypes,
} from '@react-native-firebase/messaging';
import RNCallKeep from 'react-native-callkeep';
import {useGlobalStore} from '../../store';
import 'react-native-get-random-values';
import {v4 as uuidv4} from 'uuid';
import {callerSetupOptions} from '../JoinCall/Callkeep';
export default function ContactList({navigation}: ContactListScreenProps) {
const username = useGlobalStore(state => state._username);
const [details, setDetails] = useState<{
meeting: Meeting;
caller: Contact;
} | null>(null);
function initiateCall(contact: Contact) {
console.log(contact);
navigation.push('join-call', {contact});
}
const onPayload = useCallback(
(remoteMessage: FirebaseMessagingTypes.RemoteMessage) => {
if (!remoteMessage.data) {
console.log('empty data');
return;
}
const payload = JSON.parse(
remoteMessage.data.payload,
) as FirebaseSnapshot;
const {meeting, contact, caller} = payload;
log('payload: ', payload);
if (contact.username === username) {
console.log(username);
setDetails({meeting, caller});
RNCallKeep.displayIncomingCall(uuidv4(), caller.username, caller.name);
} else {
console.log('BAD USERNAME');
}
},
[username],
);
useEffect(() => {
return messaging().onMessage(onPayload);
}, [onPayload]);
useEffect(() => {
return messaging().setBackgroundMessageHandler(async remoteMessage => {
onPayload(remoteMessage);
return Promise.resolve();
});
}, [onPayload]);
function onEndCallAction(data: {callUUID: string}) {
const {callUUID} = data;
RNCallKeep.endCall(callUUID);
}
useEffect(() => {
function onAnswerCallAction(data: {callUUID: string}) {
const {callUUID} = data;
RNCallKeep.endCall(callUUID);
reOpenApp();
if (details) {
log('details', details);
navigation.push('join-call', {
contact: {name: '', username: '', icon: ''},
caller: details.caller,
activeMeeting: details.meeting,
});
} else {
console.log('DETAILS NULL');
}
}
try {
RNCallKeep.setup(callerSetupOptions);
RNCallKeep.setAvailable(true);
RNCallKeep.addEventListener('answerCall', onAnswerCallAction);
RNCallKeep.addEventListener('endCall', onEndCallAction);
} catch (err) {
log('initializeCallKeep error:', err);
}
}, [details, navigation]);
return (
<View className="p-4 pt-8 bg-white min-h-screen">
<Text className="text-black text-4xl font-bold mb-4">My Contacts</Text>
<View>
{contacts.map(contact => (
<TouchableOpacity
key={contact.username}
onPress={() => initiateCall(contact)}
className="flex flex-row justify-start items-center gap-x-4 my-2">
<Image
source={{uri: contact.icon}}
className="w-16 h-16 rounded-full"
/>
<Text className="text-black text-xl">{contact.name}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
}