68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
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';
|
|
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
|
|
|
|
|
let Comment = ({ comment, postid, viewer }) => {
|
|
let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
|
|
const newCommentReaction = () => {
|
|
if (!comment.reactions[viewer._id]) {
|
|
comment.reactions[viewer._id] = { type: "like" };
|
|
changeLikes(likes+1);
|
|
API.newCommentReaction(postid, comment.createdAt);
|
|
} else {
|
|
//API.removePostReaction(viewer._id).then(() => {
|
|
// delete comment.reactions[viewer._id];
|
|
// changeLikes(likes-1);
|
|
//});
|
|
}
|
|
}
|
|
return (
|
|
<Card style={styles.comment}>
|
|
<Card.Content>
|
|
<View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
|
|
<View style={{flex:8}}>
|
|
<Text style={styles.userName}>
|
|
<UserName profileid={comment.profileid} key={comment.profileid} />
|
|
|
|
</Text>
|
|
</View>
|
|
<View style={{flex:2}}>
|
|
<Button
|
|
icon={comment.reactions[viewer._id] ? "favorite" : "favorite-border"}
|
|
dense={true}
|
|
onPress={newCommentReaction}
|
|
>{likes ? likes : ''}</Button>
|
|
</View>
|
|
</View>
|
|
<Text style={{fontSize: 16}}>{comment.content}</Text>
|
|
</Card.Content>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Comment);
|
|
|
|
const styles = StyleSheet.create({
|
|
comment: {
|
|
margin: 8,
|
|
marginTop: 0,
|
|
},
|
|
userName: {
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
marginBottom: 5,
|
|
fontSize: 16
|
|
},
|
|
likeComment: {
|
|
position: 'absolute',
|
|
margin: 16,
|
|
right: 0,
|
|
top: 0,
|
|
},
|
|
});
|