76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Text, ScrollView, FlatList, StyleSheet } from 'react-native';
|
|
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
|
|
import API from './../API.js';
|
|
import UserName from './UserName.js';
|
|
import Media from './Media.js';
|
|
import Comment from "./Comment";
|
|
import NewComment from './NewComment.js';
|
|
|
|
|
|
let Post = (props) => {
|
|
const viewer = props.viewer;
|
|
let [showCommentsB, changeshowCommentsB] = useState(false);
|
|
let [post, changePost] = useState(props.post);
|
|
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 renderComment = ({ item }) => (
|
|
<Comment comment={item} />
|
|
);
|
|
return (
|
|
<Card style={styles.card}>
|
|
<Card.Content>
|
|
<Text style={styles.userName}>
|
|
<UserName profileid={post.profileid} />
|
|
{toProfileText}
|
|
</Text>
|
|
<Text style={{ fontSize: 18 }}>{cleanContent}</Text>
|
|
<Media content={post.content} />
|
|
|
|
</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="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>
|
|
}
|
|
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Post);
|
|
|
|
const styles = StyleSheet.create({
|
|
userName: {
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
marginBottom: 5,
|
|
fontSize: 18,
|
|
},
|
|
card: {
|
|
margin: 8,
|
|
backgroundColor: "#FFFFFF"
|
|
},
|
|
comment: {
|
|
margin: 8,
|
|
marginTop: 0,
|
|
padding: 8
|
|
}
|
|
});
|