74 lines
2.5 KiB
JavaScript
74 lines
2.5 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 { useSnapshot } from 'valtio';
|
|
import GlobalState from '../contexts/GlobalState.js';
|
|
import Moment from 'moment';
|
|
import i18n from "../i18nMessages.js";
|
|
import 'moment/min/locales';
|
|
Moment.locale(i18n.locale);
|
|
|
|
let Comment = ({ comment, postid }) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
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 style={{fontSize: 12, fontWeight: "normal"}}> {Moment(comment.createdAt).fromNow()}</Text>
|
|
</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,
|
|
},
|
|
});
|