import React, { useState } from 'react'; import { View, Text, StyleSheet, Image, ActivityIndicator, TouchableOpacity } from 'react-native'; import ENV from '../../env'; import Colors from '../../constants/Colors'; import { useSelector, useDispatch } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import * as usersActions from '../../store/actions/users'; import { showMessage } from "react-native-flash-message"; import VerifiedUser from '../../constants/VerifiedUser'; import { Octicons } from '@expo/vector-icons'; const ListItem = (props) => { const { user } = props; const [isLoading, setIsLoading] = useState(false); const loggedInUserId = useSelector(state => state.auth.user._id); const allUsers = useSelector(state => state.users.allUsers); const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0]; // currUser following list const dispatch = useDispatch(); const navigation = useNavigation(); const checkFollow = (userId) => { const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0; return isFollowed; } const followUserHandler = async () => { // setIsLoading(true); if(checkFollow(user._id)){ showMessage({ message: `Your have unfollowed ${user.name}.`, type: "warning", duration: 3000, icon: { icon: "warning", position: 'left' } }); await dispatch(usersActions.unfollowUser(user)) } else { showMessage({ message: `Your are now following ${user.name}.`, type: "success", duration: 3000, icon: { icon: "success", position: 'left' } }); await dispatch(usersActions.followUser(user)) } // setIsLoading(false); } // check user._id is in following list const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${user._id}`); const onImageErrorHandler = () => { setImageUri(ENV.defaultImageUri) } return ( <View style={styles.container}> <Image source={{ uri: imageUri }} onError={onImageErrorHandler} style={styles.avatar} /> <View style={styles.content}> <View style={styles.mainContent}> <View style={styles.text}> <Text onPress={() => navigation.navigate('Home', { screen: 'UserProfile', params: { userId: user._id, name: user.name }})} style={styles.name} > { user.name + " " } { VerifiedUser.verifiedUsersId.includes(user._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} /> } </Text> </View> <Text style={styles.timeAgo}> { user.email } </Text> </View> { user._id !== loggedInUser._id && ( <View style={{ position: 'absolute', right: 0}} > { checkFollow(user._id) ? ( <TouchableOpacity onPress={followUserHandler} style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 15 }} > { isLoading ? ( <ActivityIndicator size="small" color="#fff" /> ) : ( <Text style={{ color: '#fff' }} >UnFollow</Text> ) } </TouchableOpacity> ) : ( <TouchableOpacity onPress={followUserHandler} style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 15 }} > { isLoading ? ( <ActivityIndicator size="small" color="#fff" /> ) : ( <Text style={{ color: '#fff' }} >Follow</Text> )} </TouchableOpacity> ) } </View> ) } </View> </View> ); }; const styles = StyleSheet.create({ container: { padding: 16, flexDirection: 'row', borderBottomWidth: 1, borderColor: "#FFFFFF", alignItems: 'flex-start', }, avatar: { width:50, height:50, borderRadius:25, backgroundColor: '#c2c2c2' }, text: { marginBottom: 5, flexDirection: 'row', flexWrap:'wrap' }, content: { flex: 1, marginLeft: 16, marginRight: 0 }, mainContent: { marginRight: 60 }, img: { height: 50, width: 50, margin: 0 }, attachment: { }, separator: { height: 1, backgroundColor: "#CCCCCC" }, timeAgo:{ fontSize:12, color:"#696969" }, name:{ fontSize:16, color:"#1E90FF" } }) export default ListItem;