MacPro
240 lines
8.8 KiB
TypeScript
240 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import {
|
|
ChevronLeft,
|
|
Trash2,
|
|
Loader,
|
|
Pencil,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
} from "lucide-react";
|
|
import { WorkoutWithSets } from "@/types";
|
|
import { formatSetsSummary } from "@/lib/formatSets";
|
|
|
|
function buildSetSummary(set: {
|
|
weight?: number | null;
|
|
weightUnit?: string | null;
|
|
reps?: number | null;
|
|
rpe?: number | null;
|
|
notes?: string | null;
|
|
durationSeconds?: number | null;
|
|
distance?: number | null;
|
|
calories?: number | null;
|
|
}) {
|
|
const parts: string[] = [];
|
|
if (set.weight) parts.push(`${set.weight} ${set.weightUnit === "kg" ? "kg" : "lbs"}`);
|
|
if (set.reps) parts.push(`${set.reps} reps`);
|
|
if ((set as any).durationSeconds) parts.push(`${(set as any).durationSeconds}s`);
|
|
if ((set as any).distance) parts.push(`${(set as any).distance} mi`);
|
|
if ((set as any).calories) parts.push(`${(set as any).calories} cal`);
|
|
if (set.rpe) parts.push(`RPE ${set.rpe}`);
|
|
if (set.notes) parts.push(set.notes);
|
|
return parts.length > 0 ? parts.join(" · ") : "No data";
|
|
}
|
|
|
|
export default function WorkoutDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const [workout, setWorkout] = useState<WorkoutWithSets | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [expandedExercise, setExpandedExercise] = useState<string | null>(null);
|
|
|
|
const workoutId = params.id as string;
|
|
|
|
useEffect(() => {
|
|
const fetchWorkout = async () => {
|
|
try {
|
|
const response = await fetch(`/api/workouts/${workoutId}`);
|
|
if (!response.ok) throw new Error("Failed to fetch");
|
|
const data = await response.json();
|
|
setWorkout(data);
|
|
} catch (error) {
|
|
console.error("Error fetching workout:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchWorkout();
|
|
}, [workoutId]);
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm("Are you sure you want to delete this workout?")) return;
|
|
setDeleting(true);
|
|
try {
|
|
const response = await fetch(`/api/workouts/${workoutId}`, { method: "DELETE" });
|
|
if (!response.ok) throw new Error("Failed to delete");
|
|
router.push("/main/workouts");
|
|
} catch (error) {
|
|
console.error("Error deleting workout:", error);
|
|
alert("Failed to delete workout");
|
|
setDeleting(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] flex items-center justify-center">
|
|
<Loader className="w-8 h-8 animate-spin text-white" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!workout) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A]">
|
|
<div className="max-w-2xl mx-auto px-4 py-6">
|
|
<Link href="/main/workouts" className="inline-flex items-center gap-2 text-white hover:text-gray-200 mb-4">
|
|
<ChevronLeft className="w-5 h-5" /> Back
|
|
</Link>
|
|
<p className="text-zinc-400">Workout not found</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Format date
|
|
const date = new Date(workout.date);
|
|
const formattedDate = date.toLocaleDateString("en-US", {
|
|
weekday: "short",
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
|
|
// Group sets by exercise (preserving order)
|
|
const exerciseGroups: Array<{ exerciseId: string; exerciseName: string; sets: typeof workout.setLogs }> = [];
|
|
const seen = new Set<string>();
|
|
for (const set of workout.setLogs) {
|
|
if (!seen.has(set.exercise.id)) {
|
|
seen.add(set.exercise.id);
|
|
exerciseGroups.push({
|
|
exerciseId: set.exercise.id,
|
|
exerciseName: set.exercise.name,
|
|
sets: workout.setLogs.filter((s) => s.exercise.id === set.exercise.id),
|
|
});
|
|
}
|
|
}
|
|
|
|
// Build post-workout stats
|
|
const stats: string[] = [];
|
|
if (workout.durationMinutes) stats.push(`${workout.durationMinutes} min`);
|
|
if (workout.difficulty) stats.push(`Difficulty ${workout.difficulty}/10`);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A]">
|
|
{/* Header */}
|
|
<div className="border-b border-zinc-800 sticky top-0 z-40 bg-[#0A0A0A]">
|
|
<div className="max-w-2xl mx-auto px-4 py-4 flex items-center gap-4">
|
|
<Link href="/main/workouts" className="p-2 hover:bg-zinc-800 rounded-lg -ml-2" aria-label="Back">
|
|
<ChevronLeft className="w-6 h-6 text-white" />
|
|
</Link>
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-lg font-bold text-white truncate">
|
|
{workout.name || "Unnamed Workout"}
|
|
</h1>
|
|
<p className="text-sm text-zinc-400">{formattedDate}</p>
|
|
</div>
|
|
<Link
|
|
href={`/main/workouts/new?edit=${workoutId}`}
|
|
className="p-2 hover:bg-zinc-800 text-zinc-400 hover:text-white rounded-lg transition-colors"
|
|
aria-label="Edit workout"
|
|
>
|
|
<Pencil className="w-5 h-5" />
|
|
</Link>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={deleting}
|
|
className="p-2 hover:bg-zinc-800 text-red-500 rounded-lg -mr-2 disabled:opacity-50"
|
|
aria-label="Delete workout"
|
|
>
|
|
{deleting ? <Loader className="w-5 h-5 animate-spin" /> : <Trash2 className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-2xl mx-auto px-4 py-4 space-y-2">
|
|
{/* Exercises — compact collapsible cards */}
|
|
{exerciseGroups.map((group) => {
|
|
const isExpanded = expandedExercise === group.exerciseId;
|
|
const setsWithData = group.sets.filter((s) => s.reps || s.weight);
|
|
const summary = formatSetsSummary(setsWithData) ||
|
|
`${group.sets.length} set${group.sets.length !== 1 ? "s" : ""}`;
|
|
|
|
return (
|
|
<div key={group.exerciseId} className="border border-zinc-800 rounded-lg bg-zinc-900">
|
|
{/* Exercise header */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpandedExercise(isExpanded ? null : group.exerciseId)}
|
|
className="w-full flex items-center justify-between px-3 py-2.5 hover:bg-zinc-800/50 transition-colors rounded-lg"
|
|
>
|
|
<div className="text-left flex-1 min-w-0">
|
|
<div className="flex items-baseline gap-2">
|
|
<h4 className="font-semibold text-white text-sm truncate">
|
|
{group.exerciseName}
|
|
</h4>
|
|
<span className="text-xs text-zinc-500 flex-shrink-0">
|
|
{group.sets.length} set{group.sets.length !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
{!isExpanded && setsWithData.length > 0 && (
|
|
<p className="text-xs text-zinc-400 mt-0.5 truncate">{summary}</p>
|
|
)}
|
|
</div>
|
|
{isExpanded ? (
|
|
<ChevronUp className="w-4 h-4 text-zinc-500 flex-shrink-0 ml-2" />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4 text-zinc-500 flex-shrink-0 ml-2" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Expanded sets — same style as locked SetRow */}
|
|
{isExpanded && (
|
|
<div className="border-t border-zinc-800 p-3 space-y-2">
|
|
{group.sets.map((set) => (
|
|
<div key={set.id} className="flex items-center gap-1.5">
|
|
<div className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center font-semibold text-xs flex-shrink-0">
|
|
{set.setNumber}
|
|
</div>
|
|
<p className="text-sm text-zinc-300 truncate flex-1">
|
|
{buildSetSummary(set)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Post-workout info (notes, duration, difficulty) */}
|
|
{(workout.notes || stats.length > 0) && (
|
|
<div className="border border-zinc-800 rounded-lg bg-zinc-900 px-3 py-2.5 space-y-1.5">
|
|
{stats.length > 0 && (
|
|
<p className="text-xs text-zinc-400">{stats.join(" · ")}</p>
|
|
)}
|
|
{workout.notes && (
|
|
<p className="text-sm text-zinc-300">{workout.notes}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit button at bottom */}
|
|
<div className="pt-4 pb-8">
|
|
<Link
|
|
href={`/main/workouts/new?edit=${workoutId}`}
|
|
className="w-full py-3 border border-zinc-700 text-white font-semibold rounded-lg hover:bg-zinc-800 flex items-center justify-center gap-2 transition"
|
|
>
|
|
<Pencil className="w-5 h-5" />
|
|
Edit Workout
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|