// Exemplo de componente de listagem de exercícios em React
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const ExerciseList = () => {
const [exercises, setExercises] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [filters, setFilters] = useState({
category: '',
name: '',
isPublic: true,
page: 0,
size: 10
});
useEffect(() => {
const fetchExercises = async () => {
try {
setLoading(true);
// Construir query string a partir dos filtros
const queryParams = new URLSearchParams();
if (filters.category) queryParams.append('category', filters.category);
if (filters.name) queryParams.append('name', filters.name);
if (filters.isPublic !== undefined) queryParams.append('isPublic', filters.isPublic.toString());
queryParams.append('page', filters.page.toString());
queryParams.append('size', filters.size.toString());
queryParams.append('sort', 'name,asc');
const response = await axios.get(`/exercises?${queryParams.toString()}`);
setExercises(response.data.content);
setLoading(false);
} catch (err) {
setError(err.response?.data?.message || 'Erro ao carregar exercícios');
setLoading(false);
}
};
fetchExercises();
}, [filters]);
const handleFilterChange = (e) => {
const { name, value } = e.target;
setFilters(prev => ({
...prev,
[name]: value,
page: 0 // Reset page when filters change
}));
};
if (loading) return <div>Carregando...</div>;
if (error) return <div>Erro: {error}</div>;
return (
<div className="exercise-list">
<div className="filters">
<select name="category" value={filters.category} onChange={handleFilterChange}>
<option value="">Todas as categorias</option>
<option value="PEITO">Peito</option>
<option value="COSTAS">Costas</option>
<option value="OMBRO">Ombro</option>
<option value="BICEPS">Bíceps</option>
<option value="TRICEPS">Tríceps</option>
<option value="PERNAS">Pernas</option>
<option value="ABDOMEN">Abdômen</option>
<option value="GLUTEOS">Glúteos</option>
<option value="CARDIO">Cardio</option>
<option value="OUTRO">Outro</option>
</select>
<input
type="text"
name="name"
placeholder="Buscar por nome"
value={filters.name}
onChange={handleFilterChange}
/>
<label>
<input
type="checkbox"
name="isPublic"
checked={filters.isPublic}
onChange={(e) => setFilters(prev => ({
...prev,
isPublic: e.target.checked,
page: 0
}))}
/>
Apenas exercícios públicos
</label>
</div>
<div className="exercise-grid">
{exercises.map(exercise => (
<div key={exercise.id} className="exercise-card">
<img src={exercise.imageUrl || '/default-exercise.png'} alt={exercise.name} />
<h3>{exercise.name}</h3>
<p className="category">{exercise.category}</p>
<p className="description">{exercise.description}</p>
<button className="view-details">Ver Detalhes</button>
</div>
))}
</div>
<div className="pagination">
<button
disabled={filters.page === 0}
onClick={() => setFilters(prev => ({ ...prev, page: prev.page - 1 }))}
>
Anterior
</button>
<span>Página {filters.page + 1}</span>
<button
disabled={exercises.length < filters.size}
onClick={() => setFilters(prev => ({ ...prev, page: prev.page + 1 }))}
>
Próxima
</button>
</div>
</div>
);
};
export default ExerciseList;
