TabBar Navigator and Proper adding posts and comments

App.js

@@ -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>
     );

Store.js

@@ -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;

Views/Feed.js

@@ -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) => {
+            navigation.navigate('Profile', {profileid: route.params.profileid})
-                setPosts(data);
-            });
         } 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>
+                    {Posts.length === 0 && <ActivityIndicator />}
-                        <NewPost />
+                    <FlatList
-                        {
+                        data={Posts}
-                            Posts.map((post, i) => {
+                        renderItem={renderPost}
-                                return (
+                        keyExtractor={item => item._id || item.createdAt}
-                                    //<Text key={i}>{post.content}</Text>
+                        ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
-                                    <Post post={post} viewer={Me} key={i} />
+                    />
-                                )
-                            })
-                        }
-                    </ScrollView>
                 </View>
                 <StatusBar style="auto" />
             </SafeAreaView>

Views/Profile.js

@@ -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",
+    },
+});

components/Comment.js

@@ -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: {

components/NewPost.js

@@ -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>

components/Post.js

@@ -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';
@@ -17,10 +17,13 @@ let Post = (props) => {
     let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
     const newComentAdded = (commentData) => {
         //add to comments
-        props.post.comments.push(commentData);
+        let newPostObj = { ...post };
-        changePost(props.post);
+        newPostObj.comments.push(commentData);
-        console.log(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}}>
+            <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={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="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="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>
+                <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 && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
-                {
+            {
-                    showCommentsB &&
+                showCommentsB && <ScrollView style={{maxHeight: 300}}><FlatList
-                    (
+                    data={post.comments}
-                        post.comments.map((comment, i) => {
+                    renderItem={renderComment}
-                            return <Comment key={i} comment={comment} />
+                    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

components/UserName.js

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