14 - Filtros¶

// javascript
// src/services/api.js
const API_URL = 'http://localhost:3001';

export const fetchItems = async () => {
  try {
    const response = await fetch(`${API_URL}/items`);
    if (!response.ok) {
      throw new Error('Erro ao buscar itens');
    }
    return await response.json();
  } catch (error) {
    console.error("Falha ao buscar itens:", error);
    return []; // Retorna array vazio em caso de erro para não quebrar a UI
  }
};

export const fetchCategories = async () => {
  try {
    const response = await fetch(`${API_URL}/categories`);
    if (!response.ok) {
      throw new Error('Erro ao buscar categorias');
    }
    return await response.json();
  } catch (error) {
    console.error("Falha ao buscar categorias:", error);
    return [];
  }
};


// Poderíamos adicionar aqui funções para buscar itens com filtros/query do json-server
// Ex: export const fetchItemsByQuery = async (query) => { ... fetch(`${API_URL}/items?${query}`) ... }

// src/App.jsx
import React, { useState, useEffect, useMemo } from 'react';
import SearchBar from './components/SearchBar';
import FilterOptions from './components/FilterOptions';
import ItemList from './components/ItemList';
import { fetchItems, fetchCategories } from './services/api';
import './App.css'; // Crie este arquivo para estilos básicos

function App() {
  const [allItems, setAllItems] = useState([]);
  const [categories, setCategories] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState(''); // 'all' ou '' para todos
  const [selectedItems, setSelectedItems] = useState(new Set()); // Usar Set para IDs únicos

  useEffect(() => {
    const loadData = async () => {
      const itemsData = await fetchItems();
      const categoriesData = await fetchCategories();
      setAllItems(itemsData);
      setCategories(categoriesData);
    };
    loadData();
  }, []);

  const handleSearchChange = (term) => {
    setSearchTerm(term.toLowerCase());
  };

  const handleCategoryChange = (category) => {
    setSelectedCategory(category);
  };

  const handleItemSelect = (itemId) => {
    setSelectedItems(prevSelectedItems => {
      const newSelectedItems = new Set(prevSelectedItems);
      if (newSelectedItems.has(itemId)) {
        newSelectedItems.delete(itemId);
      } else {
        newSelectedItems.add(itemId);
      }
      return newSelectedItems;
    });
  };

  const filteredItems = useMemo(() => {
    return allItems
      .filter(item =>
        item.name.toLowerCase().includes(searchTerm)
      )
      .filter(item =>
        selectedCategory === '' || item.category === selectedCategory
      );
  }, [allItems, searchTerm, selectedCategory]);

  return (
    <div className="app-container">
      <h1>Catálogo de Itens Interativo</h1>

      <div className="controls">
        <SearchBar onSearch={handleSearchChange} />
        <FilterOptions
          categories={categories}
          selectedCategory={selectedCategory}
          onCategoryChange={handleCategoryChange}
        />
      </div>

      {selectedItems.size > 0 && (
        <div className="selection-info">
          <p>{selectedItems.size} item(s) selecionado(s).</p>
          {/* Poderia adicionar botões de ação para itens selecionados aqui */}
        </div>
      )}

      <ItemList
        items={filteredItems}
        selectedItems={selectedItems}
        onItemSelect={handleItemSelect}
      />
    </div>
  );
}


export default App;

// src/components/SearchBar.jsx
import React, { useState } from 'react';

function SearchBar({ onSearch }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onSearch(event.target.value); // Chama onSearch em cada mudança
  };

  return (
    <div className="search-bar">
      <input
        type="text"
        placeholder="Buscar itens..."
        value={inputValue}
        onChange={handleChange}
      />
    </div>
  );
}

export default SearchBar;

// src/components/FilterOptions.jsx
import React from 'react';

function FilterOptions({ categories, selectedCategory, onCategoryChange }) {
  return (
    <div className="filter-options">
      <label htmlFor="category-select">Filtrar por Categoria: </label>
      <select
        id="category-select"
        value={selectedCategory}
        onChange={(e) => onCategoryChange(e.target.value)}
      >
        <option value="">Todas</option>
        {categories.map(category => (
          <option key={category.id || category.name} value={category.name}>
            {category.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default FilterOptions;

// src/components/ItemList.jsx
import React from 'react';
import Item from './Item';

function ItemList({ items, selectedItems, onItemSelect }) {
  if (items.length === 0) {
    return <p>Nenhum item encontrado.</p>;
  }

  return (
    <ul className="item-list">
      {items.map(item => (
        <Item
          key={item.id}
          item={item}
          isSelected={selectedItems.has(item.id)}
          onSelect={() => onItemSelect(item.id)}
        />
      ))}
    </ul>
  );
}

export default ItemList;

// src/components/Item.jsx
import React from 'react';

function Item({ item, isSelected, onSelect }) {
  const itemStyle = {
    border: '1px solid #ccc',
    padding: '10px',
    margin: '5px 0',
    borderRadius: '4px',
    backgroundColor: isSelected ? '#e0f7fa' : '#fff', // Destaque visual para selecionado
    cursor: 'pointer',
  };

  return (
    <li style={itemStyle} onClick={onSelect}>
      <h3>{item.name}</h3>
      <p>Categoria: {item.category}</p>
      <p>Preço: R$ {item.price.toFixed(2)}</p>
      <p>Em estoque: {item.inStock ? 'Sim' : 'Não'}</p>
      {isSelected && <p><strong>Selecionado</strong></p>}
    </li>
  );
}

export default Item;