Adding popular posts

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
+    }
+});