import React, {useEffect, useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Image, } from 'react-native'; import { Octicons } from '@expo/vector-icons'; import { useDispatch, useSelector } from 'react-redux'; import * as usersActions from '../../store/actions/users'; import Colors from '../../constants/Colors'; import { showMessage } from "react-native-flash-message"; import { useNavigation } from '@react-navigation/native'; import ENV from '../../env'; import VerifiedUser from '../../constants/VerifiedUser'; const UserList = (props) => { const { item, followHandler } = props; const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${item._id}`) const loggedInUserId = useSelector(state => state.auth.user._id); const allUsers = useSelector(state => state.users.allUsers); const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0]; const dispatch = useDispatch(); const navigation = useNavigation(); const onImageErrorHandler = () => { setImageUri(ENV.defaultImageUri); } const checkFollow = (userId) => { const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0; return isFollowed; } const followUserHandler = async () => { if(checkFollow(item._id)){ followHandler(item._id); showMessage({ message: `Your are already following ${item.name}.`, type: "success", duration: 3000, icon: { icon: "success", position: 'left' } }); } else { await dispatch(usersActions.followFindPeople(item._id)) followHandler(item._id); showMessage({ message: `Your are now following ${item.name}.`, type: "success", duration: 3000, icon: { icon: "success", position: 'left' } }); await dispatch(usersActions.followUser(item)) } } return ( <TouchableOpacity onPress={() => navigation.navigate('UserProfile', {userId: item._id, name: item.name} )} style={styles.card} > <Image style={styles.userImage} source={{ uri: imageUri }} onError={onImageErrorHandler} /> <View style={styles.cardFooter}> <View style={{ alignItems: "center", justifyContent: "center" }}> <Text onPress={() => navigation.navigate('UserProfile',{ userId: item._id, name: item.name} )} style={{...styles.name, marginRight: 10}} > {item.name.length > 10 ? ( <>{item.name.substring(0,10)}... </> ) : ( <>{item.name + " "}</> )} { VerifiedUser.verifiedUsersId.includes(item._id) && <Octicons name="verified" size={20} color={Colors.brightBlue} /> } </Text> <Text style={styles.position}> {item.email.length > 15 ? ( <>{item.email.substring(0,15)}...</> ) : ( <>{item.email}</> )} </Text> <TouchableOpacity style={styles.followButton}> <Text onPress={followUserHandler} style={styles.followButtonText}>Follow</Text> </TouchableOpacity> </View> </View> </TouchableOpacity> ) } const styles = StyleSheet.create({ card: { shadowColor: '#00000021', shadowOffset: { width: 0, height: 6, }, shadowOpacity: 0.37, shadowRadius: 7.49, elevation: 12, marginVertical: 5, backgroundColor: "white", flexBasis: '46%', marginHorizontal: 5, borderRadius: 25 }, cardFooter: { paddingVertical: 17, paddingHorizontal: 16, borderTopLeftRadius: 1, borderTopRightRadius: 1, flexDirection: 'row', alignItems: "center", justifyContent: "center" }, cardContent: { paddingVertical: 12.5, paddingHorizontal: 16, }, cardHeader: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 12.5, paddingBottom: 25, paddingHorizontal: 16, borderBottomLeftRadius: 1, borderBottomRightRadius: 1, }, userImage: { height: 120, width: 120, borderRadius: 60, marginTop: 20, alignSelf: 'center', borderColor: "#DCDCDC", borderWidth: 3, backgroundColor: '#c2c2c2' }, name: { fontSize: 18, flex: 1, alignSelf: 'center', color: "#008080", fontWeight: 'bold' }, position: { fontSize: 14, flex: 1, alignSelf: 'center', color: "#696969" }, followButton: { marginTop: 10, height: 35, width: 100, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 30, backgroundColor: Colors.brightBlue }, followButtonText: { color: "#FFFFFF", fontSize: 18, }, icon: { height: 20, width: 20, } }); export default UserList;