mirror of
https://github.com/DocNR/POWR.git
synced 2025-04-19 10:51:19 +00:00
947 lines
32 KiB
TypeScript
947 lines
32 KiB
TypeScript
// components/templates/ModalTemplateDetails.tsx
|
||
import React, { useState, useEffect, createContext, useContext } from 'react';
|
||
import { View, ScrollView, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||
import { Text } from '@/components/ui/text';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Separator } from '@/components/ui/separator';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
|
||
import { NavigationContainer } from '@react-navigation/native';
|
||
import { useTheme } from '@react-navigation/native';
|
||
import { useColorScheme } from '@/lib/useColorScheme';
|
||
import { WorkoutTemplate } from '@/types/templates';
|
||
import { useWorkoutStore } from '@/stores/workoutStore';
|
||
import { formatTime } from '@/utils/formatTime';
|
||
import { Calendar } from 'lucide-react-native';
|
||
import {
|
||
X,
|
||
ChevronLeft,
|
||
Star,
|
||
Copy,
|
||
Heart,
|
||
Dumbbell,
|
||
Target,
|
||
Hash,
|
||
Clock,
|
||
MessageSquare,
|
||
Zap,
|
||
Repeat,
|
||
Bookmark
|
||
} from 'lucide-react-native';
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||
import { cn } from '@/lib/utils';
|
||
import type { CustomTheme } from '@/lib/theme';
|
||
|
||
// Create the tab navigator
|
||
const Tab = createMaterialTopTabNavigator();
|
||
|
||
// Create a context to share the template with the tabs
|
||
interface TemplateContextType {
|
||
template: WorkoutTemplate | null;
|
||
onStartWorkout?: () => void;
|
||
}
|
||
|
||
const TemplateContext = createContext<TemplateContextType>({
|
||
template: null
|
||
});
|
||
|
||
// Custom hook to access the template
|
||
function useTemplate() {
|
||
const context = useContext(TemplateContext);
|
||
if (!context.template) {
|
||
throw new Error('useTemplate must be used within a TemplateContextProvider');
|
||
}
|
||
return { template: context.template, onStartWorkout: context.onStartWorkout };
|
||
}
|
||
|
||
interface ModalTemplateDetailsProps {
|
||
templateId: string;
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onFavoriteChange?: (templateId: string, isFavorite: boolean) => void;
|
||
}
|
||
|
||
// Overview Tab Component
|
||
function OverviewTab() {
|
||
const { template } = useTemplate();
|
||
|
||
const {
|
||
title,
|
||
type,
|
||
category,
|
||
description,
|
||
exercises = [],
|
||
tags = [],
|
||
metadata,
|
||
availability
|
||
} = template;
|
||
|
||
// Calculate source type from availability
|
||
const sourceType = availability.source.includes('nostr')
|
||
? 'nostr'
|
||
: availability.source.includes('powr')
|
||
? 'powr'
|
||
: 'local';
|
||
|
||
const isEditable = sourceType === 'local';
|
||
|
||
return (
|
||
<ScrollView
|
||
className="flex-1"
|
||
contentContainerStyle={{ paddingBottom: 20 }}
|
||
>
|
||
<View className="gap-6 p-4">
|
||
{/* Basic Info Section */}
|
||
<View className="flex-row items-center gap-2">
|
||
<Badge
|
||
variant={sourceType === 'local' ? 'outline' : 'secondary'}
|
||
className="capitalize"
|
||
>
|
||
<Text>{sourceType === 'local' ? 'My Template' : sourceType === 'powr' ? 'POWR Template' : 'Nostr Template'}</Text>
|
||
</Badge>
|
||
<Badge
|
||
variant="outline"
|
||
className="capitalize bg-muted"
|
||
>
|
||
<Text>{type}</Text>
|
||
</Badge>
|
||
</View>
|
||
|
||
<Separator className="bg-border" />
|
||
|
||
{/* Category Section */}
|
||
<View className="flex-row items-center gap-2">
|
||
<View className="w-8 h-8 items-center justify-center rounded-md bg-muted">
|
||
<Target size={18} className="text-muted-foreground" />
|
||
</View>
|
||
<View>
|
||
<Text className="text-sm text-muted-foreground">Category</Text>
|
||
<Text className="text-base font-medium text-foreground">{category}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Description Section */}
|
||
{description && (
|
||
<View>
|
||
<Text className="text-base font-semibold text-foreground mb-2">Description</Text>
|
||
<Text className="text-base text-muted-foreground leading-relaxed">{description}</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* Exercises Section */}
|
||
<View>
|
||
<View className="flex-row items-center gap-2 mb-2">
|
||
<Dumbbell size={16} className="text-muted-foreground" />
|
||
<Text className="text-base font-semibold text-foreground">Exercises</Text>
|
||
</View>
|
||
<View className="gap-2">
|
||
{exercises.map((exerciseConfig, index) => (
|
||
<View key={index} className="bg-card p-3 rounded-lg">
|
||
<Text className="text-base font-medium text-foreground">
|
||
{exerciseConfig.exercise.title}
|
||
</Text>
|
||
<Text className="text-sm text-muted-foreground">
|
||
{exerciseConfig.targetSets} sets × {exerciseConfig.targetReps} reps
|
||
</Text>
|
||
{exerciseConfig.notes && (
|
||
<Text className="text-sm text-muted-foreground mt-1">
|
||
{exerciseConfig.notes}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
))}
|
||
</View>
|
||
</View>
|
||
|
||
{/* Tags Section */}
|
||
{tags.length > 0 && (
|
||
<View>
|
||
<View className="flex-row items-center gap-2 mb-2">
|
||
<Hash size={16} className="text-muted-foreground" />
|
||
<Text className="text-base font-semibold text-foreground">Tags</Text>
|
||
</View>
|
||
<View className="flex-row flex-wrap gap-2">
|
||
{tags.map(tag => (
|
||
<Badge key={tag} variant="secondary">
|
||
<Text>{tag}</Text>
|
||
</Badge>
|
||
))}
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{/* Workout Parameters Section */}
|
||
<View>
|
||
<View className="flex-row items-center gap-2 mb-2">
|
||
<Clock size={16} className="text-muted-foreground" />
|
||
<Text className="text-base font-semibold text-foreground">Workout Parameters</Text>
|
||
</View>
|
||
<View className="gap-2">
|
||
{template.rounds && (
|
||
<View className="flex-row">
|
||
<Text className="text-sm text-muted-foreground w-40">Rounds:</Text>
|
||
<Text className="text-sm text-foreground">{template.rounds}</Text>
|
||
</View>
|
||
)}
|
||
{template.duration && (
|
||
<View className="flex-row">
|
||
<Text className="text-sm text-muted-foreground w-40">Duration:</Text>
|
||
<Text className="text-sm text-foreground">{formatTime(template.duration * 1000)}</Text>
|
||
</View>
|
||
)}
|
||
{template.interval && (
|
||
<View className="flex-row">
|
||
<Text className="text-sm text-muted-foreground w-40">Interval:</Text>
|
||
<Text className="text-sm text-foreground">{formatTime(template.interval * 1000)}</Text>
|
||
</View>
|
||
)}
|
||
{template.restBetweenRounds && (
|
||
<View className="flex-row">
|
||
<Text className="text-sm text-muted-foreground w-40">Rest Between Rounds:</Text>
|
||
<Text className="text-sm text-foreground">
|
||
{formatTime(template.restBetweenRounds * 1000)}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
{metadata?.averageDuration && (
|
||
<View className="flex-row">
|
||
<Text className="text-sm text-muted-foreground w-40">Average Completion Time:</Text>
|
||
<Text className="text-sm text-foreground">
|
||
{Math.round(metadata.averageDuration / 60)} minutes
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{/* Usage Stats Section */}
|
||
{metadata && (
|
||
<View>
|
||
<View className="flex-row items-center gap-2 mb-2">
|
||
<Calendar size={16} className="text-muted-foreground" />
|
||
<Text className="text-base font-semibold text-foreground">Usage</Text>
|
||
</View>
|
||
<View className="gap-2">
|
||
{metadata.useCount && (
|
||
<Text className="text-base text-muted-foreground">
|
||
Used {metadata.useCount} times
|
||
</Text>
|
||
)}
|
||
{metadata.lastUsed && (
|
||
<Text className="text-base text-muted-foreground">
|
||
Last used: {new Date(metadata.lastUsed).toLocaleDateString()}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{/* Action Buttons */}
|
||
<View className="gap-3 mt-2">
|
||
{isEditable ? (
|
||
<Button variant="outline" className="w-full" onPress={() => console.log('Edit template')}>
|
||
<Text>Edit Template</Text>
|
||
</Button>
|
||
) : (
|
||
<Button variant="outline" className="w-full" onPress={() => console.log('Fork template')}>
|
||
<Copy size={18} className="mr-2" />
|
||
<Text>Save as My Template</Text>
|
||
</Button>
|
||
)}
|
||
|
||
<Button variant="outline" className="w-full" onPress={() => console.log('Share template')}>
|
||
<Text>Share Template</Text>
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
);
|
||
}
|
||
|
||
// History Tab Component
|
||
function HistoryTab() {
|
||
const { template } = useTemplate();
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
// Format date helper
|
||
const formatDate = (date: Date) => {
|
||
return date.toLocaleDateString(undefined, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric'
|
||
});
|
||
};
|
||
|
||
// Mock workout history - this would come from your database in a real app
|
||
const mockWorkoutHistory = [
|
||
{
|
||
id: 'hist1',
|
||
date: new Date(2024, 1, 25),
|
||
duration: 62, // minutes
|
||
completed: true,
|
||
notes: "Increased weight on squats by 10lbs",
|
||
exercises: [
|
||
{ name: "Barbell Squat", sets: 3, reps: 8, weight: 215 },
|
||
{ name: "Bench Press", sets: 3, reps: 8, weight: 175 },
|
||
{ name: "Bent Over Row", sets: 3, reps: 8, weight: 155 }
|
||
]
|
||
},
|
||
{
|
||
id: 'hist2',
|
||
date: new Date(2024, 1, 18),
|
||
duration: 58, // minutes
|
||
completed: true,
|
||
exercises: [
|
||
{ name: "Barbell Squat", sets: 3, reps: 8, weight: 205 },
|
||
{ name: "Bench Press", sets: 3, reps: 8, weight: 175 },
|
||
{ name: "Bent Over Row", sets: 3, reps: 8, weight: 155 }
|
||
]
|
||
},
|
||
{
|
||
id: 'hist3',
|
||
date: new Date(2024, 1, 11),
|
||
duration: 65, // minutes
|
||
completed: false,
|
||
notes: "Stopped early due to time constraints",
|
||
exercises: [
|
||
{ name: "Barbell Squat", sets: 3, reps: 8, weight: 205 },
|
||
{ name: "Bench Press", sets: 3, reps: 8, weight: 170 },
|
||
{ name: "Bent Over Row", sets: 2, reps: 8, weight: 150 }
|
||
]
|
||
}
|
||
];
|
||
|
||
// Simulate loading history data
|
||
useEffect(() => {
|
||
const loadHistory = async () => {
|
||
setIsLoading(true);
|
||
// Simulate loading delay
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
setIsLoading(false);
|
||
};
|
||
|
||
loadHistory();
|
||
}, [template.id]);
|
||
|
||
return (
|
||
<ScrollView
|
||
className="flex-1"
|
||
contentContainerStyle={{ paddingBottom: 20 }}
|
||
>
|
||
<View className="gap-6 p-4">
|
||
{/* Performance Summary */}
|
||
<View>
|
||
<Text className="text-base font-semibold text-foreground mb-4">Performance Summary</Text>
|
||
<Card className="bg-card">
|
||
<CardContent className="p-4">
|
||
<View className="flex-row justify-between">
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Total Workouts</Text>
|
||
<Text className="text-xl font-semibold">{mockWorkoutHistory.length}</Text>
|
||
</View>
|
||
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Avg Duration</Text>
|
||
<Text className="text-xl font-semibold">
|
||
{Math.round(mockWorkoutHistory.reduce((acc, w) => acc + w.duration, 0) / mockWorkoutHistory.length)} min
|
||
</Text>
|
||
</View>
|
||
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Completion</Text>
|
||
<Text className="text-xl font-semibold">
|
||
{Math.round(mockWorkoutHistory.filter(w => w.completed).length / mockWorkoutHistory.length * 100)}%
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</CardContent>
|
||
</Card>
|
||
</View>
|
||
|
||
{/* History List */}
|
||
<View>
|
||
<Text className="text-base font-semibold text-foreground mb-4">Workout History</Text>
|
||
|
||
{isLoading ? (
|
||
<View className="items-center justify-center py-8">
|
||
<ActivityIndicator size="small" className="mb-2" />
|
||
<Text className="text-muted-foreground">Loading history...</Text>
|
||
</View>
|
||
) : mockWorkoutHistory.length > 0 ? (
|
||
<View className="gap-4">
|
||
{mockWorkoutHistory.map((workout) => (
|
||
<Card key={workout.id} className="overflow-hidden">
|
||
<CardContent className="p-4">
|
||
<View className="flex-row justify-between mb-2">
|
||
<Text className="font-semibold">{formatDate(workout.date)}</Text>
|
||
<Badge variant={workout.completed ? "default" : "outline"}>
|
||
<Text>{workout.completed ? "Completed" : "Incomplete"}</Text>
|
||
</Badge>
|
||
</View>
|
||
|
||
<View className="flex-row justify-between mb-3">
|
||
<View>
|
||
<Text className="text-xs text-muted-foreground">Duration</Text>
|
||
<Text className="text-sm">{workout.duration} min</Text>
|
||
</View>
|
||
|
||
<View>
|
||
<Text className="text-xs text-muted-foreground">Sets</Text>
|
||
<Text className="text-sm">
|
||
{workout.exercises.reduce((acc, ex) => acc + ex.sets, 0)}
|
||
</Text>
|
||
</View>
|
||
|
||
<View>
|
||
<Text className="text-xs text-muted-foreground">Volume</Text>
|
||
<Text className="text-sm">
|
||
{workout.exercises.reduce((acc, ex) => acc + (ex.sets * ex.reps * ex.weight), 0)} lbs
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{workout.notes && (
|
||
<Text className="text-sm text-muted-foreground mb-3">
|
||
{workout.notes}
|
||
</Text>
|
||
)}
|
||
|
||
<Button variant="outline" size="sm" className="w-full">
|
||
<Text>View Details</Text>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</View>
|
||
) : (
|
||
<View className="bg-muted p-8 rounded-lg items-center justify-center">
|
||
<Calendar size={24} className="text-muted-foreground mb-2" />
|
||
<Text className="text-muted-foreground text-center">
|
||
No workout history available yet
|
||
</Text>
|
||
<Text className="text-sm text-muted-foreground text-center mt-1">
|
||
Complete a workout using this template to see your history
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
);
|
||
}
|
||
|
||
// Social Tab Component
|
||
function SocialTab() {
|
||
const { template } = useTemplate();
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
// Mock social feed data
|
||
const mockSocialFeed = [
|
||
{
|
||
id: 'social1',
|
||
userName: 'FitnessFanatic',
|
||
userAvatar: 'https://randomuser.me/api/portraits/men/32.jpg',
|
||
pubkey: 'npub1q8s7vw...',
|
||
timestamp: new Date(Date.now() - 3600000 * 2), // 2 hours ago
|
||
content: 'Just crushed this Full Body workout! New PR on bench press 🎉',
|
||
metrics: {
|
||
duration: 58, // in minutes
|
||
volume: 4500, // total weight
|
||
exercises: 5
|
||
},
|
||
likes: 12,
|
||
comments: 3,
|
||
zaps: 5,
|
||
reposts: 2,
|
||
bookmarked: false
|
||
},
|
||
{
|
||
id: 'social2',
|
||
userName: 'StrengthJourney',
|
||
userAvatar: 'https://randomuser.me/api/portraits/women/44.jpg',
|
||
pubkey: 'npub1z92r3...',
|
||
timestamp: new Date(Date.now() - 3600000 * 24), // 1 day ago
|
||
content: 'Modified this workout with extra leg exercises. Feeling the burn!',
|
||
metrics: {
|
||
duration: 65,
|
||
volume: 5200,
|
||
exercises: "5+2"
|
||
},
|
||
likes: 8,
|
||
comments: 1,
|
||
zaps: 3,
|
||
reposts: 0,
|
||
bookmarked: false
|
||
},
|
||
{
|
||
id: 'social3',
|
||
userName: 'GymCoach',
|
||
userAvatar: 'https://randomuser.me/api/portraits/men/62.jpg',
|
||
pubkey: 'npub1xne8q...',
|
||
timestamp: new Date(Date.now() - 3600000 * 48), // 2 days ago
|
||
content: 'Great template for beginners! I recommend starting with lighter weights.',
|
||
metrics: {
|
||
duration: 45,
|
||
volume: 3600,
|
||
exercises: 5
|
||
},
|
||
likes: 24,
|
||
comments: 7,
|
||
zaps: 15,
|
||
reposts: 6,
|
||
bookmarked: true
|
||
}
|
||
];
|
||
|
||
// Social Feed Item Component
|
||
function SocialFeedItem({ item }: { item: typeof mockSocialFeed[0] }) {
|
||
const [liked, setLiked] = useState(false);
|
||
const [zapCount, setZapCount] = useState(item.zaps);
|
||
const [bookmarked, setBookmarked] = useState(item.bookmarked);
|
||
const [reposted, setReposted] = useState(false);
|
||
const [commentCount, setCommentCount] = useState(item.comments);
|
||
|
||
const formatDate = (date: Date) => {
|
||
const now = new Date();
|
||
const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
|
||
|
||
if (diffInHours < 1) {
|
||
return 'now';
|
||
} else if (diffInHours < 24) {
|
||
return `${diffInHours}h`;
|
||
} else {
|
||
const diffInDays = Math.floor(diffInHours / 24);
|
||
return `${diffInDays}d`;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<View className="p-4 border-b border-border">
|
||
{/* User info and timestamp */}
|
||
<View className="flex-row mb-3">
|
||
<Avatar className="h-10 w-10 mr-3" alt={`${item.userName}'s profile picture`}>
|
||
<AvatarImage source={{ uri: item.userAvatar }} />
|
||
<AvatarFallback>
|
||
<Text className="text-sm">{item.userName.substring(0, 2)}</Text>
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
|
||
<View className="flex-1">
|
||
<View className="flex-row justify-between">
|
||
<Text className="font-semibold">{item.userName}</Text>
|
||
<Text className="text-xs text-muted-foreground">
|
||
{formatDate(item.timestamp)}
|
||
</Text>
|
||
</View>
|
||
<Text className="text-xs text-muted-foreground">
|
||
@{item.pubkey.substring(0, 10)}...
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Post content */}
|
||
<Text className="mb-3">{item.content}</Text>
|
||
|
||
{/* Workout metrics */}
|
||
<View className="flex-row justify-between mb-3 p-3 bg-muted/50 rounded-lg">
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Duration</Text>
|
||
<Text className="font-semibold">{item.metrics.duration} min</Text>
|
||
</View>
|
||
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Volume</Text>
|
||
<Text className="font-semibold">{item.metrics.volume} lbs</Text>
|
||
</View>
|
||
|
||
<View className="items-center">
|
||
<Text className="text-xs text-muted-foreground">Exercises</Text>
|
||
<Text className="font-semibold">{item.metrics.exercises}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Twitter-like action buttons */}
|
||
<View className="flex-row justify-between items-center mt-2">
|
||
{/* Comment button */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
className="flex-row items-center"
|
||
onPress={() => setCommentCount(prev => prev + 1)}
|
||
>
|
||
<MessageSquare size={18} className="text-muted-foreground" />
|
||
{commentCount > 0 && (
|
||
<Text className="text-xs text-muted-foreground ml-1">{commentCount}</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
|
||
{/* Repost button */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
className="flex-row items-center"
|
||
onPress={() => setReposted(!reposted)}
|
||
>
|
||
<Repeat
|
||
size={18}
|
||
className={cn(
|
||
reposted ? "text-green-500" : "text-muted-foreground"
|
||
)}
|
||
/>
|
||
{(reposted || item.reposts > 0) && (
|
||
<Text
|
||
className={cn(
|
||
"text-xs ml-1",
|
||
reposted ? "text-green-500" : "text-muted-foreground"
|
||
)}
|
||
>
|
||
{reposted ? item.reposts + 1 : item.reposts}
|
||
</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
|
||
{/* Like button */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
className="flex-row items-center"
|
||
onPress={() => setLiked(!liked)}
|
||
>
|
||
<Heart
|
||
size={18}
|
||
className={cn(
|
||
liked ? "text-red-500 fill-red-500" : "text-muted-foreground"
|
||
)}
|
||
/>
|
||
{(liked || item.likes > 0) && (
|
||
<Text
|
||
className={cn(
|
||
"text-xs ml-1",
|
||
liked ? "text-red-500" : "text-muted-foreground"
|
||
)}
|
||
>
|
||
{liked ? item.likes + 1 : item.likes}
|
||
</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
|
||
{/* Zap button */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
className="flex-row items-center"
|
||
onPress={() => setZapCount(prev => prev + 1)}
|
||
>
|
||
<Zap
|
||
size={18}
|
||
className="text-amber-500"
|
||
/>
|
||
{zapCount > 0 && (
|
||
<Text className="text-xs text-muted-foreground ml-1">{zapCount}</Text>
|
||
)}
|
||
</TouchableOpacity>
|
||
|
||
{/* Bookmark button */}
|
||
<TouchableOpacity
|
||
activeOpacity={0.7}
|
||
onPress={() => setBookmarked(!bookmarked)}
|
||
>
|
||
<Bookmark
|
||
size={18}
|
||
className={cn(
|
||
bookmarked ? "text-blue-500 fill-blue-500" : "text-muted-foreground"
|
||
)}
|
||
/>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<ScrollView
|
||
className="flex-1 bg-background"
|
||
contentContainerStyle={{ paddingBottom: 20 }}
|
||
>
|
||
<View className="px-4 py-2 flex-row justify-between items-center border-b border-border">
|
||
<Text className="text-base font-semibold text-foreground">
|
||
Recent Activity
|
||
</Text>
|
||
<Badge variant="outline">
|
||
<Text>Nostr</Text>
|
||
</Badge>
|
||
</View>
|
||
|
||
{isLoading ? (
|
||
<View className="items-center justify-center py-8">
|
||
<ActivityIndicator size="small" className="mb-2" />
|
||
<Text className="text-muted-foreground">Loading activity...</Text>
|
||
</View>
|
||
) : mockSocialFeed.length > 0 ? (
|
||
<View>
|
||
{mockSocialFeed.map((item) => (
|
||
<SocialFeedItem key={item.id} item={item} />
|
||
))}
|
||
</View>
|
||
) : (
|
||
<View className="items-center justify-center py-8 mx-4 mt-4 bg-muted rounded-lg">
|
||
<MessageSquare size={24} className="text-muted-foreground mb-2" />
|
||
<Text className="text-muted-foreground text-center">No social activity found</Text>
|
||
<Text className="text-xs text-muted-foreground text-center mt-1">
|
||
This workout hasn't been shared on Nostr yet
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</ScrollView>
|
||
);
|
||
}
|
||
|
||
export function ModalTemplateDetails({
|
||
templateId,
|
||
open,
|
||
onClose,
|
||
onFavoriteChange
|
||
}: ModalTemplateDetailsProps) {
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [workoutTemplate, setWorkoutTemplate] = useState<WorkoutTemplate | null>(null);
|
||
const [isFavorite, setIsFavorite] = useState(false);
|
||
const [toggleCounter, setToggleCounter] = useState(0);
|
||
|
||
const theme = useTheme() as CustomTheme;
|
||
const { isDarkColorScheme } = useColorScheme();
|
||
|
||
// Use the workoutStore
|
||
const {
|
||
startWorkoutFromTemplate,
|
||
checkFavoriteStatus,
|
||
addFavorite,
|
||
removeFavorite
|
||
} = useWorkoutStore();
|
||
|
||
// Load template data when the modal opens or templateId changes
|
||
useEffect(() => {
|
||
async function loadTemplate() {
|
||
// Don't load data if the modal is closed
|
||
if (!open) return;
|
||
|
||
try {
|
||
setIsLoading(true);
|
||
|
||
if (!templateId) {
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
// Always fetch the current favorite status from the store
|
||
const currentIsFavorite = checkFavoriteStatus(templateId);
|
||
setIsFavorite(currentIsFavorite);
|
||
console.log(`Initial load: Template ${templateId} isFavorite: ${currentIsFavorite}`);
|
||
|
||
// TODO: Implement fetching from database if needed
|
||
// For now, create a mock template if we couldn't find it
|
||
const mockTemplate: WorkoutTemplate = {
|
||
id: templateId,
|
||
title: "Sample Workout",
|
||
type: "strength",
|
||
category: "Full Body",
|
||
exercises: [{
|
||
exercise: {
|
||
id: "ex1",
|
||
title: "Barbell Squat",
|
||
type: "strength",
|
||
category: "Legs",
|
||
tags: ["compound", "legs"],
|
||
availability: { source: ["local"] },
|
||
created_at: Date.now()
|
||
},
|
||
targetSets: 3,
|
||
targetReps: 8
|
||
}],
|
||
isPublic: false,
|
||
tags: ["strength", "beginner"],
|
||
version: 1,
|
||
created_at: Date.now(),
|
||
availability: { source: ["local"] }
|
||
};
|
||
|
||
setWorkoutTemplate(mockTemplate);
|
||
setIsLoading(false);
|
||
} catch (error) {
|
||
console.error("Error loading template:", error);
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
|
||
loadTemplate();
|
||
}, [templateId, open, checkFavoriteStatus]);
|
||
|
||
const handleStartWorkout = async () => {
|
||
if (!workoutTemplate) return;
|
||
|
||
try {
|
||
// Use the workoutStore action to start a workout from template
|
||
await startWorkoutFromTemplate(workoutTemplate.id);
|
||
|
||
// Close the modal
|
||
onClose();
|
||
|
||
// Navigate to the active workout screen
|
||
// We'll leave navigation to the parent component
|
||
} catch (error) {
|
||
console.error("Error starting workout:", error);
|
||
}
|
||
};
|
||
|
||
// Inside your handleToggleFavorite function, update it to:
|
||
const handleToggleFavorite = async () => {
|
||
if (!workoutTemplate) return;
|
||
|
||
try {
|
||
// Get the current state directly from the store
|
||
const currentIsFavorite = checkFavoriteStatus(workoutTemplate.id);
|
||
console.log(`Current store state: Template ${workoutTemplate.id} isFavorite: ${currentIsFavorite}`);
|
||
|
||
// The new state will be the opposite
|
||
const newFavoriteStatus = !currentIsFavorite;
|
||
|
||
// Update the store first
|
||
if (currentIsFavorite) {
|
||
await removeFavorite(workoutTemplate.id);
|
||
console.log(`Removed template with ID "${workoutTemplate.id}" from favorites (store action)`);
|
||
} else {
|
||
await addFavorite(workoutTemplate);
|
||
console.log(`Added template "${workoutTemplate.title}" to favorites (store action)`);
|
||
}
|
||
|
||
// Verify the change took effect in the store
|
||
const updatedIsFavorite = checkFavoriteStatus(workoutTemplate.id);
|
||
console.log(`After store update: Template ${workoutTemplate.id} isFavorite: ${updatedIsFavorite}`);
|
||
|
||
// Now update our local state
|
||
setIsFavorite(updatedIsFavorite);
|
||
|
||
// Force re-render if needed
|
||
setToggleCounter(prev => prev + 1);
|
||
|
||
// Notify parent component
|
||
if (onFavoriteChange) {
|
||
onFavoriteChange(workoutTemplate.id, updatedIsFavorite);
|
||
}
|
||
|
||
console.log(`Toggled favorite UI: ${workoutTemplate.id} is now ${updatedIsFavorite ? 'favorited' : 'unfavorited'}`);
|
||
} catch (error) {
|
||
console.error("Error toggling favorite:", error);
|
||
}
|
||
};
|
||
|
||
console.log(`Template ${workoutTemplate?.id} isFavorite: ${isFavorite}`);
|
||
|
||
// Don't render anything if the modal is closed
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<Modal
|
||
visible={open}
|
||
transparent={true}
|
||
animationType="slide"
|
||
onRequestClose={onClose}
|
||
>
|
||
<View className="flex-1 justify-center items-center bg-black/70">
|
||
<View
|
||
className={`bg-background ${isDarkColorScheme ? 'bg-card border border-border' : ''} rounded-lg w-[95%] h-[85%] max-w-xl shadow-xl overflow-hidden`}
|
||
style={{ maxHeight: 700 }}
|
||
>
|
||
{/* Loading State */}
|
||
{isLoading || !workoutTemplate ? (
|
||
<View className="flex-1 items-center justify-center p-6">
|
||
<ActivityIndicator size="large" className="mb-4" />
|
||
<Text className="text-muted-foreground">Loading template...</Text>
|
||
</View>
|
||
) : (
|
||
<>
|
||
{/* Header */}
|
||
<View className="flex-row justify-between items-center p-4 border-b border-border">
|
||
<View className="flex-row items-center flex-1">
|
||
<Text className="text-xl font-bold text-foreground" numberOfLines={1}>
|
||
{workoutTemplate.title}
|
||
</Text>
|
||
</View>
|
||
|
||
<View className="flex-row items-center">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onPress={handleToggleFavorite}
|
||
className="mr-2"
|
||
>
|
||
{/* Force re-render by using key with the current favorite state */}
|
||
<Star
|
||
key={`star-${workoutTemplate.id}-${isFavorite}-${toggleCounter}`}
|
||
className={isFavorite ? "text-primary" : "text-muted-foreground"}
|
||
fill={isFavorite ? "currentColor" : "none"}
|
||
size={22}
|
||
/>
|
||
</Button>
|
||
|
||
<TouchableOpacity onPress={onClose} className="ml-2 p-1">
|
||
<X size={24} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Tab Navigator */}
|
||
<View style={{ flex: 1 }}>
|
||
<TemplateContext.Provider value={{
|
||
template: workoutTemplate,
|
||
onStartWorkout: handleStartWorkout
|
||
}}>
|
||
<Tab.Navigator
|
||
screenOptions={{
|
||
tabBarActiveTintColor: theme.colors.tabIndicator,
|
||
tabBarInactiveTintColor: theme.colors.tabInactive,
|
||
tabBarLabelStyle: {
|
||
fontSize: 13,
|
||
textTransform: 'capitalize',
|
||
fontWeight: 'bold',
|
||
marginHorizontal: -4,
|
||
},
|
||
tabBarIndicatorStyle: {
|
||
backgroundColor: theme.colors.tabIndicator,
|
||
height: 2,
|
||
},
|
||
tabBarStyle: {
|
||
backgroundColor: theme.colors.background,
|
||
elevation: 0,
|
||
shadowOpacity: 0,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: theme.colors.border,
|
||
},
|
||
tabBarPressColor: theme.colors.primary,
|
||
}}
|
||
>
|
||
<Tab.Screen name="Overview">
|
||
{() => <OverviewTab />}
|
||
</Tab.Screen>
|
||
<Tab.Screen name="Social">
|
||
{() => <SocialTab />}
|
||
</Tab.Screen>
|
||
<Tab.Screen name="History">
|
||
{() => <HistoryTab />}
|
||
</Tab.Screen>
|
||
</Tab.Navigator>
|
||
</TemplateContext.Provider>
|
||
</View>
|
||
|
||
{/* Footer with Start button */}
|
||
<View className="p-4 border-t border-border">
|
||
<Button
|
||
style={{ backgroundColor: 'hsl(261, 90%, 66%)' }}
|
||
className="w-full"
|
||
onPress={handleStartWorkout}
|
||
>
|
||
<Text className="text-white font-medium">Start Workout</Text>
|
||
</Button>
|
||
</View>
|
||
</>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</Modal>
|
||
)}; |