Untitled

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import clipboardCopy from 'clipboard-copy';
import compartilharLink from '../../images/shareIcon.svg';
import { ProfileIco } from '../Header/ProfileIco';
import { Title } from '../Header/Title';

type DoneRecipesType = {
  id: string;
  type: string;
  name: string;
  category: string;
  nationality: string;
  doneDate: string;
  image: string;
  tags: string[];
  alcoholicOrNot?: string;
};

type BoardType = Record<string, boolean>;

export default function DoneRecipes() {
  const [doneRecipes, setDoneRecipes] = useState<DoneRecipesType[]>([]);
  const [storage, setStorage] = useState<DoneRecipesType[]>([]);
  const [board, setBoard] = useState<BoardType>({});
  const copia = clipboardCopy;

  useEffect(() => {
    const getLocalStorage:
    DoneRecipesType[] = JSON.parse(localStorage.getItem('doneRecipes') || '[]');
    setDoneRecipes(getLocalStorage);
    setStorage(getLocalStorage);
    const getId = getLocalStorage.reduce((acc: BoardType, curr: DoneRecipesType) => (
      { ...acc, [curr.id]: false }
    ), {});
    setBoard(getId);
  }, []);

  function getMeals() {
    const filterMeals = storage.filter((item) => (
      item.type === 'meals'
    ));
    setDoneRecipes(filterMeals);
  }

  function getDrinks() {
    const filterDrinks = storage.filter((item) => (
      item.type === 'drinks'
    ));
    setDoneRecipes(filterDrinks);
  }

  function getAll() {
    setDoneRecipes(storage);
  }

  async function btnShare(url: string, id: string) {
    setBoard({ ...board, [id]: true });
    await copia(`${window.location.origin}${url}`);
  }

  return (
    <>
      <div>
        <Title>Done Recipes</Title>
        <ProfileIco />
      </div>
      <div>
        <button onClick={ getAll } data-testid="filter-by-all-btn">All</button>
        <button onClick={ getMeals } data-testid="filter-by-meal-btn">Meals</button>
        <button onClick={ getDrinks } data-testid="filter-by-drink-btn">Drinks</button>

        {doneRecipes.map((recipe, index: number) => (
          <div key={ index }>
            <Link to={ `/${recipe.type}s/${recipe.id}` }>
              <img
                src={ recipe.image }
                alt="recipe"
                data-testid={ `${index}-horizontal-image` }
              />
            </Link>
            <p data-testid={ `${index}-horizontal-top-text` }>
              {`${recipe.nationality} - ${recipe.category}`}
            </p>
            <Link to={ `/${recipe.type}s/${recipe.id}` }>
              <p data-testid={ `${index}-horizontal-name` }>{recipe.name}</p>
            </Link>
            <p data-testid={ `${index}-horizontal-done-date` }>{recipe.doneDate}</p>
            {recipe.tags.map((tag: string, i: number) => (
              <p key={ i } data-testid={ `${index}-${tag}-horizontal-tag` }>{tag}</p>
            ))}
            {recipe.alcoholicOrNot && (
              <p
                data-testid={ `${index}-horizontal-top-text` }
              >
                {recipe.alcoholicOrNot}
              </p>
            )}
            <button
              type="button"
              onClick={ () => btnShare(`/${recipe.type}s/${recipe.id}`, `${recipe.id}`) }
            >
              {board[recipe.id] && <h3>Link copied!</h3>}
              <img
                data-testid={ `${index}-horizontal-share-btn` }
                src={ compartilharLink }
                alt="compartilhar"
              />
            </button>
          </div>
        ))}
      </div>
    </>
  );
}