signup fields now working and display in profile tab

Author: jgmuende

KonditionExpo/app/(tabs)/profile.tsx

@@ -1,21 +1,34 @@
 import React, { useState } from 'react';
 import { SafeAreaView, View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Switch } from 'react-native';
-import { useUser } from '@/contexts/UserContext';
 import { useAuth } from '@/contexts/AuthContext';
 import { router } from 'expo-router';
 import { DevTools } from '@/components/DevTools';
 import { Dialog } from '@/components/ui/Dialog';
 import { Button } from '@/components/ui/Button';
 
 const ProfileScreen = () => {
-  const { name, height, weight, age } = useUser();
   const { user, logout, isLoading } = useAuth();
   const [notificationsEnabled, setNotificationsEnabled] = useState(false);
   const [showDevTools, setShowDevTools] = useState(false);
   const [showLogoutDialog, setShowLogoutDialog] = useState(false);
 
   const toggleNotifications = () => setNotificationsEnabled(prev => !prev);
 
+  // Calculate age from date of birth
+  const calculateAge = (dateOfBirth: string | undefined): number => {
+    if (!dateOfBirth) return 0;
+    const today = new Date();
+    const birthDate = new Date(dateOfBirth);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDiff = today.getMonth() - birthDate.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+    return age;
+  };
+
+  const age = calculateAge(user?.date_of_birth);
+
   const handleLogout = () => {
     setShowLogoutDialog(true);
   };
@@ -49,7 +62,7 @@ const ProfileScreen = () => {
       <ScrollView contentContainerStyle={styles.content}>
         {/* Profile Box */}
         <View style={styles.profileBox}>
-          <Text style={styles.profileName}>{user?.full_name || name || 'User'}</Text>
+          <Text style={styles.profileName}>{user?.full_name || user?.email || 'User'}</Text>
           <Text style={styles.profileEmail}>{user?.email || 'No email'}</Text>
           <TouchableOpacity style={styles.editBtn}>
             <Text style={styles.editText}>Edit</Text>
@@ -58,11 +71,11 @@ const ProfileScreen = () => {
           <View style={styles.statsRow}>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Height</Text>
-              <Text style={styles.statValue}>{height ? `${height} cm` : '-'}</Text>
+              <Text style={styles.statValue}>{user?.height ? `${user.height} cm` : '-'}</Text>
             </View>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Weight</Text>
-              <Text style={styles.statValue}>{weight ? `${weight} kg` : '-'}</Text>
+              <Text style={styles.statValue}>{user?.weight ? `${user.weight} kg` : '-'}</Text>
             </View>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Age</Text>

KonditionExpo/app/index.tsx

@@ -1,24 +1,38 @@
 import React, { useEffect } from 'react';
 import { View, ActivityIndicator, StyleSheet } from 'react-native';
-import { router } from 'expo-router';
+import { router, useSegments } from 'expo-router';
 import { useAuth } from '@/contexts/AuthContext';
 import { useThemeColor } from '@/hooks/useThemeColor';
 import { ThemedText } from '@/components/ThemedText';
 
 export default function IndexScreen() {
-  const { isAuthenticated, isLoading } = useAuth();
+  const { isAuthenticated, isLoading, isInSignupFlow } = useAuth();
+  const segments = useSegments();
   const backgroundColor = useThemeColor({}, 'background');
   const textColor = useThemeColor({}, 'text');
 
   useEffect(() => {
     if (!isLoading) {
+      // Don't redirect if we're already on a specific route (like signup2)
+      const currentRoute = segments[0];
+      if (currentRoute) {
+        console.log('IndexScreen: Already on route:', currentRoute, '- not redirecting');
+        return;
+      }
+      
+      // Don't redirect if user is in signup flow - let them complete it
+      if (isInSignupFlow) {
+        console.log('IndexScreen: User in signup flow - not redirecting');
+        return;
+      }
+      
       if (isAuthenticated) {
         router.replace('/(tabs)');
       } else {
         router.replace('/login');
       }
     }
-  }, [isAuthenticated, isLoading]);
+  }, [isAuthenticated, isLoading, isInSignupFlow, segments]);
 
   return (
     <View style={[styles.container, { backgroundColor }]}>

KonditionExpo/app/profile.tsx

@@ -1,14 +1,29 @@
 import React, { useState } from 'react';
 import { SafeAreaView, View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Switch } from 'react-native';
-import { useUser } from '@/contexts/UserContext';
+import { useAuth } from '@/contexts/AuthContext';
 import { router } from 'expo-router';
 
 const ProfileScreen = () => {
-  const { name, height, weight, age } = useUser();
+  const { user } = useAuth();
   const [notificationsEnabled, setNotificationsEnabled] = useState(false);
 
   const toggleNotifications = () => setNotificationsEnabled(prev => !prev);
 
+  // Calculate age from date of birth
+  const calculateAge = (dateOfBirth: string | undefined): number => {
+    if (!dateOfBirth) return 0;
+    const today = new Date();
+    const birthDate = new Date(dateOfBirth);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDiff = today.getMonth() - birthDate.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+    return age;
+  };
+
+  const age = calculateAge(user?.date_of_birth);
+
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView contentContainerStyle={styles.content}>
@@ -19,19 +34,19 @@ const ProfileScreen = () => {
 
         {/* Profile Box */}
         <View style={styles.profileBox}>
-          <Text style={styles.profileName}>{name || 'User'}</Text>
+          <Text style={styles.profileName}>{user?.full_name || user?.email || 'User'}</Text>
           <TouchableOpacity style={styles.editBtn}>
             <Text style={styles.editText}>Edit</Text>
           </TouchableOpacity>
 
           <View style={styles.statsRow}>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Height</Text>
-              <Text style={styles.statValue}>{height ? `${height} cm` : '-'}</Text>
+              <Text style={styles.statValue}>{user?.height ? `${user.height} cm` : '-'}</Text>
             </View>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Weight</Text>
-              <Text style={styles.statValue}>{weight ? `${weight} kg` : '-'}</Text>
+              <Text style={styles.statValue}>{user?.weight ? `${user.weight} kg` : '-'}</Text>
             </View>
             <View style={styles.statBox}>
               <Text style={styles.statLabel}>Age</Text>

KonditionExpo/app/signup.tsx

@@ -25,12 +25,8 @@ export default function SignUpScreen() {
   const textColor = useThemeColor({}, 'text');
   const tintColor = useThemeColor({}, 'tint');
 
-  // Redirect if already authenticated
-  useEffect(() => {
-    if (isAuthenticated) {
-      router.replace('/(tabs)');
-    }
-  }, [isAuthenticated]);
+  // Note: We don't redirect authenticated users here anymore since we want them
+  // to complete the profile setup flow after signup
 
   const validateForm = () => {
     const newErrors: typeof errors = {};
@@ -75,12 +71,17 @@ export default function SignUpScreen() {
     }
 
     try {
+      console.log('Starting signup process...');
       await signup({
         email: email.trim(),
         password,
         full_name: fullName.trim(),
       });
-      // Navigation will happen automatically via useEffect when isAuthenticated becomes true
+      
+      console.log('Signup successful, user is now logged in. Navigating to profile completion...');
+      // User is now logged in automatically, redirect to profile completion
+      router.replace('/signup2');
+      console.log('Navigation to profile completion initiated');
     } catch (error) {
       console.error('Signup error:', error);
       Alert.alert(