adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TabBar Navigator and Proper adding posts and comments

Browse Source
This commit is contained in:
aeroreyna
2022-03-08 20:20:17 -08:00
parent 983ac258b3
commit 82e0ded56c
8 changed files with 121 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/Post.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
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';
@@ -15,12 +15,15 @@ let Post = (props) => {
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) => {
const newComentAdded = (commentData) => {
//add to comments
props.post.comments.push(commentData);
changePost(props.post);
console.log(commentData);
let newPostObj = { ...post };
newPostObj.comments.push(commentData);
changePost(newPostObj);
};
const renderComment = ({ item }) => (
<Comment comment={item} />
);
return (
<Card style={styles.card}>
<Card.Content>
@@ -28,30 +31,30 @@ let Post = (props) => {
<UserName profileid={post.profileid} />
{toProfileText}
</Text>
<Text style={{fontSize: 18}}>{cleanContent}</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 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 &&
(
post.comments.map((comment, i) => {
return <Comment key={i} comment={comment} />
})
)
}
{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 Post;
export default React.memo(Post);
const styles = StyleSheet.create({
userName: {
@@ -64,7 +67,7 @@ const styles = StyleSheet.create({
margin: 8,
backgroundColor: "#FFFFFF"
},
comment:{
comment: {
margin: 8,
marginTop: 0,
padding: 8