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
|
import {useNavigation} from '@react-navigation/native';
import React, {useContext, useEffect, useState} from 'react';
import {Alert, StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {ChatContext} from '../../App';
import {Avatar} from '../../components';
import {ERROR_FAILED_TO_CREATE_CHANNEL} from '../../constants/strings';
import {loadImageFromURL} from '../../services';
import {ProfilePreviewType, UserType} from '../../types';
import {createChannel, normalize, SCREEN_WIDTH} from '../../utils';
interface ChatResults {
profileData: ProfilePreviewType;
loggedInUser: UserType;
setChatModalVisible: (open: boolean) => void;
}
const ChatResultsCell: React.FC<ChatResults> = ({
profileData: {id, username, first_name, last_name, thumbnail_url},
loggedInUser,
setChatModalVisible,
}) => {
const [avatar, setAvatar] = useState<string | undefined>(undefined);
const {chatClient, setChannel} = useContext(ChatContext);
useEffect(() => {
(async () => {
if (thumbnail_url !== undefined) {
try {
const response = await loadImageFromURL(thumbnail_url);
if (response) {
setAvatar(response);
}
} catch (error) {
console.log('Error while downloading ', error);
throw error;
}
}
})();
}, [thumbnail_url]);
const navigation = useNavigation();
const createChannelIfNotPresentAndNavigate = async () => {
try {
setChatModalVisible(false);
const channel = await createChannel(loggedInUser.userId, id, chatClient);
setChannel(channel);
setTimeout(() => {
navigation.navigate('Chat');
}, 250);
} catch (error) {
Alert.alert(ERROR_FAILED_TO_CREATE_CHANNEL);
}
};
const userCell = () => {
return (
<TouchableOpacity
onPress={createChannelIfNotPresentAndNavigate}
style={styles.cellContainer}>
<Avatar style={styles.imageContainer} uri={avatar} />
<View style={[styles.initialTextContainer, styles.multiText]}>
<Text style={styles.initialTextStyle}>{`@${username}`}</Text>
<Text style={styles.secondaryTextStyle}>
{first_name + ' ' + last_name}
</Text>
</View>
</TouchableOpacity>
);
};
return userCell();
};
const styles = StyleSheet.create({
cellContainer: {
flexDirection: 'row',
paddingHorizontal: 25,
paddingVertical: 15,
width: SCREEN_WIDTH,
},
imageContainer: {
width: SCREEN_WIDTH * 0.112,
height: SCREEN_WIDTH * 0.112,
borderRadius: (SCREEN_WIDTH * 0.112) / 2,
},
categoryBackground: {
backgroundColor: 'rgba(196, 196, 196, 0.45)',
justifyContent: 'center',
alignItems: 'center',
},
categoryImage: {
width: '40%',
height: '40%',
},
initialTextContainer: {
marginLeft: SCREEN_WIDTH * 0.08,
flexDirection: 'column',
justifyContent: 'center',
},
initialTextStyle: {
fontWeight: '500',
fontSize: normalize(14),
},
secondaryTextStyle: {
fontWeight: '500',
fontSize: normalize(12),
color: '#828282',
},
multiText: {justifyContent: 'space-between'},
});
export default ChatResultsCell;
|
