Profile Cache and Profile Header Started

Views/Profile.js

@@ -4,22 +4,50 @@ import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'rea
 import API from './../API.js';
 import Post from './../components/Post.js';
 import NewPost from "./../components/NewPost.js";
+import ProfileHeader from '../components/ProfileHeader.js';
 
+const storeProfilePosts = async (profileid, value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('profile_' + profileid, jsonValue)
+    } catch (e) {
+    }
+}
 
+const getProfilePosts = async (profileid) => {
+    try {
+        const value = await AsyncStorage.getItem('profile_' + profileid)
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+        return [];
+    } catch (e) {
+        return [];
+    }
+}
 
 let Profile = ({ navigation, route }) => {
     let [Me, setMeProfile] = useState({});
     let [Posts, setPosts] = useState([]);
+    let [profile, setProfile] = useState({});
+
     useEffect(async () => {
         setPosts([]);
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
-            API.getUserProfile(route.params.profileid).then(({ profile }) => {
+            console.log('Loading Cache Profile:' + route.params.profileid);
+            getProfilePosts(route.params.profileid).then(setPosts);
+            console.log('Loaded Cache Profile:' + route.params.profileid);
+            API.getUserProfile(route.params.profileid).then((profileObj) => {
+                let profile = profileObj.profile
+                setProfile(profileObj);
                 navigation.setOptions({ title: profile.firstName + " " + profile.lastName });
             });
             API.getPosts(route.params.profileid).then((data) => {
                 setPosts(data);
+                storeProfilePosts(route.params.profileid, data);
+                console.log('Store Cache Profile:' + route.params.profileid);
             });
         } else {
             navigation.navigate('Feed')
@@ -30,6 +58,12 @@ let Profile = ({ navigation, route }) => {
             return (<></>);
         return (<Post post={item} viewer={Me} />);
     });
+    const header = (
+        <View>
+            <ProfileHeader profileObj={profile} key={profile._id} />
+            <NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />
+        </View>
+    )
 
     return (
         <SafeAreaView style={styles.container}>
@@ -40,7 +74,7 @@ let Profile = ({ navigation, route }) => {
                         data={Posts}
                         renderItem={renderPost}
                         keyExtractor={item => item._id || item.createdAt}
-                        ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
+                        ListHeaderComponent={header}
                         refreshing={Posts.length === 0}
                         onRefresh={() => {
                             API.getPosts(route.params.profileid).then(setPosts);