Refresh Look on posts

components/ProfilePhotoCircle.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { Avatar } from 'react-native-paper';
+import { View, StyleSheet, Text } from 'react-native';
+import API from './../API.js';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+const ProfileHeader = ({ profileid, withName = false, small = false }) => {
+    let [profile, setProfile] = useState({});
+
+    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;
+    console.log(photoUrl);
+    return (
+        <View style={styles.container}>
+            <View style={styles.avatarContainer}>
+                <Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} />
+            </View>
+            <View style={styles.textContainer}>
+                <Text style={small ? styles.smallProfileName : styles.profileName}>{fullName}</Text>
+            </View>
+        </View>
+    );
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatarContainer: {
+        marginRight: 5,
+    },
+    textContainer: {
+        alignItems: 'center',
+    },
+    profileName: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    smallProfileName: {
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+});
+
+export default React.memo(ProfileHeader);