redesign take 1
This commit is contained in:
dimitar committed
1 parent
1143f8ca02
commit
e3a3c3fccf
19 files changed
+2783
-1493
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback, useRef } from "react";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -6,27 +6,31 @@ import {
|
||||
ScrollView,
|
||||
RefreshControl,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { theme } from "../../styles/theme";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import { useTheme } from "../../contexts/ThemeContext";
|
||||
import { MinimalCard } from "../../components/MinimalCard";
|
||||
import { SectionHeader } from "../../components/SectionHeader";
|
||||
import { MinimalButton } from "../../components/MinimalButton";
|
||||
import { Badge } from "../../components/Badge";
|
||||
import { ProgressBar } from "../../components/ProgressBar";
|
||||
import { GoalProgressCard } from "../../components/GoalProgressCard";
|
||||
import { GoalCreationModal } from "../../components/GoalCreationModal";
|
||||
import { WeeklyProgressChart } from "../../components/WeeklyProgressChart";
|
||||
import { GoalTypeBreakdownChart } from "../../components/GoalTypeBreakdownChart";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
import type { FitnessGoal, CreateGoalData } from "../../services/fitnessGoals";
|
||||
import { useStatistics } from "../../contexts/StatisticsContext";
|
||||
import { useFitnessGoals } from "../../contexts/FitnessGoalsContext";
|
||||
import { useRecommendations } from "../../contexts/RecommendationsContext";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import log from "../../utils/logger";
|
||||
|
||||
export default function GoalsScreen() {
|
||||
const { user } = useUser();
|
||||
const { colors, typography } = useTheme();
|
||||
const {
|
||||
statistics,
|
||||
refetchStatistics,
|
||||
@@ -45,10 +49,8 @@ export default function GoalsScreen() {
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [showAnalytics, setShowAnalytics] = useState(false);
|
||||
const fabScale = useRef(new Animated.Value(1)).current;
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
// Load goals and statistics (both cached)
|
||||
await refetchGoals();
|
||||
await refetchStatistics();
|
||||
}, [refetchGoals, refetchStatistics]);
|
||||
@@ -64,7 +66,6 @@ export default function GoalsScreen() {
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
try {
|
||||
// Clear all possible Clerk token keys
|
||||
const keysToDelete = [
|
||||
"__clerk_client_jwt",
|
||||
"__clerk_db_jwt",
|
||||
@@ -82,7 +83,6 @@ export default function GoalsScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
// Clear all caches
|
||||
clearStatsCache();
|
||||
clearGoalsCache();
|
||||
clearRecommendationsCache();
|
||||
@@ -128,183 +128,237 @@ export default function GoalsScreen() {
|
||||
|
||||
const activeGoals = goals?.filter((g) => g.status === "active") || [];
|
||||
const completedGoals = goals?.filter((g) => g.status === "completed") || [];
|
||||
const avgProgress =
|
||||
activeGoals.length > 0
|
||||
? Math.round(
|
||||
activeGoals.reduce((sum, g) => sum + (g.progress || 0), 0) /
|
||||
activeGoals.length,
|
||||
)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={theme.colors.primary}
|
||||
tintColor={colors.primary}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<LinearGradient colors={theme.gradients.primary} style={styles.header}>
|
||||
<View style={styles.headerContent}>
|
||||
<View>
|
||||
<Text style={styles.headerTitle}>Fitness Goals</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
Track your fitness journey progress
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
onPress={clearClerkCache}
|
||||
style={styles.debugButton}
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={[typography.h1, { color: colors.textPrimary }]}>
|
||||
Fitness Goals
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
<Ionicons name="refresh-circle-outline" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
Track your fitness journey progress
|
||||
</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<TouchableOpacity
|
||||
onPress={clearClerkCache}
|
||||
style={styles.debugButton}
|
||||
>
|
||||
<Ionicons
|
||||
name="refresh-circle-outline"
|
||||
size={24}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Stats Summary */}
|
||||
{goals && 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),
|
||||
0,
|
||||
) / activeGoals.length,
|
||||
)
|
||||
: 0}
|
||||
%
|
||||
</Text>
|
||||
<Text style={styles.statLabel}>Avg Progress</Text>
|
||||
<View style={styles.section}>
|
||||
<View style={styles.statsRow}>
|
||||
<MinimalCard variant="elevated" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.primary }]}>
|
||||
{activeGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
Active
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard variant="elevated" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.success }]}>
|
||||
{completedGoals.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
Completed
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
|
||||
<MinimalCard variant="elevated" style={styles.statCard}>
|
||||
<Text style={[typography.stat, { color: colors.textPrimary }]}>
|
||||
{avgProgress}%
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
Avg Progress
|
||||
</Text>
|
||||
</MinimalCard>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Analytics Section */}
|
||||
{statistics && (
|
||||
<View style={styles.analyticsSection}>
|
||||
<TouchableOpacity
|
||||
style={styles.analyticsHeader}
|
||||
onPress={() => setShowAnalytics(!showAnalytics)}
|
||||
>
|
||||
<View style={styles.analyticsHeaderLeft}>
|
||||
<View style={styles.section}>
|
||||
<MinimalCard variant="default">
|
||||
<TouchableOpacity
|
||||
style={styles.analyticsHeader}
|
||||
onPress={() => setShowAnalytics(!showAnalytics)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.analyticsHeaderLeft}>
|
||||
<Ionicons
|
||||
name="bar-chart-outline"
|
||||
size={20}
|
||||
color={colors.primary}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
typography.h3,
|
||||
{ color: colors.textPrimary, marginLeft: 8 },
|
||||
]}
|
||||
>
|
||||
Progress Analytics
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name="bar-chart-outline"
|
||||
name={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={theme.colors.primary}
|
||||
color={colors.textTertiary}
|
||||
/>
|
||||
<Text style={styles.analyticsTitle}>Progress Analytics</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name={showAnalytics ? "chevron-up" : "chevron-down"}
|
||||
size={20}
|
||||
color={theme.colors.gray400}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
|
||||
{showAnalytics && (
|
||||
<View style={styles.analyticsContent}>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
title="8-Week Trend"
|
||||
/>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
title="Goals by Type"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{showAnalytics && (
|
||||
<View style={styles.analyticsContent}>
|
||||
{statistics.weeklyTrend.length > 0 && (
|
||||
<WeeklyProgressChart
|
||||
weeklyData={statistics.weeklyTrend}
|
||||
title="8-Week Trend"
|
||||
/>
|
||||
)}
|
||||
{statistics.goals.goalsByType.length > 0 && (
|
||||
<GoalTypeBreakdownChart
|
||||
data={statistics.goals.goalsByType}
|
||||
title="Goals by Type"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</MinimalCard>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Active Goals */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>
|
||||
Active Goals ({activeGoals.length})
|
||||
</Text>
|
||||
<SectionHeader
|
||||
title={`Active Goals (${activeGoals.length})`}
|
||||
actionLabel="Add New"
|
||||
onActionPress={() => setIsModalVisible(true)}
|
||||
/>
|
||||
{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>
|
||||
<MinimalCard variant="default">
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons
|
||||
name="flag-outline"
|
||||
size={48}
|
||||
color={colors.borderLight}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodyEmphasis,
|
||||
{ color: colors.textSecondary, marginTop: 12 },
|
||||
]}
|
||||
>
|
||||
No active goals yet
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textTertiary, marginTop: 4 },
|
||||
]}
|
||||
>
|
||||
Tap "Add New" to create your first goal
|
||||
</Text>
|
||||
</View>
|
||||
</MinimalCard>
|
||||
) : (
|
||||
activeGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onComplete={() => handleCompleteGoal(goal)}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))
|
||||
<View style={styles.goalsList}>
|
||||
{activeGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onComplete={() => handleCompleteGoal(goal)}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</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)}
|
||||
/>
|
||||
))}
|
||||
<SectionHeader
|
||||
title={`Completed Goals (${completedGoals.length})`}
|
||||
/>
|
||||
<View style={styles.goalsList}>
|
||||
{completedGoals.map((goal) => (
|
||||
<GoalProgressCard
|
||||
key={goal.id}
|
||||
goal={goal}
|
||||
onDelete={() => handleDeleteGoal(goal.id)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.footer} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Floating Action Button */}
|
||||
<Animated.View
|
||||
style={[styles.fabContainer, { transform: [{ scale: fabScale }] }]}
|
||||
>
|
||||
{/* Floating Action Button - Minimal Style */}
|
||||
<View style={styles.fabContainer}>
|
||||
<TouchableOpacity
|
||||
onPress={() => setIsModalVisible(true)}
|
||||
onPressIn={() => {
|
||||
Animated.spring(fabScale, {
|
||||
toValue: 0.9,
|
||||
friction: 8,
|
||||
tension: 100,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}}
|
||||
onPressOut={() => {
|
||||
Animated.spring(fabScale, {
|
||||
toValue: 1,
|
||||
friction: 8,
|
||||
tension: 100,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}}
|
||||
activeOpacity={0.9}
|
||||
activeOpacity={0.8}
|
||||
style={[
|
||||
styles.fab,
|
||||
{
|
||||
backgroundColor: colors.primary,
|
||||
shadowColor: colors.primary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={theme.gradients.primary}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.fab}
|
||||
>
|
||||
<Ionicons name="add" size={28} color="#fff" />
|
||||
</LinearGradient>
|
||||
<Ionicons name="add" size={28} color={colors.white} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Create Goal Modal */}
|
||||
<GoalCreationModal
|
||||
@@ -319,129 +373,73 @@ export default function GoalsScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
header: {
|
||||
padding: 24,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
marginBottom: 10,
|
||||
borderBottomLeftRadius: theme.borderRadius.xl,
|
||||
borderBottomRightRadius: theme.borderRadius.xl,
|
||||
},
|
||||
headerContent: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
alignItems: "flex-start",
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 60,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
debugButton: {
|
||||
padding: 8,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: theme.typography.fontSize["3xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.white,
|
||||
section: {
|
||||
paddingHorizontal: 24,
|
||||
marginBottom: 24,
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
marginTop: 4,
|
||||
},
|
||||
statsContainer: {
|
||||
statsRow: {
|
||||
flexDirection: "row",
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.white,
|
||||
padding: 16,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
alignItems: "center",
|
||||
...theme.shadows.medium,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
statValue: {
|
||||
fontSize: theme.typography.fontSize["2xl"],
|
||||
fontWeight: theme.typography.fontWeight.bold,
|
||||
color: theme.colors.primary,
|
||||
marginBottom: 4,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: "#6b7280",
|
||||
fontWeight: "500",
|
||||
},
|
||||
analyticsSection: {
|
||||
padding: 16,
|
||||
paddingTop: 0,
|
||||
paddingVertical: 20,
|
||||
},
|
||||
analyticsHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.colors.white,
|
||||
padding: 16,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
marginBottom: 12,
|
||||
...theme.shadows.subtle,
|
||||
},
|
||||
analyticsHeaderLeft: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
analyticsTitle: {
|
||||
fontSize: theme.typography.fontSize.base,
|
||||
fontWeight: theme.typography.fontWeight.semibold,
|
||||
color: theme.colors.gray700,
|
||||
},
|
||||
analyticsContent: {
|
||||
paddingTop: 4,
|
||||
paddingTop: 16,
|
||||
marginTop: 16,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
section: {
|
||||
padding: 20,
|
||||
paddingTop: 10,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 12,
|
||||
goalsList: {
|
||||
gap: 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,
|
||||
},
|
||||
fabContainer: {
|
||||
position: "absolute",
|
||||
right: 20,
|
||||
bottom: 110, // Adjusted for tab bar height
|
||||
right: 24,
|
||||
bottom: 90,
|
||||
},
|
||||
fab: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
...theme.shadows.glow,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user