71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Avatar } from 'react-native-paper';
|
|
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
|
import API from './../API.js';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { Image } from 'expo-image'; // Import Image from expo-image
|
|
|
|
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png?width=200&height=200";
|
|
|
|
const ProfileHeader = ({ profileid, withName = false, small = false }) => {
|
|
let [profile, setProfile] = useState({});
|
|
const navigation = useNavigation();
|
|
useEffect(() => {
|
|
let subscribed = true;
|
|
let getData = async () => {
|
|
let p = await API.getUserProfile(profileid).catch(() => { return {} });
|
|
if (subscribed)
|
|
setProfile(p);
|
|
}
|
|
getData();
|
|
return () => {
|
|
subscribed = false;
|
|
};
|
|
}, [profileid]);
|
|
let photoUrl = profile.profile && profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo + '?width=100&height=100' : DefaultPhoto;
|
|
const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
|
|
const onPress = () => {
|
|
return navigation.navigate('Profile', { profileid })
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
<TouchableOpacity onPress={onPress}>
|
|
<Image source={{ uri: photoUrl }} key={photoUrl}
|
|
style={{
|
|
width: small ? 25 : 35,
|
|
height: small ? 25 : 35,
|
|
aspectRatio: 1,
|
|
borderRadius: 50,
|
|
}} cachePolicy="memory-disk"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.textContainer}>
|
|
<Text style={small ? styles.smallProfileName : styles.profileName} onPress={onPress}>{fullName}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
},
|
|
avatarContainer: {
|
|
marginRight: 5,
|
|
},
|
|
textContainer: {
|
|
alignItems: 'center',
|
|
},
|
|
profileName: {
|
|
fontSize: 17,
|
|
fontWeight: '500',
|
|
},
|
|
smallProfileName: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
},
|
|
});
|
|
|
|
export default React.memo(ProfileHeader); |