Launch Your App

In Minutes, Not Months

import

{ useState, useEffect }

from

"react"

;

import

{ useAuth }

from

"../hooks/useAuth"

;

export default function

WorkoutTracker

() {

const [workouts, setWorkouts] = useState([]);

const [loading, setLoading] = useState(true);

const { user } = useAuth();

useEffect(() => {

async function fetchWorkouts() {

try {

setLoading(true);

const response = await api.getWorkouts(user.id);

setWorkouts(response.data);

} catch (error) {

console.error("Error fetching workouts", error);

} finally {

setLoading(false);

}

}

fetchWorkouts();

}, [user.id]);

return (

<div className="workout-container">

<h2>Your Workouts</h2>

{loading ? (

<div className="loading-spinner" />

) : workouts.length > 0 ? (

<ul className="workout-list">

{workouts.map((workout) => (

<WorkoutItem key={workout.id} workout={workout} />

))}

</ul>

) : (

<p>No workouts found. Let's add your first one!</p>

)}

</div>

);

}