September 18, 2023

Componente Button añadir a favorito en Local Store NextJS 13.4.

toscadev

@ ToscaDevsJS

"use client";

import { useEffect, useState } from "react";

export const ButtonFavorite = ({ id }: { id: number }) => {
  const [isFavorite, setIsFavorite] = useState(false);

  useEffect(() => {
    setIsFavorite(existInFavorite(id));
  }, [id]);

  const toogleFavorite = () => {
    let favorite: number[] = JSON.parse(
      localStorage.getItem("favorite") || "[]"
    );

    if (favorite.includes(id)) {
      favorite = favorite.filter((item) => item !== id);
    } else {
      favorite.push(id);
    }

    localStorage.setItem("favorite", JSON.stringify(favorite));
    setIsFavorite(existInFavorite(id)); // actualiza el estado luego de cambiar el localStorage
  };

  const existInFavorite = (id: number): boolean => {
    const favorite: number[] = JSON.parse(
      localStorage.getItem("favorite") || "[]"
    );
    return favorite.includes(id);
  };

  return (
    <>
      <button className="p-4 bg-slate-500 rounded-2xl" onClick={toogleFavorite}>
        {isFavorite ? "❤️" : "♡"}
      </button>
    </>
  );
};

Descripción del Componente `ButtonFavorite`

El componente ButtonFavorite es un botón que permite a los usuarios marcar o desmarcar un ítem como favorito. A continuación, se desglosa su funcionalidad:

1. Propiedades (Props):

id: Es un número único que identifica al ítem que el usuario desea marcar o desmarcar como favorito.

2. Estado:

isFavorite: Es una variable de estado que determina si el ítem está marcado como favorito (true) o no (false).

3. Efectos (useEffect):

Al cargar el componente o cuando la propiedad id cambia, se invoca un efecto que establece el valor inicial de isFavorite comprobando si el ítem ya existe en la lista de favoritos almacenada en el localStorage.

4. Funciones:

toogleFavorite: Esta función permite conmutar el estado de favorito del ítem. Si el ítem ya está en la lista de favoritos, se elimina; de lo contrario, se añade. Luego de esto, se actualiza el estado isFavorite.
existInFavorite: Es una función auxiliar que verifica si un ítem está marcado como favorito consultando el localStorage.

5. Renderizado:

Muestra un botón que, cuando se pulsa, invoca la función toogleFavorite. Si el ítem es un favorito, muestra el icono "❤️", de lo contrario muestra "♡".

Mostrar la página de favoritos, leyendo el localStorage:

App

favorite/page.tsx

"use client";
import Link from "next/link";
import React, { useEffect, useState } from "react";

const PageFavotitos = () => {
  const [favorite, setFavorite] = useState([] as number[]);

  useEffect(() => {
    const favorite: number[] = JSON.parse(
      localStorage.getItem("favorite") || "[]"
    );
    setFavorite(favorite);
    console.log(favorite);
  }, []);

  return (
    <>
      <div>PageFavotitos</div>

      {favorite || (
        <section>
          <h1>no hay favoritos</h1>
        </section>
      )}

      {favorite.map((item) => {
        return (
          <Link href={"product/" + item} key={item}>
            <div className="p-4 bg-slate-500 gap-2 mb-1 rounded-2xl">
              <div>id: {item}</div>
            </div>{" "}
          </Link>
        );
      })}
    </>
  );
};

export default PageFavotitos;

Regresar al Blog.