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

4
components/Comment.js
View File

@@ -14,7 +14,7 @@ let Comment = ({ comment }) => {
<View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
<View style={{flex:8}}>
<Text style={styles.userName}>
<UserName profileid={comment.profileid} />
<UserName profileid={comment.profileid} key={comment.profileid} />
</Text>
</View>
@@ -32,7 +32,7 @@ let Comment = ({ comment }) => {
);
}
export default Comment;
export default React.memo(Comment);
const styles = StyleSheet.create({
comment: {

7
components/NewPost.js
View File

@@ -5,7 +5,7 @@ import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
let NewPost = () => {
let NewPost = ({profileid, newPostCB}) => {
let [postContent, setPostContent] = useState('');
const navigation = useNavigation();
@@ -23,9 +23,10 @@ let NewPost = () => {
<View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
<Button icon="add-a-photo" mode="outlined"></Button>
<Button icon="send" mode="outlined" onPress={() => {
setPostContent('');
API.newPost(postContent).then((newPost) => {
console.log(newPost);
setPostContent('')
setPostContent('');
if(newPostCB) newPostCB(newPost);
});
}}>Post</Button>
</View>

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

4
components/UserName.js
View File

@@ -14,11 +14,11 @@ let UserName = (props) => {
}, [props.profileid]);
return (
<Text onPress={()=>{navigation.navigate('Feed', {profileid: props.profileid})}} >{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
<Text onPress={()=>{navigation.navigate('Profile', {profileid: props.profileid})}} >{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
);
}
export default UserName;
export default React.memo(UserName);
const styles = StyleSheet.create({
});