Feed with post views working

components/Comment.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { Text, View, ScrollView, StyleSheet } from 'react-native';
+import { FAB, Button, Card, Title, IconButton } from 'react-native-paper';
+import API from './../API.js';
+import UserName from './UserName.js';
+import Media from './Media.js';
+
+
+let Comment = ({ comment }) => {
+    return (
+        <Card style={styles.comment}>
+            <Card.Content>
+                <Text style={styles.userName}>
+                    <UserName profileid={comment.profileid} />
+                    <Button
+                        icon="heart-o"
+                        small
+                        style={styles.likeComment}
+                        onPress={() => console.log('Pressed')}
+                    />
+                </Text>
+                <Text>{comment.content}</Text>
+            </Card.Content>
+        </Card>
+    );
+}
+
+export default Comment;
+
+const styles = StyleSheet.create({
+    comment: {
+        margin: 8,
+        marginTop: 0,
+    },
+    userName: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        marginBottom: 5,
+    },
+    likeComment: {
+        position: 'absolute',
+        margin: 16,
+        right: 0,
+        top: 0,
+    },
+});

components/Feed.js

@@ -23,7 +23,7 @@ let Feed = () => {
                     Posts.map((post, i) => {
                         return (
                             //<Text key={i}>{post.content}</Text>
-                            <Post post={post} key={i}/>
+                            <Post post={post} viewer={Me} key={i}/>
                         )
                     })
                 }

components/Post.js

@@ -1,31 +1,41 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
+import { Text, View, ScrollView, StyleSheet } from 'react-native';
+import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import API from './../API.js';
 import UserName from './UserName.js';
 import Media from './Media.js';
+import Comment from "./Comment";
 
 
-let Post = (props) => {
-
-    let toProfileText = props.post.toProfile && props.post.toProfile !== props.post.profileid ? 
-        <Text> {">"} <UserName profileid={props.post.toProfile} /></Text> : undefined;
-
-    let cleanContent = props.post.content.replace(/@[A-z]+:.+\w/g, '');
+let Post = ({ post, viewer }) => {
+    let [showCommentsB, changeshowCommentsB] = useState(false);
+    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
+        <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
+    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
     return (
-        <View style={styles.postView}>
-            <Text style={styles.userName}>
-                <UserName profileid={props.post.profileid} />
-                {toProfileText}
-            </Text>
-            <Text>{cleanContent}</Text>
-            <Media content={props.post.content} />
-            <View style={{flexDirection: "row", flow: 4, justifyContent: 'space-between'}}>
-                <Button title='Like' style={{flow:1}} />
-                <Button title='Comment' style={{flow:1}} />
-                <Button title='Share' style={{flow:1}} />
-                <Button title='Book' style={{flow:1}} />
-            </View>
-        </View>
+        <Card style={styles.card}>
+            <Card.Content>
+                <Text style={styles.userName}>
+                    <UserName profileid={post.profileid} />
+                    {toProfileText}
+                </Text>
+                <Text>{cleanContent}</Text>
+                <Media content={post.content} />
+                
+            </Card.Content>
+            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
+                <Button icon={post.reactions[viewer._id] ? "heart" : "heart-o"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
+                <Button icon="comment-o" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
+                <Button icon="share-square-o" style={{ flow: 1 }} ></Button>
+                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-o" : "bookmark"} style={{ flow: 1 }} ></Button>
+            </Card.Actions>
+                {
+                    showCommentsB &&
+                    post.comments.map((comment, i) => {
+                        return <Comment key={i} comment={comment} />
+                    })
+                }
+        </Card>
     );
 }
 
@@ -37,10 +47,13 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         marginBottom: 5,
     },
-    postView: {
+    card: {
         margin: 8,
-        borderColor: 'gray',
-        borderWidth: 1,
-        padding: 10
+        backgroundColor: "#FFFFFF"
+    },
+    comment:{
+        margin: 8,
+        marginTop: 0,
+        padding: 8
     }
 });