Adding popular posts

Views/Feed.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from './../API.js';
 import Post from './../components/Post.js';
+import PostPopularUsers from '../components/PostPopularUsers.js';
 import GlobalState from '../contexts/GlobalState.js';
 import * as Linking from 'expo-linking';
 
@@ -98,8 +99,12 @@ let Feed = ({ navigation, route }) => {
         }
     }, [route.params]);
     const renderPost = (({ item }) => {
-        if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
+        if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups'){
+            if(item.nonOrganicType === 'PopularUsers'){
+                return (<PostPopularUsers post={item}/>)
+            }
             return (<></>);
+        }
         return (<Post post={item} />); 
     });
 

components/PostPopularUsers.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Text, ScrollView, FlatList, StyleSheet, View, Share } from 'react-native';
+import Hyperlink from 'react-native-hyperlink'
+import { Button, Card, Chip } from 'react-native-paper';
+import API from '../API.js';
+import UserName from './UserName.js';
+import Media from './Media.js';
+import Comment from "./Comment.js";
+import NewComment from './NewComment.js';
+import Moment from 'moment';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
+import i18n from "../i18nMessages.js";
+import ProfilePhotoCircle from './ProfilePhotoCircle.js';
+import ProfileVertical from './ProfileCardVertical.js';
+
+
+let Post = (props) => {
+    const gState = useSnapshot(GlobalState);
+    const viewer = gState.me;
+    let [post, changePost] = useState(props.post);
+    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
+        <ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
+    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '').trim();
+    let usersStrings = post.content.match(/@[A-z]+:.+\w/g);
+    let userIds = [];
+    let usersProfileCars = [];
+    usersStrings.forEach((userString)=>{
+        userIds.push(userString.split(':')[1]);
+        usersProfileCars.push(
+            <ProfileVertical profileid={userString.split(':')[1]} skipFollow={true}/>
+        );
+    });
+    let renderPost = (obj) => {
+        return <ProfileVertical profileid={obj.item} />
+    }
+    if(usersProfileCars.length === 0) return <></>
+    return (
+        <Card style={styles.card}>
+            <Card.Content style={{
+                padding: 0,
+                margin: 0,
+                marginBottom: 0
+            }}>
+                <Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
+                    <View>
+                        <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
+                        <Media content={post.content} />
+                        <FlatList data={userIds}
+                            horizontal={true}
+                            renderItem={renderPost}
+                            //keyExtractor={item => item} 
+                        />
+                    </View>
+                </Hyperlink>
+            </Card.Content>
+        </Card>
+    );
+}
+
+export default React.memo(Post);
+
+const styles = StyleSheet.create({
+    userName: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        marginBottom: 5,
+        fontSize: 17,
+    },
+    card: {
+        margin: 0,
+        backgroundColor: "#FAFAFA",
+        borderRadius: 0,
+        marginBottom: 2,
+        padding: 0
+    },
+    comment: {
+        margin: 8,
+        marginTop: 0,
+        padding: 8
+    }
+});

components/ProfileCardVertical.js

@@ -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);