Working on AccountSettings page

Handle different users + account setting page #33
Co-Authored-By: rhit-norflwe

app/_layout.tsx

@@ -19,13 +19,14 @@ import { NavigationContainer } from '@react-navigation/native';
 import ViewHealthEvents from './viewHealthEvents';
 import ViewCalendarEvents from './viewCalendarEvents';
 import ViewMealEvents from './viewMealEvents';
+import TaskScreen from './home';
 
 
 const Stack = createStackNavigator<RootStackParamList>();
 const CustomTopBar = ({ navigation }: StackHeaderProps) => {
   return (
     <View style={styles.topBar}>
-      <TouchableOpacity onPress={() => navigation.navigate('index')}>
+      <TouchableOpacity onPress={() => navigation.navigate('home')}>
         <Ionicons name="home-outline" size={28} color="black" />
       </TouchableOpacity>
       <TouchableOpacity onPress={() => navigation.navigate('healthTracker')}>
@@ -61,6 +62,7 @@ export default function Layout() {
         }}
       >
         <Stack.Screen name="index" component={App} />
+        <Stack.Screen name="home" component={TaskScreen} />
         <Stack.Screen name="healthTracker" component={HealthTracker} />
         <Stack.Screen name="mealTracker" component={MealTracking} />
         <Stack.Screen name="notes" component={Notes} />

app/accountSetting.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import { cLog } from './log';
+// import { cLog } from './log';
 import { IPAddr } from './constants';
 import axios from 'axios';
-import { useFocusEffect } from '@react-navigation/native';
-import GenericViewPageForm from './viewEventPage';
+// import { useFocusEffect } from '@react-navigation/native';
+// import GenericViewPageForm from './viewEventPage';
 
 export default function AccountSetting () {
     const initialData = { userId: 1, name: "", username: "", email: "" };

app/constants.js

@@ -1,5 +1,5 @@
 // export const IPAddr = "http://34.204.83.156:8080" // For AWS
-export const IPAddr = "http://137.112.197.27:8080" // For local testing on laptop
+export const IPAddr = "http://137.112.196.132:8080" // For local testing on laptop
 export const logging = true;
 
 export const repeatingData = [

app/home.tsx

@@ -0,0 +1,60 @@
+// import { IPAddr } from './constants';
+// import axios from 'axios';
+import GenericMainPageForm from './mainPageTemplate';
+import React, { useState, useCallback } from 'react';
+import { formatTime, IPAddr } from './constants';
+import { Task } from '../components/Types';
+import axios from 'axios';
+import { useFocusEffect } from '@react-navigation/native';
+import { cLog } from './log'
+
+export default function TaskScreen() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const fetchAllEvents = async () => {
+    const hit = IPAddr + '/get_all_events/1';
+    cLog('Fetching all events from:' + hit);
+    axios.get(hit)
+      .then(response => {
+        const events = response.data.map((event: any) => ({
+          id: event.id.toString(),
+          title: `${event.title} at ${event.eventDate}, ${formatTime(event.eventTime)}`,
+          done: false,
+          icon: getEventIcon(event.event_type), 
+          event: event
+        })).slice(0,10);;
+        setTasks(events);
+      })
+      .catch(error => console.error('Error fetching events:', error));
+  }
+
+  const getEventIcon = (eventType: string) => {
+    switch (eventType.toLowerCase()) {
+      case 'finance':
+        return 'wallet-outline';
+      case 'calendar':
+        return 'calendar-outline';
+      case 'health':
+        return 'fitness-outline';
+      case 'meal':
+        return 'fast-food-outline';
+      default:
+        return 'help-outline';
+    }
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchAllEvents();
+    }, [])
+  );
+
+  return (
+    <GenericMainPageForm
+      title='Home'
+      header='Welcome Saayeh!'
+      nextPage='home'
+      thisPage='home'
+      tasks={tasks}
+    />
+  );
+}

app/index.tsx

@@ -1,60 +1,72 @@
 // import { IPAddr } from './constants';
 // import axios from 'axios';
-import GenericMainPageForm from './mainPageTemplate';
 import React, { useState, useCallback } from 'react';
