Login and logout

App.js

@@ -84,6 +84,7 @@ export default function App() {
                         }}
                     />
                     <Stack.Screen name="SinglePost" component={SinglePost} />
+                    <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                 </Stack.Navigator>
             </NavigationContainer>
         </PaperProvider>

Views/Feed.js

@@ -5,12 +5,35 @@ import API from './../API.js';
 import Post from './../components/Post.js';
 import NewPost from "./../components/NewPost.js";
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
+const storeFeed = async (value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('feed', jsonValue)
+    } catch (e) {
+    }
+}
+
+const getFeed = async () => {
+    try {
+        const value = await AsyncStorage.getItem('feed')
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+    } catch (e) {
+        return []
+    }
+}
 
 let Feed = ({ navigation, route }) => {
     let [Me, setMeProfile] = useState({});
     let [Posts, setPosts] = useState([]);
     useEffect(async () => {
+        let loggedIn = await API.isLoggedIn();
+        if(!loggedIn) return navigation.navigate('Login');
+        let cacheFeed = await getFeed() || [];
+        setPosts(cacheFeed);
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
@@ -18,9 +41,8 @@ let Feed = ({ navigation, route }) => {
         } else {
             let posts = await API.getPosts();
             setPosts(posts);
-            navigation.setOptions({ title: "Feed" });
+            storeFeed(posts);
         }
-        //console.log(posts)
     }, [route.params]);
     const renderPost = (({ item }) => {
         if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')

Views/Login.js

@@ -3,35 +3,26 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
 import API from './../API.js';
 import LoginForm from './../components/Login.js';
-import { Provider as PaperProvider } from 'react-native-paper';
-import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 export default function App({navigation, route}) {
     useEffect(async () => {
         let r = await API.isLoggedIn();
-        if(r) navigation.navigate('Feed')
+        if(r){
+            await API.logout();
+            navigation.navigate('Login')
+        }
     }, []);
 
     return (
-        <PaperProvider settings={{
-            icon: props => <AwesomeIcon {...props} />,
-        }}>
             <SafeAreaView style={styles.container}>
-                <Text>EMI Social LOGO</Text>
                 <LoginForm />
                 <StatusBar style="auto" />
             </SafeAreaView>
-        </PaperProvider>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 25,
-        paddingTop: 10,
-        backgroundColor: "#edf2f7"
     },
 });

Views/Profile.js

@@ -58,7 +58,6 @@ export default Profile;
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: 'center',
         backgroundColor: "#edf2f7",
     },
 });

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

package.json

@@ -26,7 +26,8 @@
     "react-native-screens": "^3.13.1",
     "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.1",
-    "react-native-webview": "^11.17.2"
+    "react-native-webview": "^11.17.2",
+    "@react-native-async-storage/async-storage": "~1.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"