Working reactions

components/Comment.js

@@ -7,7 +7,21 @@ import Media from './Media.js';
 import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 
-let Comment = ({ comment }) => {
+let Comment = ({ comment, postid, viewer }) => {
+    let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
+    const newCommentReaction = () => {
+        if (!comment.reactions[viewer._id]) {
+            API.newCommentReaction(postid, comment.createdAt).then(() => {
+                comment.reactions[viewer._id] = { type: "like" };
+                changeLikes(likes+1);
+            });
+        } else {
+            //API.removePostReaction(viewer._id).then(() => {
+            //    delete comment.reactions[viewer._id];
+            //    changeLikes(likes-1);
+            //});
+        }
+    }
     return (
         <Card style={styles.comment}>
             <Card.Content>
@@ -20,10 +34,10 @@ let Comment = ({ comment }) => {
                     </View>
                     <View style={{flex:2}}>
                         <Button
-                            icon="favorite-border"
+                            icon={comment.reactions[viewer._id] ? "favorite" : "favorite-border"}
                             dense={true}
-                            onPress={() => console.log('Pressed')}
-                        />
+                            onPress={newCommentReaction}
+                        >{likes ? likes : ''}</Button>
                     </View>
                 </View>
                 <Text style={{fontSize: 16}}>{comment.content}</Text>

components/Post.js

@@ -37,7 +37,7 @@ let Post = (props) => {
         changePost(newPostObj);
     }
     const renderComment = ({ item }) => (
-        <Comment comment={item} />
+        <Comment comment={item} viewer={viewer} />
     );
     return (
         <Card style={styles.card}>