Likes working

components/Post.js

@@ -12,15 +12,30 @@ let Post = (props) => {
     const viewer = props.viewer;
     let [showCommentsB, changeshowCommentsB] = useState(false);
     let [post, changePost] = useState(props.post);
+    let [likes, changeLikes] = useState(Object.keys(post.reactions).length)
     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
         let newPostObj = { ...post };
         newPostObj.comments.push(commentData);
         changePost(newPostObj);
     };
+    const newPostReaction = () => {
+        let newPostObj = { ...post };
+        if (!newPostObj.reactions[viewer._id]) {
+            API.newPostReaction(post._id).then(() => {
+                newPostObj.reactions[viewer._id] = { type: "like" };
+                changeLikes(likes+1);
+            });
+        } else {
+            API.removePostReaction(viewer._id).then(() => {
+                delete newPostObj.reactions[viewer._id];
+                changeLikes(likes-1);
+            });
+        }
+        changePost(newPostObj);
+    }
     const renderComment = ({ item }) => (
         <Comment comment={item} />
     );
@@ -36,20 +51,28 @@ let Post = (props) => {
 
             </Card.Content>
             <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={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
+                    labelStyle={{ fontSize: 18 }}
+                    style={{ flow: 1 }}
+                    onPress={newPostReaction}
+                >
+                    {likes}
+                </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 && <ScrollView style={{maxHeight: 300}}><FlatList
-                    data={post.comments}
-                    renderItem={renderComment}
-                    keyExtractor={item => item.createdAt}
-                /></ScrollView>
+                showCommentsB &&
+                <ScrollView style={{ maxHeight: 300 }}>
+                    <FlatList
+                        data={post.comments}
+                        renderItem={renderComment}
+                        keyExtractor={item => item.createdAt}
+                    /></ScrollView>
             }
-
         </Card>
     );
 }