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

New Comment

Browse Source
This commit is contained in:
Adolfo Reyna
2022-03-07 18:15:40 -08:00
parent 98201c8948
commit 983ac258b3
4 changed files with 98 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Feed.js
View File

@@ -59,8 +59,6 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#edf2f7",
width: "100%"
},
});

18
components/Comment.js
View File

@@ -4,22 +4,29 @@ 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 AwesomeIcon from 'react-native-vector-icons/FontAwesome';
let Comment = ({ comment }) => {
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} />
</Text>
</View>
<View style={{flex:2}}>
<Button
icon="heart-o"
small
style={styles.likeComment}
icon="favorite-border"
dense={true}
onPress={() => console.log('Pressed')}
/>
</Text>
<Text>{comment.content}</Text>
</View>
</View>
<Text style={{fontSize: 16}}>{comment.content}</Text>
</Card.Content>
</Card>
);
@@ -36,6 +43,7 @@ const styles = StyleSheet.create({
fontSize: 14,
fontWeight: 'bold',
marginBottom: 5,
fontSize: 16
},
likeComment: {
position: 'absolute',

57
components/NewComment.js Normal file
View File

@@ -0,0 +1,57 @@
import React, { useState } from 'react';
import { View, StyleSheet, Icon } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
let NewComment = ({ postid, newComentAdded }) => {
let [commentContent, setCommentContent] = useState('');
const navigation = useNavigation();
return (
<View style={styles.NewComment}>
<TextInput
label="New Comment"
value={commentContent}
onChangeText={setCommentContent}
mode="outlined"
multiline={true}
dense={true}
style={{
flex: 8,
fontSize: 12,
}}
/>
<View style={{
flex: 2,
fontSize: 12,
flexDirection: "column",
alignItems: "center", // ignore this - we'll come back to it
justifyContent: "center",
}}>
<Button mode="outlined" onPress={() => {
if (commentContent.trim() === "") return 0;
setCommentContent('');
API.newPostComment(postid, commentContent).then((newPost) => {
setCommentContent('');
if(newComentAdded) newComentAdded(newPost);
});
}}>
<AwesomeIcon name="send" />
</Button>
</View>
</View>
);
}
export default NewComment;
const styles = StyleSheet.create({
NewComment: {
margin: 10,
flexDirection: "row",
flex: 6
}
});

27
components/Post.js
View File

@@ -5,13 +5,22 @@ 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 = ({ post, viewer }) => {
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
props.post.comments.push(commentData);
changePost(props.post);
console.log(commentData);
};
return (
<Card style={styles.card}>
<Card.Content>
@@ -19,21 +28,24 @@ let Post = ({ post, viewer }) => {
<UserName profileid={post.profileid} />
{toProfileText}
</Text>
<Text>{cleanContent}</Text>
<Text style={{fontSize: 18}}>{cleanContent}</Text>
<Media content={post.content} />
</Card.Content>
<Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
<Button icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
<Button icon="forum" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
<Button icon="ios-share" style={{ flow: 1 }} ></Button>
<Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-outline" : "bookmark"} style={{ flow: 1 }} ></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} />
})
)
}
</Card>
);
@@ -46,6 +58,7 @@ const styles = StyleSheet.create({
fontSize: 14,
fontWeight: 'bold',
marginBottom: 5,
fontSize: 18,
},
card: {
margin: 8,