Untitled

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import shareIcon from '../../images/shareIcon.svg';
import blackHeartIcon from '../../images/blackHeartIcon.svg';

type CategoryRecipeType = 'meal' | 'drink' | 'all';

type RecipeType = 'meal' | 'drink';

type Recipe = {
  id: number;
  name: string;
  type: RecipeType;
  image: string;
  category: string;
  nationality: string;
  alcoholicOrNot: string;
};

function FavoriteRecipes() {
  const [favoriteRecipes, setFavoriteRecipes] = useState<Recipe[]>([]);
  const [filter, setFilter] = useState<CategoryRecipeType>();
  const [linkCopied, setLinkCopied] = useState(false);

  useEffect(() => {
    const getFavoriteRecipes = () => {
      const storedFavoriteRecipes = localStorage.getItem('favoriteRecipes');
      if (storedFavoriteRecipes) {
        const favoritedRecipes = JSON.parse(storedFavoriteRecipes);
        setFavoriteRecipes(favoritedRecipes);
      }
    };
    getFavoriteRecipes();
    setFilter('all');
  }, []);

  const handleFilterChange = (selectedFilter: CategoryRecipeType) => {
    setFilter(selectedFilter);
  };

  const removeFavoriteRecipe = (index: number) => {
    const storedFavoriteRecipes = localStorage.getItem('favoriteRecipes');
    if (storedFavoriteRecipes) {
      const favoritedRecipes = JSON.parse(storedFavoriteRecipes);
      favoritedRecipes.splice(index, 1);
      localStorage.setItem('favoriteRecipes', JSON.stringify(favoritedRecipes));
      setFavoriteRecipes(favoritedRecipes);
    }
  };

  const copyFavoriteRecipeLink = (url: string) => {
    navigator.clipboard.writeText(url)
      .then(() => {
        setLinkCopied(true);
        window.alert('Link copied!');
      })
      .catch((error) => {
        console.error('Error copying to clipboard:', error);
      });
  };

  const filteredRecipes = filter === 'all'
    ? favoriteRecipes
    : favoriteRecipes.filter((recipe) => recipe.type === filter);

  return (
    <div>
      <div>
        <button
          onClick={ () => handleFilterChange('all') }
          data-testid="filter-by-all-btn"
        >
          ALL
        </button>
        <button
          onClick={ () => handleFilterChange('meal') }
          data-testid="filter-by-meal-btn"
        >
          meals
        </button>
        <button
          onClick={ () => handleFilterChange('drink') }
          data-testid="filter-by-drink-btn"
        >
          drinks
        </button>
      </div>
      {filteredRecipes.map((recipe, index) => (
        <div key={ recipe.id }>
          <Link
            to={ `/${recipe.type}s/${recipe.id}` }
            key={ recipe.id }
          >
            <h3 data-testid={ `${index}-horizontal-name` }>{recipe.name}</h3>
            <img
              src={ recipe.image }
              alt={ recipe.name }
              data-testid={ `${index}-horizontal-image` }
              style={ { width: '150px' } }
            />
          </Link>
          <p data-testid={ `${index}-horizontal-top-text` }>
            {
                recipe.type === 'meal'
                  ? `${recipe.nationality} - ${recipe.category}`
                  : `${recipe.alcoholicOrNot}`
              }
          </p>
          <button onClick={ () => copyFavoriteRecipeLink(`http://localhost:3000/${recipe.type}s/${recipe.id}`) }>
            {linkCopied ? 'Link copied!' : (
              <img
                data-testid={ `${index}-horizontal-share-btn` }
                src={ shareIcon }
                alt="Share"
              />
            )}
          </button>
          <button onClick={ () => removeFavoriteRecipe(index) }>
            <img
              data-testid={ `${index}-horizontal-favorite-btn` }
              src={ blackHeartIcon }
              alt="Favorite"
            />
          </button>
        </div>
      ))}
    </div>
  );
}

export default FavoriteRecipes;