Feature/logout

client/App.js

@@ -12,13 +12,16 @@ import AccountScreen from './src/AccountScreen';
 import SignUpScreen from './src/SignUp';
 import DisplayRouteScreen from './src/DisplayRoute';
 import FriendsScreen from './src/FriendsScreen';
+import { retrieveData } from './src/caching';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
+  const firstScreen =
+    retrieveData('username') === null ? 'AccountScreen' : 'Map';
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="AccountScreen">
+      <Stack.Navigator initialRouteName={firstScreen}>
         <Stack.Screen
           options={{ headerBackVisible: false }}
           name="Map"

client/src/AccountScreen.js

@@ -1,35 +1,73 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
 import styles from './components/styles/AccountScreen.styles';
 import buttonStyles from './components/common/button';
+import { retrieveData, removeData } from './caching';
+
 
 export default function AccountScreen({ navigation }) {
+  const [usernameValid, setUsernameValid] = useState(null)
+
+  useEffect(() => {
+    const fetchUsername = async () => {
+      try {
+        const username = await retrieveData('username');
+        setUsernameValid(username);
+      } catch (error) {
+        console.error('Error retrieving username:', error);
+      }
+    };
+  fetchUsername();
+},[]);
+
+  const logout = async () => {
+    try {
+      await removeData('username');
+      setUsernameValid(null);
+      navigation.navigate('Map');
+    } catch (error) {
+      console.error('Error logging out:', error);
+    }
+  };
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <SafeAreaView style={styles.container}>
-        <TouchableOpacity
-          style={buttonStyles.button}
-          onPress={() => navigation.navigate('LoginScreen')}
-          color="#841584"
-        >
-          <Text style={buttonStyles.buttonText}>Log In</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={buttonStyles.button}
-          onPress={() => navigation.navigate('SignUpScreen')}
-          color="#841584"
-        >
-          <Text style={buttonStyles.buttonText}>Sign Up</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={buttonStyles.button}
-          onPress={() => navigation.navigate('Map')}
-          color="#841584"
-        >
-          <Text style={buttonStyles.buttonText}>Continue as Guest</Text>
-        </TouchableOpacity>
+        {usernameValid === null ? (
+          <>
+            <TouchableOpacity
+              style={buttonStyles.button}
+              onPress={() => navigation.navigate('LoginScreen')}
+              color="#841584"
+            >
+              <Text style={buttonStyles.buttonText}>Log In</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={buttonStyles.button}
+              onPress={() => navigation.navigate('SignUpScreen')}
+              color="#841584"
+            >
+              <Text style={buttonStyles.buttonText}>Sign Up</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={buttonStyles.button}
+              onPress={() => navigation.navigate('Map')}
+              color="#841584"
+            >
+              <Text style={buttonStyles.buttonText}>Continue as Guest</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <>
+            <TouchableOpacity
+              style={buttonStyles.button}
+              onPress={logout}
+              color="#841584"
+            >
+              <Text style={buttonStyles.buttonText}>Log Out</Text>
+            </TouchableOpacity>
+            <Text style={styles.Text}>You are logged in</Text>
+          </>
+        )}
       </SafeAreaView>
     </View>
   );

client/src/LogIn.js

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { handleLogin } from './utils/accountUtils';
 import styles from './components/styles/Login.styles';
-import { retrieveData } from './caching';
+
 
 export default function LoginScreen({ navigation }) {
   const [username, setUsername] = useState('');
@@ -19,16 +19,13 @@ export default function LoginScreen({ navigation }) {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <SafeAreaView style={styles.container}>
-        {retrieveData('username') === null ? (
-          <>
             <TextInput
               placeholder="Username"
               value={username}
               onChangeText={(text) => setUsername(text)}
               style={styles.TextInput}
               onSubmitEditing={() => ref2.current.focus()}
             />
-
             <TextInput
               ref={ref2}
               placeholder="Password"
@@ -37,27 +34,13 @@ export default function LoginScreen({ navigation }) {
               secureTextEntry
               style={styles.TextInput}
             />
-
             <TouchableOpacity
               style={styles.TouchableOpacity}
               onPress={() => handleLogin(username, password, navigation)}
               color="#841584"
             >
               <Text style={styles.TouchableOpacityText}>Log In</Text>
             </TouchableOpacity>
-          </>
-        ) : (
-          <>
-            <Text style={styles.Text}>You are logged in</Text>
-            <TouchableOpacity
-              style={styles.TouchableOpacity}
-              onPress={() => navigation.navigate('Map')}
-              color="#841584"
-            >
-              <Text style={styles.TouchableOpacityText}>Go to Map</Text>
-            </TouchableOpacity>
-          </>
-        )}
       </SafeAreaView>
     </View>
   );

client/src/Map.js

@@ -109,7 +109,7 @@ export default function MapScreen({ navigation }) {
             style={MapStyles.loginButton}
             onPress={() => navigation.navigate('AccountScreen')}
           >
-            <Text style={MapStyles.buttonText}>Log In</Text>
+            <Text style={MapStyles.buttonText}>Account</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={MapStyles.findRouteButton}

client/src/caching.jsx

@@ -25,7 +25,6 @@ export const retrieveData = async (key) => {
 export const removeData = async (key) => {
   try {
     await AsyncStorage.removeItem(JSON.stringify(key));
-    console.log('Removed successfully');
   } catch {
     console.error('Error removing data from cache');
   }