Untitled

import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import useStore from '../../store/useStore';
import './index.css';

// interface Props {
//   tipo: string;
// }
function Recipes() {
  const navigate = useNavigate();
  const [categoryBtn, setCategorybtn] = useState('');
  const recipes = useStore((state: any) => state.recipes);
  const setRecipes = useStore((state:any) => state.setRecipes);

  const { pathname } = useLocation();
  const [category, setCategory] = useState({
    meals: [],
    drinks: [],
  });

  const path = pathname.includes('meals') ? 'themealdb' : 'thecocktaildb';
  const recipeType = pathname.includes('meals') ? 'meals' : 'drinks';

  const handleClick = (click: any) => {
    if (click === '' || click === categoryBtn) {
      setCategorybtn('');
      fetch(`https://www.${path}.com/api/json/v1/1/search.php?s=`)
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
          throw new Error('Erro ao buscar as refeições.');
        })
        .then((data) => {
          setRecipes(data); // Atualiza o estado com os dados recebidos
        })
        .catch((error) => {
          console.error('Erro ao buscar as refeições..:', error);
        });
    } else {
      fetch(`https://www.${path}.com/api/json/v1/1/filter.php?c=${click}`)
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
          throw new Error('Erro ao buscar as refeições...');
        })
        .then((data) => {
          setRecipes(data); // Atualiza o estado com os dados recebidos
        })
        .catch((error) => {
          console.error('.Erro ao buscar as refeições:', error);
        });
      setCategorybtn(click);
    }
  };

  const goTo = (id: any) => {
    navigate(`${pathname}/${id}`);
    console.log(`${pathname}/${id}`);
  };

  useEffect(() => {
    fetch(`https://www.${path}.com/api/json/v1/1/search.php?s=`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error('Erro ao buscar as refeições');
      })
      .then((data) => {
        setRecipes(data); // Atualiza o estado com os dados recebidos
      })
      .catch((error) => {
        console.error('Erro ao buscar as refeições:', error);
      });
  }, [path, setRecipes]);

  useEffect(() => {
    fetch(`https://www.${path}.com/api/json/v1/1/list.php?c=list`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error('Erro ao buscar as refeições');
      })
      .then((data) => {
        setCategory(data); // Atualiza o estado com os dados recebidos
      })
      .catch((error) => {
        console.error('Erro ao buscar as refeições:', error);
      });
  }, [path, setRecipes]);

  const renderRecipes = recipes[recipeType].slice(0, 12);
  return (
    <>
      <p>RECEITAS</p>

      <button
        data-testid="All-category-filter"
        onClick={ () => handleClick('') }
      >
        All

      </button>
      {
      category[recipeType].slice(0, 5).map((categoria: any, index) => (
        <div key={ index }>
          <button
            data-testid={ `${categoria.strCategory}-category-filter` }
            onClick={ () => handleClick(categoria.strCategory) }
          >
            {`${categoria.strCategory}`}

          </button>
        </div>
      ))
}

      {
      renderRecipes.map((recipe: any, index: any) => {
        return (
          <button
            className="btnRecipe"
            key={ index }
            data-testid={ `${index}-recipe-card` }
            onClick={ () => goTo(recipe.idMeal || recipe.idDrink) }
          >
            <h2
              data-testid={ `${index}-card-name` }
            >
              {recipe.strMeal || recipe.strDrink}
            </h2>
            <img
              src={ recipe.strMealThumb || recipe.strDrinkThumb }
              data-testid={ `${index}-card-img` }
              alt="recipeImg"
            />
          </button>
        );
      })
      }
    </>
  );
}

export default Recipes;