1
resposta

Algum problema em fazer assim?

useEffect(() => {
    let listaFiltrada = cardapio;
    if (busca) {
        listaFiltrada = listaFiltrada.filter(item => item.title.toLowerCase().includes(busca.toLowerCase()));
    }
    if (filtro) {
        listaFiltrada = listaFiltrada.filter(item => filtro === item.category.id);
    }
    if (ordenador === 'porcao') {
        listaFiltrada = listaFiltrada.sort((a, b) => a.size > b.size ? 1 : -1);
    }
    if (ordenador === 'qtd_pessoas') {
        listaFiltrada = listaFiltrada.sort((a, b) => a.serving > b.serving ? 1 : -1);
    }
    if (ordenador === 'preco') {
        listaFiltrada = listaFiltrada.sort((a, b) => a.price - b.price ? 1 : -1);
    }

    setLista(listaFiltrada);

}, [busca, filtro, ordenador]);

aparentemente mais verboso, mas menos complicado, pois não precisa criar varias funções e nem regex, etc.

1 resposta

Olá, Davi, tudo bem?

Desculpe a demora em retornar.

Sua solução usa o hook useEffect para filtrar e ordenar uma lista de itens do cardápio com base na busca, filtro e tipo de ordenação selecionados pelo usuário. Embora a solução possa parecer mais verbosa, ela é menos complicada porque não requer a criação de várias funções e nem expressões regulares, como você mencionou.

No entanto, há alguns pontos que podem ser aprimorados na solução. Por exemplo, ao filtrar por busca, você está verificando se o título do item inclui a sequência de caracteres da busca, ignorando acentos e diferenças de maiúsculas e minúsculas. Isso funciona bem para termos simples, mas pode não ser tão eficaz para termos compostos ou para idiomas que usam caracteres especiais. Uma abordagem mais robusta seria usar uma biblioteca de processamento de texto, como o Fuse.js, que permite realizar buscas mais sofisticadas.

Outra sugestão seria adicionar uma mensagem de feedback ao usuário quando nenhum item correspondente à busca ou filtro for encontrado. Isso pode ser feito facilmente com um condicional que verifica o tamanho da lista filtrada antes de renderizá-la na tela.

No geral, sua solução é uma boa abordagem para lidar com filtros e ordenação de uma lista de itens no React.

Parabéns pelo trabalho e continue estudando para aprimorar suas habilidades em desenvolvimento web!

Espero que tenha te ajudado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software