Adding popular posts

2023-10-20 10:10:47 -07:00
parent 6097bc0381
commit 8abc441cf5
3 changed files with 162 additions and 1 deletions
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { Avatar, Card } from 'react-native-paper';
+import { View, StyleSheet, Text } from 'react-native';
+import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+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 : DefaultPhoto;
+    const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
+    const onPress = () => {
+        return navigation.navigate('Profile', { profileid })
+    }
+    return (
+        <Card style={styles.container}>
+            <Card.Content>
+                <View style={styles.avatarContainer}>
+                    <Avatar.Image size={100} 
+                        source={{ uri: photoUrl }} 
+                        onPress={onPress} 
+                        style={{marginLeft:0}}
+                    />
+                </View>
+                <View style={styles.textContainer}>
+                    <Text style={small ? styles.smallProfileName : styles.profileName} 
+                        onPress={onPress}>{fullName}
+                    </Text>
+                </View>
+            </Card.Content>
+        </Card>
+    );
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        //flexDirection: 'col',
+        width: 150,
+    },
+    avatarContainer: {
+        marginRight: 5,
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    textContainer: {
+        alignItems: 'center',
+    },
+    profileName: {
+        fontSize: 12,
+        fontWeight: '600',
+        textAlign: "center"
+    },
+    smallProfileName: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+});
+
+export default React.memo(ProfileHeader);