79 lines
3.0 KiB
JavaScript
79 lines
3.0 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 BibleEmbeddedView from './BibleEmbeddedView.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);
|
|
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
|
|
|
|
let Comment = ({ comment, postid }) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
|
|
let cleanContent = String(comment.content || '');
|
|
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, marginBottom: 8 }}>
|
|
<ProfilePhotoCircle profileid={comment.profileid} />
|
|
<Text style={
|
|
{
|
|
fontSize: 12,
|
|
fontWeight: "normal",
|
|
position: "absolute",
|
|
top: 20,
|
|
left: 37,
|
|
}
|
|
}> {Moment(comment.createdAt).fromNow()}</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: 14 }}>{cleanContent}</Text>
|
|
<BibleEmbeddedView content={comment.content} compact openChapterOnPress />
|
|
<Media content={comment.content} postId={postid} skiptVideo={true} />
|
|
</Card.Content>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Comment);
|
|
|
|
const styles = StyleSheet.create({
|
|
comment: {
|
|
margin: 8,
|
|
marginTop: 0,
|
|
},
|
|
likeComment: {
|
|
position: 'absolute',
|
|
margin: 16,
|
|
right: 0,
|
|
top: 0,
|
|
},
|
|
});
|