Feed with post views working

App.js

@@ -4,6 +4,8 @@ import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
 import API from './API.js';
 import LoginForm from './components/Login.js';
 import Feed from './components/Feed.js';
+import { Provider as PaperProvider } from 'react-native-paper';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 export default function App() {
     let [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -14,21 +16,26 @@ export default function App() {
     }, []);
 
     return (
+        <PaperProvider settings={{
+            icon: props => <AwesomeIcon {...props} />,
+          }}>
         <SafeAreaView style={styles.container}>
             <Text>EMI Social LOGO</Text>
             {!isLoggedIn && <LoginForm />}
             {isLoggedIn && <Feed />}
             <StatusBar style="auto" />
         </SafeAreaView>
+        </PaperProvider>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
-        marginTop: 30,
+        marginTop: 25,
+        paddingTop: 10,
+        backgroundColor: "#edf2f7"
     },
 });

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 Post = ({ post, viewer }) => {
-
+    let [showCommentsB, changeshowCommentsB] = useState(false);
-    let toProfileText = props.post.toProfile && props.post.toProfile !== props.post.profileid ? 
+    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
-        <Text> {">"} <UserName profileid={props.post.toProfile} /></Text> : undefined;
+        <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
-
+    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
-    let cleanContent = props.post.content.replace(/@[A-z]+:.+\w/g, '');
     return (
-        <View style={styles.postView}>
+        <Card style={styles.card}>
+            <Card.Content>
                 <Text style={styles.userName}>
-                <UserName profileid={props.post.profileid} />
+                    <UserName profileid={post.profileid} />
                     {toProfileText}
                 </Text>
                 <Text>{cleanContent}</Text>
-            <Media content={props.post.content} />
+                <Media content={post.content} />
-            <View style={{flexDirection: "row", flow: 4, justifyContent: 'space-between'}}>
+                
-                <Button title='Like' style={{flow:1}} />
+            </Card.Content>
-                <Button title='Comment' style={{flow:1}} />
+            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
-                <Button title='Share' style={{flow:1}} />
+                <Button icon={post.reactions[viewer._id] ? "heart" : "heart-o"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
-                <Button title='Book' style={{flow:1}} />
+                <Button icon="comment-o" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
-            </View>
+                <Button icon="share-square-o" style={{ flow: 1 }} ></Button>
-        </View>
+                <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',
+        backgroundColor: "#FFFFFF"
-        borderWidth: 1,
+    },
-        padding: 10
+    comment:{
+        margin: 8,
+        marginTop: 0,
+        padding: 8
     }
 });

package-lock.json

@@ -1139,6 +1139,15 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@callstack/react-theme-provider": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.7.tgz",
+      "integrity": "sha512-Ab6rbD2w4u9W3yf7LQQ8evx9m8fZNsoWxt+MFm3AyZnyKQNCJf4K7ip9tHHZgSs+HTdoj38lEqPehvFOVQKvAg==",
+      "requires": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -2689,6 +2698,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2702,6 +2720,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "color-string": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
+      "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colorette": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
@@ -3880,6 +3907,21 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -6013,6 +6055,21 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
+    },
+    "react-native-paper": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.11.2.tgz",
+      "integrity": "sha512-r+M5unY9Avez4we/RijVh4iy8gqxK93R4840aZmbakOJLIuxjfNh3B6SuoxBEbR6diuPRbKVeWHKju4mhltxWw==",
+      "requires": {
+        "@callstack/react-theme-provider": "^3.0.7",
+        "color": "^3.1.2",
+        "react-native-iphone-x-helper": "^1.3.1"
+      }
+    },
     "react-native-web": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz",
@@ -6604,6 +6661,21 @@
         "plist": "^3.0.4"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-google-material-icons": "^1.0.4",
     "react-native": "0.64.3",
     "react-native-autoheight-webview": "^1.6.1",
+    "react-native-paper": "^4.11.2",
     "react-native-web": "0.17.1",
     "react-native-webview": "^11.17.2"
   },