Filtragem Dinâmica

Os usuários não querem rolar por todos os serviços. Eles querem filtrar por categoria — mostre-me apenas cuidados com gramado, apenas consultas. Isso combina tudo que você aprendeu: estado para o filtro selecionado, condições para estados vazios e loops para renderizar os resultados.

O Que Você Vai Aprender

Rastrear a categoria selecionada com estado
Filtrar arrays com base na seleção
Lidar com estados vazios após filtragem
Construir uma UI de filtro completa

Os Blocos de Construção

Precisamos de:

Dados dos serviços — A lista completa de serviços
Estado da categoria selecionada — Qual filtro está ativo
Serviços filtrados — Computados a partir da lista completa
Botões de categoria — Para alterar o filtro
Exibição de serviços — Os resultados filtrados

Configure os Dados

Comece com serviços que possuem informações de categoria:

<script>
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', category: 'lawn-care', price: 75 },
    { id: '3', slug: 'garden-consultation', name: 'Garden Consultation', category: 'consultation', price: 100 },
    { id: '4', slug: 'tree-pruning', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    { id: '5', slug: 'patio-cleaning', name: 'Patio Cleaning', category: 'cleaning', price: 80 }
  ];
  
  const categories = [
    { id: 'all', name: 'All Services' },
    { id: 'lawn-care', name: 'Lawn Care' },
    { id: 'tree-care', name: 'Tree Care' },
    { id: 'consultation', name: 'Consultation' },
    { id: 'cleaning', name: 'Cleaning' }
  ];
  
  let selectedCategory = $state('all');
</script>

Compute os Serviços Filtrados

Use $derived para filtrar automaticamente com base na seleção:

<script>
  // ... services and categories data ...
  
  let selectedCategory = $state('all');
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

Quando selectedCategory muda, filteredServices recalcula automaticamente. Abordaremos $derived em profundidade no Módulo 10 — por ora, saiba que ele cria valores computados que se atualizam reativamente.

Construa a UI de Filtro

Crie botões para cada categoria:

<div class="category-filters">
  {#each categories as category (category.id)}
    <button
      class:active={selectedCategory === category.id}
      onclick={() => selectedCategory = category.id}
    >
      {category.name}
    </button>
  {/each}
</div>

A diretiva class:active adiciona a classe active quando a condição é verdadeira — destacando o filtro selecionado.

Exiba os Resultados Filtrados

Combine o filtro com a lista de serviços:

<div class="services-list">
  {#each filteredServices as service (service.id)}
    <article class="service-card">
      <h3>{service.name}</h3>
      <p class="category">{service.category}</p>
      <p class="price">${service.price}</p>
      <a href="/services/{service.slug}">View Details</a>
    </article>
  {:else}
    <div class="empty-state">
      <p>No services found in this category.</p>
      <button onclick={() => selectedCategory = 'all'}>
        View All Services
      </button>
    </div>
  {/each}
</div>

O {:else} lida com os resultados filtrados vazios.

O Componente Completo

Aqui está tudo junto:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', category: 'lawn-care', price: 75 },
    { id: '3', slug: 'garden-consultation', name: 'Garden Consultation', category: 'consultation', price: 100 },
    { id: '4', slug: 'tree-pruning', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    { id: '5', slug: 'patio-cleaning', name: 'Patio Cleaning', category: 'cleaning', price: 80 }
  ];
  
  const categories = [
    { id: 'all', name: 'All Services' },
    { id: 'lawn-care', name: 'Lawn Care' },
    { id: 'tree-care', name: 'Tree Care' },
    { id: 'consultation', name: 'Consultation' },
    { id: 'cleaning', name: 'Cleaning' }
  ];
  
  let selectedCategory = $state('all');
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

<h1>Our Services</h1>

<div class="category-filters">
  {#each categories as category (category.id)}
    <button
      class:active={selectedCategory === category.id}
      onclick={() => selectedCategory = category.id}
    >
      {category.name}
    </button>
  {/each}
</div>

<p class="results-count">
  Showing {filteredServices.length} of {services.length} services
</p>

<div class="services-list">
  {#each filteredServices as service (service.id)}
    <article class="service-card">
      <h3>
        <a href="/services/{service.slug}">{service.name}</a>
      </h3>
      <span class="category-badge">{service.category}</span>
      <p class="price">${service.price}</p>
    </article>
  {:else}
    <div class="empty-state">
      <p>No services found in this category.</p>
      <button onclick={() => selectedCategory = 'all'}>
        View All Services
      </button>
    </div>
  {/each}
</div>

<style>
  .category-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  
  .category-filters button {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 20px;
    cursor: pointer;
  }
  
  .category-filters button:hover {
    border-color: #007bff;
  }
  
  .category-filters button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
  }
  
  .results-count {
    color: #666;
    margin-bottom: 1rem;
  }
  
  .services-list {
    display: grid;
    gap: 1rem;
  }
  
  .service-card {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
  }
  
  .service-card h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .service-card a {
    color: #333;
    text-decoration: none;
  }
  
  .service-card a:hover {
    color: #007bff;
  }
  
  .category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #666;
  }
  
  .price {
    font-weight: bold;
    color: #007bff;
  }
  
  .empty-state {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
  }
</style>

Teste a Interação

Carregue a página de serviços — todos os 5 serviços são exibidos
Clique em "Lawn Care" — 2 serviços são exibidos
Clique em "Tree Care" — 1 serviço é exibido
Clique em "Consultation" — 1 serviço é exibido
Clique em "All Services" — volta para 5 serviços

A contagem se atualiza, a lista filtra e o botão ativo é destacado. Tudo reativo, tudo automático.

Erros Comuns

Mutando o Array Original

<!-- ❌ Don't modify the source array -->
let filteredServices = $derived(
  services.filter(s => s.category === selectedCategory)
);
// If you did: services = services.filter(...) — you'd lose data!

<!-- ✅ Filter returns a new array, original is preserved -->
let filteredServices = $derived(
  services.filter(s => s.category === selectedCategory)
);

Esquecendo o Estado Vazio

Sempre trate o caso em que a filtragem produz zero resultados. Os usuários precisam de feedback.

Não Usar Chaves

<!-- ❌ Without keys, filtering can cause glitches -->
{#each filteredServices as service}

<!-- ✅ With keys, each item is tracked correctly -->
{#each filteredServices as service (service.id)}

Resumo

A filtragem combina estado, valores derivados, condições e loops. A categoria selecionada é estado, os serviços filtrados são derivados, o caso vazio é uma condição e a renderização é um loop. Esses primitivos se combinam em recursos interativos poderosos.

Principais conclusões:

Use estado para o filtro selecionado
Use $derived para computar os resultados filtrados
Sempre trate estados filtrados vazios
Use blocos each com chaves para listas dinâmicas

Módulo Concluído! 🎉

Você terminou o Módulo 5: Fluxo de Controle. O BookIt agora possui:

Compreensão dos blocos de fluxo de controle do Svelte
Renderização condicional com {#if}, {:else} e {:else if}
Tratamento de estados vazios para melhor UX
Renderização de listas com {#each}
Listas com chaves para atualizações corretas
Filtragem interativa por categoria

O que você aprendeu:

Sintaxe de template do Svelte para fluxo de controle
{#if} / {:else} / {:else if} para conteúdo condicional
Como projetar estados vazios bem pensados
{#each} para renderizar arrays
Chaves para rastreamento correto de listas
Combinação de padrões de fluxo de controle

Próximos Passos

Formulários precisam de mais do que entradas de texto. Continue com o Módulo 6: Vinculação de Dados para explorar checkboxes, botões de rádio, selects e muito mais.