fitness profile
functionality added, need polishing
This commit is contained in:
dimitar committed
1 parent
64bc4aa58b
commit
b9f33fdcc6
13 files changed
+1590
-7
No files matched your search
Generated
+14
@@ -11,6 +11,7 @@
|
||||
"@clerk/clerk-expo": "^2.18.3",
|
||||
"@expo/vector-icons": "^15.0.0",
|
||||
"@hookform/resolvers": "^3.3.0",
|
||||
"@react-native-picker/picker": "^2.11.4",
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"ajv": "^8.12.0",
|
||||
"ajv-keywords": "^5.1.0",
|
||||
@@ -4027,6 +4028,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-picker/picker": {
|
||||
"version": "2.11.4",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.4.tgz",
|
||||
"integrity": "sha512-Kf8h1AMnBo54b1fdiVylP2P/iFcZqzpMYcglC28EEFB1DEnOjsNr6Ucqc+3R9e91vHxEDnhZFbYDmAe79P2gjA==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"example"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets-registry": {
|
||||
"version": "0.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"@clerk/clerk-expo": "^2.18.3",
|
||||
"@expo/vector-icons": "^15.0.0",
|
||||
"@hookform/resolvers": "^3.3.0",
|
||||
"@react-native-picker/picker": "^2.11.4",
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"ajv": "^8.12.0",
|
||||
"ajv-keywords": "^5.1.0",
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, ScrollView } from "react-native";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useRouter } from "expo-router";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const { user, isLoaded } = useUser();
|
||||
const router = useRouter();
|
||||
|
||||
if (!isLoaded || !user) {
|
||||
return (
|
||||
@@ -51,6 +59,22 @@ export default function HomeScreen() {
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Quick Actions</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.actionButton}
|
||||
onPress={() => router.push("/fitness-profile")}
|
||||
>
|
||||
<View style={styles.actionIcon}>
|
||||
<Ionicons name="fitness-outline" size={24} color="#ec4899" />
|
||||
</View>
|
||||
<View style={styles.actionContent}>
|
||||
<Text style={styles.actionTitle}>Fitness Profile</Text>
|
||||
<Text style={styles.actionSubtitle}>
|
||||
Manage your fitness information
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color="#9ca3af" />
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.actionButton}>
|
||||
<View style={styles.actionIcon}>
|
||||
<Ionicons name="log-in-outline" size={24} color="#2563eb" />
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useAuth } from "@clerk/clerk-expo";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Input } from "../components/Input";
|
||||
import { Picker } from "../components/Picker";
|
||||
|
||||
interface FitnessProfileData {
|
||||
height?: number;
|
||||
weight?: number;
|
||||
age?: number;
|
||||
gender?: string;
|
||||
fitnessGoal?: string;
|
||||
activityLevel?: string;
|
||||
medicalConditions?: string;
|
||||
allergies?: string;
|
||||
injuries?: string;
|
||||
}
|
||||
|
||||
export default function FitnessProfileScreen() {
|
||||
const router = useRouter();
|
||||
const { userId, getToken } = useAuth();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fetchingProfile, setFetchingProfile] = useState(true);
|
||||
const [profileData, setProfileData] = useState<FitnessProfileData>({});
|
||||
|
||||
const genderOptions = [
|
||||
{ label: "Male", value: "male" },
|
||||
{ label: "Female", value: "female" },
|
||||
{ label: "Other", value: "other" },
|
||||
{ label: "Prefer not to say", value: "prefer_not_to_say" },
|
||||
];
|
||||
|
||||
const fitnessGoalOptions = [
|
||||
{ label: "Weight Loss", value: "weight_loss" },
|
||||
{ label: "Muscle Gain", value: "muscle_gain" },
|
||||
{ label: "Endurance", value: "endurance" },
|
||||
{ label: "Flexibility", value: "flexibility" },
|
||||
{ label: "General Fitness", value: "general_fitness" },
|
||||
];
|
||||
|
||||
const activityLevelOptions = [
|
||||
{ label: "Sedentary", value: "sedentary" },
|
||||
{ label: "Lightly Active", value: "lightly_active" },
|
||||
{ label: "Moderately Active", value: "moderately_active" },
|
||||
{ label: "Very Active", value: "very_active" },
|
||||
{ label: "Extremely Active", value: "extremely_active" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
setFetchingProfile(true);
|
||||
const token = await getToken();
|
||||
const apiUrl = process.env.EXPO_PUBLIC_API_URL || "http://localhost:3000";
|
||||
const response = await fetch(`${apiUrl}/api/fitness-profile`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.profile) {
|
||||
setProfileData({
|
||||
height: data.profile.height,
|
||||
weight: data.profile.weight,
|
||||
age: data.profile.age,
|
||||
gender: data.profile.gender || "",
|
||||
fitnessGoal: data.profile.fitnessGoal || "",
|
||||
activityLevel: data.profile.activityLevel || "",
|
||||
medicalConditions: data.profile.medicalConditions || "",
|
||||
allergies: data.profile.allergies || "",
|
||||
injuries: data.profile.injuries || "",
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching profile:", error);
|
||||
} finally {
|
||||
setFetchingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const token = await getToken();
|
||||
const apiUrl = process.env.EXPO_PUBLIC_API_URL || "http://localhost:3000";
|
||||
|
||||
const response = await fetch(`${apiUrl}/api/fitness-profile`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(profileData),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
Alert.alert("Success", "Fitness profile saved successfully!", [
|
||||
{ text: "OK", onPress: () => router.back() },
|
||||
]);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
Alert.alert("Error", error.message || "Failed to save profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error saving profile:", error);
|
||||
Alert.alert("Error", "Failed to save fitness profile");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateField = (field: keyof FitnessProfileData, value: any) => {
|
||||
setProfileData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
if (fetchingProfile) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#2563eb" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
style={styles.backButton}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={24} color="#1f2937" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Fitness Profile</Text>
|
||||
<View style={styles.headerSpacer} />
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Basic Information</Text>
|
||||
|
||||
<Input
|
||||
label="Height (cm)"
|
||||
value={profileData.height?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField("height", text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="e.g., 175"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Weight (kg)"
|
||||
value={profileData.weight?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField("weight", text ? parseFloat(text) : undefined)
|
||||
}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="e.g., 70"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Age"
|
||||
value={profileData.age?.toString() || ""}
|
||||
onChangeText={(text) =>
|
||||
updateField("age", text ? parseInt(text, 10) : undefined)
|
||||
}
|
||||
keyboardType="number-pad"
|
||||
placeholder="e.g., 25"
|
||||
/>
|
||||
|
||||
<Picker
|
||||
label="Gender"
|
||||
value={profileData.gender || ""}
|
||||
onValueChange={(value) => updateField("gender", value)}
|
||||
items={genderOptions}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Fitness Goals</Text>
|
||||
|
||||
<Picker
|
||||
label="Primary Goal"
|
||||
value={profileData.fitnessGoal || ""}
|
||||
onValueChange={(value) => updateField("fitnessGoal", value)}
|
||||
items={fitnessGoalOptions}
|
||||
/>
|
||||
|
||||
<Picker
|
||||
label="Activity Level"
|
||||
value={profileData.activityLevel || ""}
|
||||
onValueChange={(value) => updateField("activityLevel", value)}
|
||||
items={activityLevelOptions}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Health Information</Text>
|
||||
|
||||
<Input
|
||||
label="Medical Conditions (optional)"
|
||||
value={profileData.medicalConditions || ""}
|
||||
onChangeText={(text) => updateField("medicalConditions", text)}
|
||||
placeholder="e.g., Asthma, diabetes..."
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
style={styles.textArea}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Allergies (optional)"
|
||||
value={profileData.allergies || ""}
|
||||
onChangeText={(text) => updateField("allergies", text)}
|
||||
placeholder="e.g., Peanuts, latex..."
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
style={styles.textArea}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Injuries (optional)"
|
||||
value={profileData.injuries || ""}
|
||||
onChangeText={(text) => updateField("injuries", text)}
|
||||
placeholder="e.g., Previous knee injury..."
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
style={styles.textArea}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.saveButton, loading && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="white" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons
|
||||
name="checkmark-circle-outline"
|
||||
size={20}
|
||||
color="white"
|
||||
/>
|
||||
<Text style={styles.saveButtonText}>Save Profile</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f9fafb",
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f9fafb",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 16,
|
||||
backgroundColor: "white",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#e5e7eb",
|
||||
},
|
||||
backButton: {
|
||||
padding: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: "#1f2937",
|
||||
},
|
||||
headerSpacer: {
|
||||
width: 32,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
section: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#1f2937",
|
||||
marginBottom: 16,
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: "top",
|
||||
paddingTop: 12,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: "#2563eb",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginTop: 8,
|
||||
marginBottom: 40,
|
||||
},
|
||||
saveButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: "white",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
marginLeft: 8,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { View, Text, TextInput, StyleSheet, TextInputProps } from "react-native";
|
||||
|
||||
interface InputProps extends TextInputProps {
|
||||
label: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function Input({ label, error, style, ...props }: InputProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<TextInput
|
||||
style={[styles.input, error && styles.inputError, style]}
|
||||
placeholderTextColor="#9ca3af"
|
||||
{...props}
|
||||
/>
|
||||
{error && <Text style={styles.errorText}>{error}</Text>}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
color: "#1f2937",
|
||||
},
|
||||
inputError: {
|
||||
borderColor: "#ef4444",
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 12,
|
||||
color: "#ef4444",
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import { Picker as RNPicker } from "@react-native-picker/picker";
|
||||
|
||||
interface PickerProps {
|
||||
label: string;
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
items: { label: string; value: string }[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function Picker({ label, value, onValueChange, items, error }: PickerProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<View style={[styles.pickerWrapper, error && styles.pickerError]}>
|
||||
<RNPicker
|
||||
selectedValue={value}
|
||||
onValueChange={onValueChange}
|
||||
style={styles.picker}
|
||||
>
|
||||
<RNPicker.Item label="Select..." value="" />
|
||||
{items.map((item) => (
|
||||
<RNPicker.Item key={item.value} label={item.label} value={item.value} />
|
||||
))}
|
||||
</RNPicker>
|
||||
</View>
|
||||
{error && <Text style={styles.errorText}>{error}</Text>}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 8,
|
||||
},
|
||||
pickerWrapper: {
|
||||
backgroundColor: "white",
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
borderRadius: 8,
|
||||
overflow: "hidden",
|
||||
},
|
||||
pickerError: {
|
||||
borderColor: "#ef4444",
|
||||
},
|
||||
picker: {
|
||||
height: 50,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 12,
|
||||
color: "#ef4444",
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user