Construindo componente de Pesquisa em React

Olá, seja muito bem vindo(a), anteriormente armazenamos nossos dados de produtos em um Json para podermos trabalhar com uma barrinha de pesquisa destes produtos: https://programacao-descomplicada.blogspot.com/2022/12/armazenando-dados-com-o-json-e.html, mas antes disso vou deixar pronto o componente da barra de pesquisa.

Inicialmente eu vou criar, dentro da pasta de componentes, uma pasta chamada SearchBar, no qual irei criar o arquivo index.js e construir o componente. Dentro do arquivo, primeiramente eu importei tanto o Icon do iconify, quanto o styled do styled-components

import { Icon } from '@iconify/react';
import styled from 'styled-components';

Após isso eu construí e estilizei o componente, o código ficou no github para caso você queira dar uma olhada depois, neste momento vamos pensar em como fazer essa barra de pesquisa ser funcional no nosso projeto.

Minha ideia seria criar uma filtragem dinâmica no qual os cards de produtos que estão na página inicial começam a diminuir de quantidade a medida que o usuário for escrevendo algo no input de pesquisa.

Primeiro eu vou colocar um onChange() para ficar verificando a ocorrência de algum evento no input. Após isso eu importei o React no topo do arquivo para poder utilizar o useState() e pegar o texto digitado pelo usuário no input.

export function SearchBar() {
 const [valorDaBusca, setValorDaBusca] = React.useState();
 return (
 <>
  <Search>
   <input type="text" placeholder="Pesquise" onChange={(event) => {
    setValorDaBusca(event.target.value);
   }} />
   <button><Icon icon="simple-line-icons:magnifier" /></button>
  </Search>
 </>
 )
}

Agora eu vou para o componente dos cards dos produtos e vou colocar um filter antes do map em produtos e com uma linha de código eu resolvo a filtragem, porém tenho que resolver como passar o valor que o usuário digitar na barra de pesquisa para dentro da lista de produtos.

Voltando ao arquivo de página principal, o index.js dentro de pages, eu vou passar uma constante chamada valorFiltro e vou enviar ela para o meu componente ProductList já que lá no filter eu adicionei essa constante mas não declarei ela lá. 

<ProductList searchValue={valorFiltro} ProductsList={config.productsList} />

Indo para o componente das listas de produto eu passo o searchValue mais todas as propriedades lá no parentêses do export function ProductList.

export function ProductList({searchValue, ...propriedades}) { …}

Agora eu preciso conectar a barra de pesquisa agora. Para isso eu pego a constante do useState da barra de pesquisa e vou levar para o index.js da Home para deixar esse estado mais global. No lugar de valorDaBusca eu vou modificar para valorFiltro e vou retirar a constante de teste com esse mesmo nome.

Lembrando de retirar o import do React tbm e colocar no index.js da Home. Vou passar o valorFiltro e setValorFiltro para o componente Header pela Home, assim como foi feito com o ProductList. Ainda tenho que passar esses valores para o componente da barra de pesquisa já que ela fica dentro do Header mas separado em componente.

No componente de barra eu recebi os valores passados pelo Header e aí eu criei constantes para receber os dois dados. Tudo pronto, faltam apenas alguns detalhes como o tratamento de letras maiúsculas e minúsculas e a apresentação da página que não está aparecendo nenhum produto antes de digitar na barra de pesquisa. 

Para resolver o problema das letras eu usei o toLowerCase() tanto nos nomes dos títulos na hora da pesquisa, quanto no que for digitado na barra de pesquisa da seguinte forma, isso dentro do filter:

 const titleNormalized = produto.title.toLowerCase();
const searchValueNormalized = searchValue.toLowerCase();
 return titleNormalized.includes(searchValueNormalized)

Caso dê algum erro, pode ser porque não tinha nada passando como padrão dentro da barra de pesquisa no useState, eu passei um “” vazio mesmo, dentro do parênteses dele, o melhor é que meus vídeos apareceram todos do jeito que deveria ficar antes da pesquisa, logo não tenho mais problema para resolver. Fico por aqui, um abraço e até o próximo artigo.

Link do repositório com o código do projeto: https://github.com/fransilva0/projeto-e-commerce-nextjs 

Blog: https://programacao-descomplicada.blogspot.com/2022/12/construindo-componente-de-pesquisa-em.html