79422489

Date: 2025-02-08 01:33:14
Score: 1.5
Natty:
Report link

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;
Reasons:
  • Blacklisted phrase (1): está
  • Blacklisted phrase (1): porque
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Geovane Araujo