O problema ocorre porque a sua função handleResetFilters está redefinindo o estado dos filtros e depois chamando fetchBusinesses() imediatamente. Garanta que fetchBusinesses() seja chamado após os filtros serem atualizados. Para isso, utilize o useEffect para monitorar mudanças no estado dos filtros. codigo corrigido:
import { useState, useEffect } from 'react';
import { getBusinesses } from '../api/DBRequests';
import categories from '../constants/categories';
const BusinessListPage = () => {
const [businesses, setBusinesses] = useState([]);
const [filters, setFilters] = useState({
category: '',
state: '',
minPrice: '',
maxPrice: '',
minRevenue: '',
maxRevenue: '',
});
const [sortBy, setSortBy] = useState('');
const [loading, setLoading] = useState(false);
useEffect(() => {
fetchBusinesses();
}, [filters, sortBy]); // Chama fetchBusinesses sempre que filtros ou sortBy mudarem
const fetchBusinesses = async () => {
setLoading(true);
try {
const adjustedSortBy =
sortBy === 'asc' ? 'asc' : sortBy === 'desc' ? 'desc' : '';
const businesses = await getBusinesses(adjustedSortBy, filters);
setBusinesses(businesses);
} catch (error) {
console.error('Error fetching businesses:', error.message);
} finally {
setLoading(false);
}
};
const handleInputChange = (e) => {
const { name, value } = e.target;
setFilters((prevFilters) => ({ ...prevFilters, [name]: value }));
};
const handleResetFilters = () => {
setFilters({
category: '',
state: '',
minPrice: '',
maxPrice: '',
minRevenue: '',
maxRevenue: '',
});
setSortBy('');
};
return (
<div className="container-fluid mt-4">
<div className="row">
<div className="col-md-3">
<div className="bg-light border p-3">
<h5>Filters</h5>
<div className="mb-3">
<label htmlFor="category" className="form-label">
Category
</label>
<select
id="category"
name="category"
className="form-control"
value={filters.category}
onChange={handleInputChange}
>
<option value="">All Categories</option>
{categories.map((category, index) => (
<option key={index} value={category}>
{category}
</option>
))}
</select>
</div>
<button
className="btn btn-primary btn-block"
onClick={() => fetchBusinesses()}
>
Apply Filters
</button>
<button
className="btn btn-secondary btn-block mt-2"
onClick={handleResetFilters}
>
Reset Filters
</button>
</div>
</div>
<div className="col-md-9">
{loading && <p className="d-block mx-auto">Loading</p>}
<div className="row">
{businesses.length === 0 && !loading && (
<div className="col-12">
<p className="mt-4 text-center">No businesses found.</p>
</div>
)}
{businesses.map((business) => (
<div className="col-md-4 mb-4" key={business._id}>
<div className="card h-100">
<div className="card-body">
<h5 className="card-title">{business.name}</h5>
</div>
<div className="card-footer">
<a
href={`/business/${business._id}`}
className="btn btn-primary btn-sm btn-block"
>
View Details
</a>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default BusinessListPage;