dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fitness profile validation error fixed

Browse Source
This commit is contained in:
echo 2026-03-12 16:45:38 +01:00
parent 96db3ea3b7
commit 254a30ff93
1 changed files with 208 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
apps/mobile/src/app/fitness-profile.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { import {
View, View,
Text, Text,
@ -9,13 +9,13 @@ import {
Alert, Alert,
TextInput, TextInput,
Platform, Platform,
} from 'react-native'; } from "react-native";
import { useRouter, Stack } from 'expo-router'; import { useRouter, Stack } from "expo-router";
import { useAuth } from '@clerk/clerk-expo'; import { useAuth } from "@clerk/clerk-expo";
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from "expo-linear-gradient";
import { theme } from '../styles/theme'; import { theme } from "../styles/theme";
import { API_BASE_URL } from '../config/api'; import { API_BASE_URL } from "../config/api";
interface FitnessProfileData { interface FitnessProfileData {
height?: number; height?: number;
@ -30,25 +30,71 @@ interface FitnessProfileData {
} }
const GENDER_OPTIONS = [ const GENDER_OPTIONS = [
{ label: 'Male', value: 'male', icon: 'male' }, { label: "Male", value: "male", icon: "male" },
{ label: 'Female', value: 'female', icon: 'female' }, { label: "Female", value: "female", icon: "female" },
{ label: 'Other', value: 'other', icon: 'transgender' }, { label: "Other", value: "other", icon: "transgender" },
{
label: "Prefer not to say",
value: "prefer_not_to_say",
icon: "help-circle",
},
]; ];
const FITNESS_GOAL_OPTIONS = [ const FITNESS_GOAL_OPTIONS = [
{ label: 'Weight Loss', value: 'weight_loss', icon: 'trending-down', color: theme.colors.danger }, {
{ label: 'Muscle Gain', value: 'muscle_gain', icon: 'barbell', color: theme.colors.primary }, label: "Weight Loss",
{ label: 'Endurance', value: 'endurance', icon: 'bicycle', color: theme.colors.success }, value: "weight_loss",
{ label: 'Flexibility', value: 'flexibility', icon: 'body', color: theme.colors.purple }, icon: "trending-down",
{ label: 'General Fitness', value: 'general_fitness', icon: 'fitness', color: theme.colors.warning }, color: theme.colors.danger,
},
{
label: "Muscle Gain",
value: "muscle_gain",
icon: "barbell",
color: theme.colors.primary,
},
{
label: "Endurance",
value: "endurance",
icon: "bicycle",
color: theme.colors.success,
},
{
label: "Flexibility",
value: "flexibility",
icon: "body",
color: theme.colors.purple,
},
{
label: "General Fitness",
value: "general_fitness",
icon: "fitness",
color: theme.colors.warning,
},
]; ];
const ACTIVITY_LEVEL_OPTIONS = [ const ACTIVITY_LEVEL_OPTIONS = [
{ label: 'Sedentary', value: 'sedentary', description: 'Little to no exercise' }, {
{ label: 'Light', value: 'light', description: '1-3 days/week' }, label: "Sedentary",
{ label: 'Moderate', value: 'moderate', description: '3-5 days/week' }, value: "sedentary",
{ label: 'Active', value: 'active', description: '6-7 days/week' }, description: "Little to no exercise",
{ label: 'Very Active', value: 'very_active', description: 'Intense daily training' }, },
{
label: "Lightly Active",
value: "lightly_active",
description: "1-3 days/week",
},
{
label: "Moderately Active",
value: "moderately_active",
description: "3-5 days/week",
},
{ label: "Very Active", value: "very_active", description: "6-7 days/week" },
{
label: "Extremely Active",
value: "extremely_active",
description: "Intense daily training",
},
]; ];
export default function FitnessProfileScreen() { export default function FitnessProfileScreen() {
@ -66,34 +112,43 @@ export default function FitnessProfileScreen() {
try { try {
setFetchingProfile(true); setFetchingProfile(true);
const token = await getToken(); const token = await getToken();
const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, { const response = await fetch(
headers: { `${API_BASE_URL}/api/profile/fitness?userId=${userId}`,
Authorization: `Bearer ${token}`, {
headers: {
Authorization: `Bearer ${token}`,
},
}, },
}); );
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
if (data.profile) { if (data.profile) {
// Normalize old activity level values to new schema
let activityLevel = data.profile.activityLevel || "";
if (activityLevel === "light") activityLevel = "lightly_active";
if (activityLevel === "moderate") activityLevel = "moderately_active";
if (activityLevel === "active") activityLevel = "very_active";
setProfileData({ setProfileData({
height: data.profile.height, height: data.profile.height,
weight: data.profile.weight, weight: data.profile.weight,
age: data.profile.age, age: data.profile.age,
gender: data.profile.gender || '', gender: data.profile.gender || "",
fitnessGoal: Array.isArray(data.profile.fitnessGoals) fitnessGoal: Array.isArray(data.profile.fitnessGoals)
? data.profile.fitnessGoals[0] ? data.profile.fitnessGoals[0]
: (typeof data.profile.fitnessGoals === 'string' : typeof data.profile.fitnessGoals === "string"
? JSON.parse(data.profile.fitnessGoals)[0] ? JSON.parse(data.profile.fitnessGoals)[0]
: ''), : "",
activityLevel: data.profile.activityLevel || '', activityLevel: activityLevel,
medicalConditions: data.profile.medicalConditions || '', medicalConditions: data.profile.medicalConditions || "",
allergies: data.profile.allergies || '', allergies: data.profile.allergies || "",
injuries: data.profile.injuries || '', injuries: data.profile.injuries || "",
}); });
} }
} }
} catch (error) { } catch (error) {
console.error('Error fetching profile:', error); console.error("Error fetching profile:", error);
} finally { } finally {
setFetchingProfile(false); setFetchingProfile(false);
} }
@ -119,25 +174,25 @@ export default function FitnessProfileScreen() {
}; };
const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, { const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
body: JSON.stringify(dataToSave), body: JSON.stringify(dataToSave),
}); });
if (response.ok) { if (response.ok) {
Alert.alert('Success', 'Fitness profile saved successfully!', [ Alert.alert("Success", "Fitness profile saved successfully!", [
{ text: 'OK', onPress: () => router.back() }, { text: "OK", onPress: () => router.back() },
]); ]);
} else { } else {
const error = await response.json(); const error = await response.json();
Alert.alert('Error', error.error || 'Failed to save profile'); Alert.alert("Error", error.error || "Failed to save profile");
} }
} catch (error) { } catch (error) {
console.error('Error saving profile:', error); console.error("Error saving profile:", error);
Alert.alert('Error', 'Failed to save fitness profile'); Alert.alert("Error", "Failed to save fitness profile");
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -161,7 +216,10 @@ export default function FitnessProfileScreen() {
<View style={styles.container}> <View style={styles.container}>
{/* Header */} {/* Header */}
<LinearGradient colors={theme.gradients.primary} style={styles.header}> <LinearGradient colors={theme.gradients.primary} style={styles.header}>
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}> <TouchableOpacity
style={styles.backButton}
onPress={() => router.back()}
>
<Ionicons name="arrow-back" size={24} color="#fff" /> <Ionicons name="arrow-back" size={24} color="#fff" />
</TouchableOpacity> </TouchableOpacity>
<Text style={styles.headerTitle}>Fitness Profile</Text> <Text style={styles.headerTitle}>Fitness Profile</Text>
@ -181,12 +239,19 @@ export default function FitnessProfileScreen() {
<View style={styles.inputGroup}> <View style={styles.inputGroup}>
<Text style={styles.label}>Height (cm)</Text> <Text style={styles.label}>Height (cm)</Text>
<View style={styles.inputContainer}> <View style={styles.inputContainer}>
<Ionicons name="resize-outline" size={20} color={theme.colors.gray400} /> <Ionicons
name="resize-outline"
size={20}
color={theme.colors.gray400}
/>
<TextInput <TextInput
style={styles.input} style={styles.input}
value={profileData.height?.toString() || ''} value={profileData.height?.toString() || ""}
onChangeText={(text) => onChangeText={(text) =>
updateField('height', text ? parseFloat(text) : undefined) updateField(
"height",
text ? parseFloat(text) : undefined,
)
} }
keyboardType="decimal-pad" keyboardType="decimal-pad"
placeholder="175" placeholder="175"
@ -197,12 +262,19 @@ export default function FitnessProfileScreen() {
<View style={styles.inputGroup}> <View style={styles.inputGroup}>
<Text style={styles.label}>Weight (kg)</Text> <Text style={styles.label}>Weight (kg)</Text>
<View style={styles.inputContainer}> <View style={styles.inputContainer}>
<Ionicons name="scale-outline" size={20} color={theme.colors.gray400} /> <Ionicons
name="scale-outline"
size={20}
color={theme.colors.gray400}
/>
<TextInput <TextInput
style={styles.input} style={styles.input}
value={profileData.weight?.toString() || ''} value={profileData.weight?.toString() || ""}
onChangeText={(text) => onChangeText={(text) =>
updateField('weight', text ? parseFloat(text) : undefined) updateField(
"weight",
text ? parseFloat(text) : undefined,
)
} }
keyboardType="decimal-pad" keyboardType="decimal-pad"
placeholder="70" placeholder="70"
@ -214,12 +286,16 @@ export default function FitnessProfileScreen() {
<View style={styles.inputGroup}> <View style={styles.inputGroup}>
<Text style={styles.label}>Age</Text> <Text style={styles.label}>Age</Text>
<View style={styles.inputContainer}> <View style={styles.inputContainer}>
<Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} /> <Ionicons
name="calendar-outline"
size={20}
color={theme.colors.gray400}
/>
<TextInput <TextInput
style={styles.input} style={styles.input}
value={profileData.age?.toString() || ''} value={profileData.age?.toString() || ""}
onChangeText={(text) => onChangeText={(text) =>
updateField('age', text ? parseInt(text, 10) : undefined) updateField("age", text ? parseInt(text, 10) : undefined)
} }
keyboardType="number-pad" keyboardType="number-pad"
placeholder="25" placeholder="25"
@ -239,9 +315,10 @@ export default function FitnessProfileScreen() {
key={option.value} key={option.value}
style={[ style={[
styles.optionCard, styles.optionCard,
profileData.gender === option.value && styles.optionCardActive, profileData.gender === option.value &&
styles.optionCardActive,
]} ]}
onPress={() => updateField('gender', option.value)} onPress={() => updateField("gender", option.value)}
> >
<Ionicons <Ionicons
name={option.icon as any} name={option.icon as any}
@ -255,7 +332,8 @@ export default function FitnessProfileScreen() {
<Text <Text
style={[ style={[
styles.optionLabel, styles.optionLabel,
profileData.gender === option.value && styles.optionLabelActive, profileData.gender === option.value &&
styles.optionLabelActive,
]} ]}
> >
{option.label} {option.label}
@ -273,17 +351,32 @@ export default function FitnessProfileScreen() {
<React.Fragment key={option.value}> <React.Fragment key={option.value}>
<TouchableOpacity <TouchableOpacity
style={styles.listItem} style={styles.listItem}
onPress={() => updateField('fitnessGoal', option.value)} onPress={() => updateField("fitnessGoal", option.value)}
> >
<View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}> <View
<Ionicons name={option.icon as any} size={20} color={option.color} /> style={[
styles.iconCircle,
{ backgroundColor: `${option.color}20` },
]}
>
<Ionicons
name={option.icon as any}
size={20}
color={option.color}
/>
</View> </View>
<Text style={styles.listItemText}>{option.label}</Text> <Text style={styles.listItemText}>{option.label}</Text>
{profileData.fitnessGoal === option.value && ( {profileData.fitnessGoal === option.value && (
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} /> <Ionicons
name="checkmark-circle"
size={24}
color={theme.colors.primary}
/>
)} )}
</TouchableOpacity> </TouchableOpacity>
{index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />} {index < FITNESS_GOAL_OPTIONS.length - 1 && (
<View style={styles.divider} />
)}
</React.Fragment> </React.Fragment>
))} ))}
</View> </View>
@ -297,17 +390,25 @@ export default function FitnessProfileScreen() {
<React.Fragment key={option.value}> <React.Fragment key={option.value}>
<TouchableOpacity <TouchableOpacity
style={styles.listItem} style={styles.listItem}
onPress={() => updateField('activityLevel', option.value)} onPress={() => updateField("activityLevel", option.value)}
> >
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={styles.listItemText}>{option.label}</Text> <Text style={styles.listItemText}>{option.label}</Text>
<Text style={styles.listItemDescription}>{option.description}</Text> <Text style={styles.listItemDescription}>
{option.description}
</Text>
</View> </View>
{profileData.activityLevel === option.value && ( {profileData.activityLevel === option.value && (
<Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} /> <Ionicons
name="checkmark-circle"
size={24}
color={theme.colors.primary}
/>
)} )}
</TouchableOpacity> </TouchableOpacity>
{index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />} {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && (
<View style={styles.divider} />
)}
</React.Fragment> </React.Fragment>
))} ))}
</View> </View>
@ -315,14 +416,18 @@ export default function FitnessProfileScreen() {
{/* Health Information */} {/* Health Information */}
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionTitle}>Health Information (Optional)</Text> <Text style={styles.sectionTitle}>
Health Information (Optional)
</Text>
<View style={styles.card}> <View style={styles.card}>
<View style={styles.inputGroup}> <View style={styles.inputGroup}>
<Text style={styles.label}>Medical Conditions</Text> <Text style={styles.label}>Medical Conditions</Text>
<TextInput <TextInput
style={[styles.textArea]} style={[styles.textArea]}
value={profileData.medicalConditions || ''} value={profileData.medicalConditions || ""}
onChangeText={(text) => updateField('medicalConditions', text)} onChangeText={(text) =>
updateField("medicalConditions", text)
}
placeholder="e.g., Asthma, diabetes..." placeholder="e.g., Asthma, diabetes..."
placeholderTextColor={theme.colors.gray400} placeholderTextColor={theme.colors.gray400}
multiline multiline
@ -334,8 +439,8 @@ export default function FitnessProfileScreen() {
<Text style={styles.label}>Allergies</Text> <Text style={styles.label}>Allergies</Text>
<TextInput <TextInput
style={[styles.textArea]} style={[styles.textArea]}
value={profileData.allergies || ''} value={profileData.allergies || ""}
onChangeText={(text) => updateField('allergies', text)} onChangeText={(text) => updateField("allergies", text)}
placeholder="e.g., Peanuts, latex..." placeholder="e.g., Peanuts, latex..."
placeholderTextColor={theme.colors.gray400} placeholderTextColor={theme.colors.gray400}
multiline multiline
@ -347,8 +452,8 @@ export default function FitnessProfileScreen() {
<Text style={styles.label}>Injuries</Text> <Text style={styles.label}>Injuries</Text>
<TextInput <TextInput
style={[styles.textArea]} style={[styles.textArea]}
value={profileData.injuries || ''} value={profileData.injuries || ""}
onChangeText={(text) => updateField('injuries', text)} onChangeText={(text) => updateField("injuries", text)}
placeholder="e.g., Previous knee injury..." placeholder="e.g., Previous knee injury..."
placeholderTextColor={theme.colors.gray400} placeholderTextColor={theme.colors.gray400}
multiline multiline
@ -367,7 +472,10 @@ export default function FitnessProfileScreen() {
onPress={handleSave} onPress={handleSave}
disabled={loading} disabled={loading}
> >
<LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}> <LinearGradient
colors={theme.gradients.primary}
style={styles.saveButtonGradient}
>
{loading ? ( {loading ? (
<ActivityIndicator color="#fff" /> <ActivityIndicator color="#fff" />
) : ( ) : (
@ -391,15 +499,15 @@ const styles = StyleSheet.create({
}, },
loadingContainer: { loadingContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
backgroundColor: theme.colors.background, backgroundColor: theme.colors.background,
}, },
header: { header: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
justifyContent: 'space-between', justifyContent: "space-between",
paddingTop: Platform.OS === 'ios' ? 60 : 40, paddingTop: Platform.OS === "ios" ? 60 : 40,
paddingBottom: 20, paddingBottom: 20,
paddingHorizontal: 20, paddingHorizontal: 20,
}, },
@ -407,14 +515,14 @@ const styles = StyleSheet.create({
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 20, borderRadius: 20,
backgroundColor: 'rgba(255, 255, 255, 0.2)', backgroundColor: "rgba(255, 255, 255, 0.2)",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
}, },
headerTitle: { headerTitle: {
fontSize: theme.typography.fontSize['2xl'], fontSize: theme.typography.fontSize["2xl"],
fontWeight: theme.typography.fontWeight.bold, fontWeight: theme.typography.fontWeight.bold,
color: '#fff', color: "#fff",
}, },
scrollView: { scrollView: {
flex: 1, flex: 1,
@ -433,7 +541,7 @@ const styles = StyleSheet.create({
marginBottom: 12, marginBottom: 12,
}, },
card: { card: {
backgroundColor: '#fff', backgroundColor: "#fff",
borderRadius: theme.borderRadius.xl, borderRadius: theme.borderRadius.xl,
padding: 16, padding: 16,
...theme.shadows.subtle, ...theme.shadows.subtle,
@ -441,7 +549,7 @@ const styles = StyleSheet.create({
borderColor: theme.colors.gray100, borderColor: theme.colors.gray100,
}, },
row: { row: {
flexDirection: 'row', flexDirection: "row",
gap: 12, gap: 12,
marginBottom: 16, marginBottom: 16,
}, },
@ -456,8 +564,8 @@ const styles = StyleSheet.create({
marginBottom: 8, marginBottom: 8,
}, },
inputContainer: { inputContainer: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
backgroundColor: theme.colors.gray50, backgroundColor: theme.colors.gray50,
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
borderWidth: 1, borderWidth: 1,
@ -482,15 +590,15 @@ const styles = StyleSheet.create({
minHeight: 80, minHeight: 80,
}, },
optionsRow: { optionsRow: {
flexDirection: 'row', flexDirection: "row",
gap: 12, gap: 12,
}, },
optionCard: { optionCard: {
flex: 1, flex: 1,
backgroundColor: '#fff', backgroundColor: "#fff",
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
padding: 16, padding: 16,
alignItems: 'center', alignItems: "center",
gap: 8, gap: 8,
borderWidth: 2, borderWidth: 2,
borderColor: theme.colors.gray200, borderColor: theme.colors.gray200,
@ -510,8 +618,8 @@ const styles = StyleSheet.create({
fontWeight: theme.typography.fontWeight.bold, fontWeight: theme.typography.fontWeight.bold,
}, },
listItem: { listItem: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
paddingVertical: 12, paddingVertical: 12,
gap: 12, gap: 12,
}, },
@ -519,8 +627,8 @@ const styles = StyleSheet.create({
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 20, borderRadius: 20,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
}, },
listItemText: { listItemText: {
flex: 1, flex: 1,
@ -538,25 +646,25 @@ const styles = StyleSheet.create({
backgroundColor: theme.colors.gray100, backgroundColor: theme.colors.gray100,
}, },
footer: { footer: {
position: 'absolute', position: "absolute",
bottom: 0, bottom: 0,
left: 0, left: 0,
right: 0, right: 0,
padding: 20, padding: 20,
paddingBottom: Platform.OS === 'ios' ? 40 : 20, paddingBottom: Platform.OS === "ios" ? 40 : 20,
backgroundColor: '#fff', backgroundColor: "#fff",
borderTopWidth: 1, borderTopWidth: 1,
borderTopColor: theme.colors.gray100, borderTopColor: theme.colors.gray100,
...theme.shadows.medium, ...theme.shadows.medium,
}, },
saveButton: { saveButton: {
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
overflow: 'hidden', overflow: "hidden",
}, },
saveButtonGradient: { saveButtonGradient: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
paddingVertical: 16, paddingVertical: 16,
gap: 8, gap: 8,
}, },
@ -566,6 +674,6 @@ const styles = StyleSheet.create({
saveButtonText: { saveButtonText: {
fontSize: theme.typography.fontSize.base, fontSize: theme.typography.fontSize.base,
fontWeight: theme.typography.fontWeight.bold, fontWeight: theme.typography.fontWeight.bold,
color: '#fff', color: "#fff",
}, },
}); });