Login and logout

components/UserName.js

@@ -3,18 +3,47 @@ import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-let UserName = (props) => {
+const storeName = async (key, value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('Name_'+key, jsonValue)
+    } catch (e) {
+    }
+}
+
+const getName = async (key) => {
+    try {
+        const value = await AsyncStorage.getItem('Name_'+key)
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+    } catch (e) {
+        return []
+    }
+}
+
+let UserName = ({profileid}) => {
     let [profile, setProfile] = useState({});
     const navigation = useNavigation();
 
     useEffect(async () => {
-        let p = await API.getUserProfile(props.profileid).catch(()=>{return {}});
+        let cacheProfile = await getName(profileid);
+        if(cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
+        let p = await API.getUserProfile(profileid).catch(() => { return {} });
         setProfile(p);
-    }, [props.profileid]);
+        storeName(profileid, p)
+    }, [profileid]);
+
+    const onPress = ()=>{
+        return navigation.navigate('Profile', { profileid }) 
+    }
 
     return (
-        <Text onPress={()=>{navigation.navigate('Profile', {profileid: props.profileid})}} >{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
+        <Text onPress={onPress}>
+            {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
+        </Text>
     );
 }