Login and logout

components/Login.js

@@ -2,11 +2,13 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState } from 'react';
 import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
 import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
 
 
 let LoginForm = ()=>{
   let [email, setEmail] = useState('');
   let [password, setPassword] = useState('');
+  const navigation = useNavigation();
 
   return (
     <View style={styles.mainView}>
@@ -34,7 +36,7 @@ let LoginForm = ()=>{
       <Button
         onPress={async () => {
             let r = await API.logIn(email, password);
-            console.log(r);
+            if(r.status === "ok") navigation.navigate('Feed');
           }}
         title={"login"}
       />
@@ -50,7 +52,6 @@ const styles = StyleSheet.create ({
     flexDirection:'column',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255, 0, 255, 1.0)',
   },
   input: {
     height: 40,

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