-import { formatTime, IPAddr } from './constants';
-import { Task } from '../components/Types';
+import { IPAddr } from './constants';
+import { RootStackParamList } from '../components/Types';
 import axios from 'axios';
-import { useFocusEffect } from '@react-navigation/native';
+import { styles } from './styles';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { cLog } from './log'
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Button, TextInput, View, Text } from 'react-native';
 
 export default function TaskScreen() {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const fetchAllEvents = async () => {
-    const hit = IPAddr + '/get_all_events/1';
-    cLog('Fetching all events from:' + hit);
-    axios.get(hit)
-      .then(response => {
-        const events = response.data.map((event: any) => ({
-          id: event.id.toString(),
-          title: `${event.title} at ${event.eventDate}, ${formatTime(event.eventTime)}`,
-          done: false,
-          icon: getEventIcon(event.event_type), 
-          event: event
-        })).slice(0,10);;
-        setTasks(events);
-      })
-      .catch(error => console.error('Error fetching events:', error));
-  }
+    type Prop = StackNavigationProp<RootStackParamList, keyof RootStackParamList>;
+    const navigation = useNavigation<Prop>();
 
-  const getEventIcon = (eventType: string) => {
-    switch (eventType.toLowerCase()) {
-      case 'finance':
-        return 'wallet-outline';
-      case 'calendar':
-        return 'calendar-outline';
-      case 'health':
-        return 'fitness-outline';
-      case 'meal':
-        return 'fast-food-outline';
-      default:
-        return 'help-outline';
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+    const checkLogin = async () => {
+        try {
+            const userId = await AsyncStorage.getItem('userId');
+            if (userId !== null) {
+                cLog("Navigating Home");
+                navigation.navigate('home');
+            } else {
+                cLog('User not logged in');
+            }
+        } catch (error) {
+            console.error('Error checking login:', error);
+        }
+    }
+
+    const handleLogin = async (username: string, password: string) => {
+        try {
+            const hit = IPAddr + '/login';
+            const response = await axios.post(hit, { username: username, password: password });
+            cLog('Login response:', response.data);
+            await AsyncStorage.setItem('userId', response.data.userId.toString());
+            cLog('User id saved:', response.data.userId);
+            navigation.navigate('home');
+        } catch (error) {
+            console.error('Error logging in:', error);
+        }
     }
-  };
 
-  useFocusEffect(
-    useCallback(() => {
-      fetchAllEvents();
-    }, [])
-  );
+    useFocusEffect(
+        useCallback(() => {
+            checkLogin();
+        }, [])
+    );
 
-  return (
-    <GenericMainPageForm
-      title='Home'
-      header='Welcome Saayeh!'
-      nextPage='index'
-      thisPage='index'
-      tasks={tasks}
-    />
-  );
+    return (
+        <View style={styles.container}>
+            <Text style={styles.taskItem}>Login</Text>
+            <TextInput
+                style={styles.input}
+                placeholder="Username"
+                autoCapitalize="none"
+                onChangeText={(text) => setUsername(text)}
+            />
+            <TextInput
+                style={styles.input}
+                placeholder="Password"
+                secureTextEntry
+                onChangeText={(text) => setPassword(text)}
+            />
+            <Button title="Login" onPress={() => handleLogin(username, password)} />
+        </View>
+    );
 }

components/Types.tsx

@@ -10,6 +10,7 @@ export type Task = {
 
 export type RootStackParamList = {
     'index': undefined;
+    'home': undefined;
     'healthTracker': undefined;
     'mealTracker': undefined;
     'notes': undefined;

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@expo/config-plugins": "^9.0.0",
     "@expo/vector-icons": "^14.0.3",
+    "@react-native-async-storage/async-storage": "^2.1.0",
     "@react-native-community/checkbox": "^0.5.17",
     "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native-community/masked-view": "^0.1.11",
@@ -39,6 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": "^0.76.5",
+    "react-native-async-storage": "^0.0.1",
     "react-native-bouncy-checkbox": "^4.1.2",
     "react-native-calendars": "^1.1307.0",
     "react-native-dotenv": "^3.4.11",