From 90be0f05bbb2764016b73bd3df6ccf241fecddce Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Sun, 11 Dec 2022 22:17:58 -0500
Subject: [PATCH] Notifications view improvement and some cleaning

---
 App.js                            | 29 +++++++++++++++--------------
 Views/NotificationsView.js        |  8 ++++----
 Views/Search.js                   |  4 +---
 Views/SinglePost.js               | 26 +++-----------------------
 components/SinglePostComponent.js | 28 ++++++++++++++++++++++++++++
 components/UserName.js            |  2 +-
 6 files changed, 52 insertions(+), 45 deletions(-)
 create mode 100644 components/SinglePostComponent.js

diff --git a/App.js b/App.js
index 55443ef..31e0ec8 100644
--- a/App.js
+++ b/App.js
@@ -52,7 +52,7 @@ async function registerForPushNotificationsAsync() {
             lightColor: '#FF231F7C',
         });
     }
-    
+
     let token;
     if (Device.isDevice) {
         const { status: existingStatus } = await Notifications.getPermissionsAsync();
@@ -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,14 +122,14 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="home" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
                 listeners={({ navigation, route }) => ({
                     tabPress: e => {
                         navigation.navigate('Feed')
                     },
                 })}
-                
+
             />
             <Tab.Screen
                 name="Notifications"
@@ -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,19 +172,19 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="subscriptions" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
 
-            <Tab.Screen 
-                name="Logout" 
-                component={Login} 
+            <Tab.Screen
+                name="Logout"
+                component={Login}
                 options={{
                     tabBarLabel: 'Logout',
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="logout" color={color} size={26} />
                     ),
-                    header: ()=>{<></>},
+                    header: () => { <></> },
                 }}
             />
         </Tab.Navigator>
@@ -197,14 +197,15 @@ export default function App() {
             icon: props => <MaterialIcons {...props} />,
         }} theme={theme}>
             <NavigationContainer>
+                <StatusBar style="dark" translucent={false} />
                 <Stack.Navigator>
                     <Stack.Screen
                         name="MainNavigation"
                         component={MainNavigation}
-                        options={{ 
+                        options={{
                             headerShown: true,
                             tabBarLabel: 'EMI Social',
-                            header: ()=>{<></>},
+                            header: () => { <></> },
                         }}
                     />
                     <Stack.Screen
diff --git a/Views/NotificationsView.js b/Views/NotificationsView.js
index 467c56f..34a8bf1 100644
--- a/Views/NotificationsView.js
+++ b/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>
         )
diff --git a/Views/Search.js b/Views/Search.js
index f10d7fb..5ce1787 100644
--- a/Views/Search.js
+++ b/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('');
diff --git a/Views/SinglePost.js b/Views/SinglePost.js
index b03ee09..862225d 100644
--- a/Views/SinglePost.js
+++ b/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",
-    },
-});
diff --git a/components/SinglePostComponent.js b/components/SinglePostComponent.js
new file mode 100644
index 0000000..68ce97f
--- /dev/null
+++ b/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);
diff --git a/components/UserName.js b/components/UserName.js
index 982705b..dc143fb 100644
--- a/components/UserName.js
+++ b/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 () => {