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
App.js
View File

@@ -9,6 +9,7 @@ import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
@@ -38,7 +39,8 @@ export default function App() {
},
})}
/>
<Tab.Screen name="Login" component={Login} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="Logou" component={Login} />
</Tab.Navigator>
</NavigationContainer>
);

10
Store.js Normal file
View File

@@ -0,0 +1,10 @@
import { createStore } from 'easy-peasy';
const store = createStore({
currentUser: ['Create store', 'Wrap application', 'Use store'],
addTodo: action((state, payload) => {
state.todos.push(payload);
}),
});
export default store;

29
Views/Feed.js
View File

@@ -1,10 +1,9 @@
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { View, ScrollView, StyleSheet, SafeAreaView } from 'react-native';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js';
import Post from './../components/Post.js';
import { Provider as PaperProvider } from 'react-native-paper';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import NewPost from "./../components/NewPost.js";
@@ -18,9 +17,7 @@ let Feed = ({ navigation, route }) => {
let r = await API.getMe();
setMeProfile(r);
if (route.params && route.params.profileid) {
API.getPosts(route.params.profileid).then((data) => {
setPosts(data);
});
navigation.navigate('Profile', {profileid: route.params.profileid})
} else {
let posts = await API.getPosts();
setPosts(posts);
@@ -28,6 +25,10 @@ let Feed = ({ navigation, route }) => {
}
//console.log(posts)
}, [route.params]);
const renderPost = (({ item }) => {
return (<Post post={item} viewer={Me} />);
});
return (
<PaperProvider settings={{
@@ -35,17 +36,13 @@ let Feed = ({ navigation, route }) => {
}}>
<SafeAreaView style={styles.container}>
<View>
<ScrollView>
<NewPost />
{
Posts.map((post, i) => {
return (
//<Text key={i}>{post.content}</Text>
<Post post={post} viewer={Me} key={i} />
)
})
}
</ScrollView>
{Posts.length === 0 && <ActivityIndicator />}
<FlatList
data={Posts}
renderItem={renderPost}
keyExtractor={item => item._id || item.createdAt}
ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
/>
</View>
<StatusBar style="auto" />
</SafeAreaView>

61
Views/Profile.js Normal file
View File

@@ -0,0 +1,61 @@
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js';
import Post from './../components/Post.js';
import { Provider as PaperProvider } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import NewPost from "./../components/NewPost.js";
let Profile = ({ navigation, route }) => {
let [Me, setMeProfile] = useState({});
let [Posts, setPosts] = useState([]);
useEffect(async () => {
setPosts([]);
let r = await API.getMe();
setMeProfile(r);
if (route.params && route.params.profileid) {
API.getPosts(route.params.profileid).then((data) => {
setPosts(data);
});
} else {
navigation.navigate('Feed')
}
}, [route.params]);
const renderPost = (({ item }) => {
return (<Post post={item} viewer={Me} />);
});
return (
<PaperProvider settings={{
icon: props => <MaterialIcons {...props} />,
}}>
<SafeAreaView style={styles.container}>
<View>
{Posts.length === 0 && <ActivityIndicator />}
{Posts.length !== 0 &&
<FlatList
data={Posts}
renderItem={renderPost}
keyExtractor={item => item._id || item.createdAt}
ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
/>
}
</View>
<StatusBar style="auto" />
</SafeAreaView>
</PaperProvider>
);
}
export default Profile;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: "#edf2f7",
},
});

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({
});