New Comment

Views/Feed.js

@@ -59,8 +59,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        justifyContent: 'center',
         backgroundColor: "#edf2f7",
-        width: "100%"
     },
 });

components/Comment.js

@@ -4,22 +4,29 @@ 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';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 
 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>
+                <View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
+                    <View style={{flex:8}}>
+                        <Text style={styles.userName}>
+                            <UserName profileid={comment.profileid} />
+
+                        </Text>
+                    </View>
+                    <View style={{flex:2}}>
+                        <Button
+                            icon="favorite-border"
+                            dense={true}
+                            onPress={() => console.log('Pressed')}
+                        />
+                    </View>
+                </View>
+                <Text style={{fontSize: 16}}>{comment.content}</Text>
             </Card.Content>
         </Card>
     );
@@ -36,6 +43,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
         fontWeight: 'bold',
         marginBottom: 5,
+        fontSize: 16
     },
     likeComment: {
         position: 'absolute',

components/NewComment.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Icon } from 'react-native';
+import { TextInput, Button } from 'react-native-paper';
+import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
+
+
+let NewComment = ({ postid, newComentAdded }) => {
+    let [commentContent, setCommentContent] = useState('');
+    const navigation = useNavigation();
+
+    return (
+        <View style={styles.NewComment}>
+            <TextInput
+                label="New Comment"
+                value={commentContent}
+                onChangeText={setCommentContent}
+                mode="outlined"
+                multiline={true}
+                dense={true}
+                style={{
+                    flex: 8,
+                    fontSize: 12,
+                }}
+            />
+            <View style={{
+                flex: 2,
+                fontSize: 12,
+                flexDirection: "column",
+                alignItems: "center", // ignore this - we'll come back to it
+                justifyContent: "center",
+            }}>
+                <Button mode="outlined" onPress={() => {
+                    if (commentContent.trim() === "") return 0;
+                    setCommentContent('');
+                    API.newPostComment(postid, commentContent).then((newPost) => {
+                        setCommentContent('');
+                        if(newComentAdded) newComentAdded(newPost);
+                    });
+                }}>
+                    <AwesomeIcon name="send" />
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+export default NewComment;
+
+const styles = StyleSheet.create({
+    NewComment: {
+        margin: 10,
+        flexDirection: "row",
+        flex: 6
+    }
+});

components/Post.js

@@ -5,13 +5,22 @@ import API from './../API.js';
 import UserName from './UserName.js';
 import Media from './Media.js';
 import Comment from "./Comment";
+import NewComment from './NewComment.js';
 
 
-let Post = ({ post, viewer }) => {
+let Post = (props) => {
+    const viewer = props.viewer;
     let [showCommentsB, changeshowCommentsB] = useState(false);
+    let [post, changePost] = useState(props.post);
     let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
         <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
     let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
+    const newComentAdded = (commentData) => {  
+        //add to comments
+        props.post.comments.push(commentData);
+        changePost(props.post);
+        console.log(commentData);
+    };
     return (
         <Card style={styles.card}>
             <Card.Content>
@@ -19,21 +28,24 @@ let Post = ({ post, viewer }) => {
                     <UserName profileid={post.profileid} />
                     {toProfileText}
                 </Text>
-                <Text>{cleanContent}</Text>
+                <Text style={{fontSize: 18}}>{cleanContent}</Text>
                 <Media content={post.content} />
                 
             </Card.Content>
-            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
-                <Button icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
-                <Button icon="forum" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
-                <Button icon="ios-share" style={{ flow: 1 }} ></Button>
-                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-outline" : "bookmark"} style={{ flow: 1 }} ></Button>
+            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly', fontSize: 18}}>
+                <Button icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"} labelStyle={{fontSize: 18}} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
+                <Button icon="forum" labelStyle={{fontSize: 18}} style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
+                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{fontSize: 18}}></Button>
+                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-outline" : "bookmark"} style={{ flow: 1 }} labelStyle={{fontSize: 18}}></Button>
             </Card.Actions>
+                {showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
                 {
                     showCommentsB &&
-                    post.comments.map((comment, i) => {
-                        return <Comment key={i} comment={comment} />
-                    })
+                    (
+                        post.comments.map((comment, i) => {
+                            return <Comment key={i} comment={comment} />
+                        })
+                    )
                 }
         </Card>
     );
@@ -46,6 +58,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
         fontWeight: 'bold',
         marginBottom: 5,
+        fontSize: 18,
     },
     card: {
         margin: 8,