297 lines
9.5 KiB
TypeScript
297 lines
9.5 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
RefreshControl,
|
|
Alert,
|
|
} from "react-native";
|
|
import { useAuth } from "@clerk/clerk-expo";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { fitnessGoalsService, type FitnessGoal, type CreateGoalData } from "../../services/fitnessGoals";
|
|
import { GoalProgressCard } from "../../components/GoalProgressCard";
|
|
import { GoalCreationModal } from "../../components/GoalCreationModal";
|
|
|
|
export default function GoalsScreen() {
|
|
const { userId, getToken } = useAuth();
|
|
const [goals, setGoals] = useState<FitnessGoal[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
|
|
const fetchGoals = async () => {
|
|
if (!userId) return;
|
|
try {
|
|
const token = await getToken();
|
|
const data = await fitnessGoalsService.getGoals(userId, token);
|
|
setGoals(data);
|
|
} catch (error) {
|
|
console.error("Error fetching fitness goals:", error);
|
|
Alert.alert("Error", "Failed to load goals. Please try again.");
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchGoals();
|
|
}, [userId]);
|
|
|
|
const onRefresh = () => {
|
|
setRefreshing(true);
|
|
fetchGoals();
|
|
};
|
|
|
|
const handleCreateGoal = async (goalData: CreateGoalData) => {
|
|
try {
|
|
const token = await getToken();
|
|
const newGoal = await fitnessGoalsService.createGoal(goalData, token);
|
|
setGoals(prev => [newGoal, ...prev]);
|
|
Alert.alert("Success", "Goal created successfully!");
|
|
} catch (error) {
|
|
console.error("Error creating goal:", error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleCompleteGoal = async (goalId: string) => {
|
|
try {
|
|
const token = await getToken();
|
|
const updatedGoal = await fitnessGoalsService.completeGoal(goalId, token);
|
|
setGoals(prev => prev.map(g => g.id === goalId ? updatedGoal : g));
|
|
Alert.alert("Success", "Goal completed! 🎉");
|
|
} catch (error) {
|
|
console.error("Error completing goal:", error);
|
|
Alert.alert("Error", "Failed to complete goal. Please try again.");
|
|
}
|
|
};
|
|
|
|
const handleDeleteGoal = async (goalId: string) => {
|
|
try {
|
|
const token = await getToken();
|
|
await fitnessGoalsService.deleteGoal(goalId, token);
|
|
setGoals(prev => prev.filter(g => g.id !== goalId));
|
|
Alert.alert("Success", "Goal deleted");
|
|
} catch (error) {
|
|
console.error("Error deleting goal:", error);
|
|
Alert.alert("Error", "Failed to delete goal. Please try again.");
|
|
}
|
|
};
|
|
|
|
const activeGoals = goals.filter(g => g.status === 'active');
|
|
const completedGoals = goals.filter(g => g.status === 'completed');
|
|
|
|
if (loading && !refreshing) {
|
|
return (
|
|
<View style={styles.center}>
|
|
<ActivityIndicator size="large" color="#2563eb" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView
|
|
refreshControl={
|
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
|
}
|
|
>
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text style={styles.headerTitle}>My Fitness Goals</Text>
|
|
<Text style={styles.headerSubtitle}>
|
|
Track your fitness journey progress
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Stats Summary */}
|
|
{goals.length > 0 && (
|
|
<View style={styles.statsContainer}>
|
|
<View style={styles.statCard}>
|
|
<Text style={styles.statValue}>{activeGoals.length}</Text>
|
|
<Text style={styles.statLabel}>Active</Text>
|
|
</View>
|
|
<View style={styles.statCard}>
|
|
<Text style={styles.statValue}>{completedGoals.length}</Text>
|
|
<Text style={styles.statLabel}>Completed</Text>
|
|
</View>
|
|
<View style={styles.statCard}>
|
|
<Text style={styles.statValue}>
|
|
{activeGoals.length > 0
|
|
? Math.round(
|
|
activeGoals.reduce((sum, g) => sum + g.progress, 0) /
|
|
activeGoals.length
|
|
)
|
|
: 0}%
|
|
</Text>
|
|
<Text style={styles.statLabel}>Avg Progress</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Active Goals */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>
|
|
Active Goals ({activeGoals.length})
|
|
</Text>
|
|
{activeGoals.length === 0 ? (
|
|
<View style={styles.emptyState}>
|
|
<Ionicons name="flag-outline" size={48} color="#d1d5db" />
|
|
<Text style={styles.emptyText}>No active goals yet</Text>
|
|
<Text style={styles.emptySubtext}>
|
|
Tap the + button to create your first goal
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
activeGoals.map((goal) => (
|
|
<GoalProgressCard
|
|
key={goal.id}
|
|
goal={goal}
|
|
onComplete={() => handleCompleteGoal(goal.id)}
|
|
onDelete={() => handleDeleteGoal(goal.id)}
|
|
/>
|
|
))
|
|
)}
|
|
</View>
|
|
|
|
{/* Completed Goals */}
|
|
{completedGoals.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>
|
|
Completed Goals ({completedGoals.length})
|
|
</Text>
|
|
{completedGoals.map((goal) => (
|
|
<GoalProgressCard
|
|
key={goal.id}
|
|
goal={goal}
|
|
onDelete={() => handleDeleteGoal(goal.id)}
|
|
/>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.footer} />
|
|
</ScrollView>
|
|
|
|
{/* Floating Action Button */}
|
|
<TouchableOpacity
|
|
style={styles.fab}
|
|
onPress={() => setShowCreateModal(true)}
|
|
>
|
|
<Ionicons name="add" size={28} color="#fff" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Create Goal Modal */}
|
|
<GoalCreationModal
|
|
visible={showCreateModal}
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSubmit={handleCreateGoal}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#f3f4f6",
|
|
},
|
|
center: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
header: {
|
|
padding: 20,
|
|
backgroundColor: "#fff",
|
|
marginBottom: 10,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 28,
|
|
fontWeight: "bold",
|
|
color: "#111827",
|
|
},
|
|
headerSubtitle: {
|
|
fontSize: 16,
|
|
color: "#6b7280",
|
|
marginTop: 4,
|
|
},
|
|
statsContainer: {
|
|
flexDirection: "row",
|
|
padding: 16,
|
|
gap: 12,
|
|
},
|
|
statCard: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
},
|
|
statValue: {
|
|
fontSize: 24,
|
|
fontWeight: "bold",
|
|
color: "#2563eb",
|
|
marginBottom: 4,
|
|
},
|
|
statLabel: {
|
|
fontSize: 12,
|
|
color: "#6b7280",
|
|
fontWeight: "500",
|
|
},
|
|
section: {
|
|
padding: 20,
|
|
paddingTop: 10,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "600",
|
|
color: "#374151",
|
|
marginBottom: 12,
|
|
},
|
|
emptyState: {
|
|
alignItems: "center",
|
|
paddingVertical: 40,
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
fontWeight: "500",
|
|
color: "#6b7280",
|
|
marginTop: 12,
|
|
},
|
|
emptySubtext: {
|
|
fontSize: 14,
|
|
color: "#9ca3af",
|
|
marginTop: 4,
|
|
},
|
|
footer: {
|
|
height: 100,
|
|
},
|
|
fab: {
|
|
position: "absolute",
|
|
right: 20,
|
|
bottom: 20,
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: "#2563eb",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
elevation: 8,
|
|
},
|
|
});
|