Notifications view improvement and some cleaning

App.js

@@ -112,7 +112,7 @@ const MainNavigation = () => {
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
             barStyle={{ backgroundColor: '#000000' }}
-            sceneContainerStyle={{paddingBottom: 0, paddingTop: 15}}
+            sceneContainerStyle={{ paddingBottom: 0, paddingTop: 15 }}
         >
             <Tab.Screen
                 name="Feed"
@@ -122,7 +122,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="home" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
                 listeners={({ navigation, route }) => ({
                     tabPress: e => {
@@ -139,7 +139,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="notifications" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
             <Tab.Screen
@@ -150,7 +150,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="search" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
             <Tab.Screen
@@ -161,7 +161,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="groups" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
             <Tab.Screen
@@ -172,7 +172,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="subscriptions" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
 
@@ -184,7 +184,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="logout" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
         </Tab.Navigator>
@@ -197,6 +197,7 @@ export default function App() {
             icon: props => <MaterialIcons {...props} />,
         }} theme={theme}>
             <NavigationContainer>
+                <StatusBar style="dark" translucent={false} />
                 <Stack.Navigator>
                     <Stack.Screen
                         name="MainNavigation"
@@ -204,7 +205,7 @@ export default function App() {
                         options={{
                             headerShown: true,
                             tabBarLabel: 'EMI Social',
-                            header: ()=>{<></>},
+                            header: () => { <></> },
                         }}
                     />
                     <Stack.Screen

Views/NotificationsView.js

@@ -1,9 +1,8 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import { Card } from 'react-native-paper';
-import API from '../API.js';
-import Post from '../components/Post.js';
+import SinglePost from '../components/SinglePostComponent';
 import Moment from 'moment';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
@@ -11,7 +10,7 @@ import GlobalState from '../contexts/GlobalState.js';
 let NotificationsView = ({ navigation, route }) => {
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
-    const renderNotification = (({ item }) => {
+    const renderNotification =  (({ item }) => {
         const gotToPost = () => {
             navigation.navigate('SinglePost', { postid: item.postid });
         };
@@ -22,6 +21,7 @@ let NotificationsView = ({ navigation, route }) => {
                     <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                         {" " + Moment(item.ts).fromNow()}
                     </Text>
+                    <SinglePost postId={item.postid} />
                 </Card.Content>
             </Card>
         )

Views/Search.js

@@ -1,10 +1,8 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ScrollView, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
-import UserName from "../components/UserName";
 import ProfileCard from "../components/ProfileCard";
-import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Search = () => {
     const [searchQuery, setSearchQuery] = React.useState('');

Views/SinglePost.js

@@ -1,29 +1,9 @@
-import { StatusBar } from 'expo-status-bar';
-import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, ScrollView, FlatList } from 'react-native';
-import API from './../API.js';
-import Post from './../components/Post.js';
+import React from 'react';
+import SinglePostComponent from '../components/SinglePostComponent';
 
 let SinglePost = ({ route }) => {
-    let [post, setPost] = useState({});
     console.log(route.params.postid)
-    useEffect(async () => {
-        if (route.params.postid)
-            setPost(await API.getPost(route.params.postid));
-    }, [route]);
-    return (post._id ? (
-        <ScrollView>
-        <Post post={post}/>
-        </ScrollView>
-    ) : null);
+    return <SinglePostComponent postId={route.params.postid} />;
 };
 
 export default SinglePost;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        backgroundColor: "#edf2f7",
-    },
-});

components/SinglePostComponent.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { ScrollView } from 'react-native';
+import API from './../API.js';
+import Post from './Post.js';
+
+let SinglePostComponent = ({ postId }) => {
+    let [post, setPost] = useState({});
+    useEffect(() => {
+        let subscribed = true;
+        let getData = async ()=>{
+            if (postId){
+                let post = await API.getPost(postId);
+                if(subscribed) setPost(post);
+            }
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        }
+    }, [postId]);
+    return (post._id ? (
+        <ScrollView>
+        <Post post={post}/>
+        </ScrollView>
+    ) : null);
+};
+
+export default React.memo(SinglePostComponent);

components/UserName.js

@@ -37,7 +37,7 @@ let UserName = ({ profileid, hideIcon }) => {
             if (subscribed)
                 setProfile(p);
             storeName(profileid, p);
-            console.log("Fetching Name:" + p?.profile?.firstName);
+            //console.log("Fetching Name:" + p?.profile?.firstName);
         }
         getData();
         return () => {