Header Likes

¿Cómo implementar likes y bookmarks en tu aplicación Svelte?

Integrar funcionalidades como los "likes" o "bookmarks" puede añadir un toque interactivo a cualquier aplicación web, similar a las redes sociales modernas como Instagram. En este artículo, aprenderás cómo implementarlas en una aplicación Svelte, gestionando el estado de forma eficiente con Svelte Store.

¿Cómo configurar variables para like y bookmark?

Iniciaremos añadiendo variables necesarias para los "likes" y "bookmarks". Este proceso implica crear variables booleanas en el archivo Svelte:

let like = false;
let bookmark = false;

Estas variables mantendrán el estado de los "likes" y "bookmarks" para cada publicación.

¿Cómo crear una función para manejar likes?

El siguiente paso es implementar una función que altere el estado de la variable like cuando un usuario interactúa con el botón de corazón.

function handleLike() {
  like = !like;
}

Esta función cambia el estado del "like" de false a true o viceversa, similar a como se gestiona en un modal.

¿Cómo aplicar cambios en la interfaz de usuario?

Para reflejar estos cambios en la interfaz de usuario (UI), añade un evento on:click al ícono que desencadena la acción de like:

<icon-heart on:click={handleLike} class:active-like={like}></icon-heart>

La clase active-like se añade dinámicamente cuando like es verdadero, permitiendo modificar estilos en CSS según el estado actual.

¿Cómo implementar bookmarks de manera similar?

Para los bookmarks, se aplica una lógica similar, utilizando una función anónima directamente en el evento on:click.

<icon-bookmark on:click={() => bookmark = !bookmark} class:active-bookmark={bookmark}></icon-bookmark>

Este enfoque muestra cómo implementar funcionalidad sin necesidad de funciones separadas.

¿Cómo crear el efecto de doble clic para likes?

Tal como en Instagram, puedes activar el "like" haciendo doble clic sobre una imagen. Esto se configura utilizando el evento on:dblclick de Svelte:

<figure on:dblclick={handleLike}>
  <img src="ruta/a/la/imagen.jpg" alt="Imagen">
</figure>

El doble clic invoca a la misma función handleLike, propiciando un efecto fluido y consistente en la aplicación.

¿Cómo gestionar el estado global con Svelte Store?

Para contar cuántas publicaciones han sido "liked", usa Svelte Store para compartir estado entre componentes.

¿Cómo crear y configurar un Store?

Primero, crea un archivo store.js dentro de una nueva carpeta llamada store. Allí, importa el método writable de Svelte para definir un estado:

import { writable } from 'svelte/store';

export const likeCount = writable(0);

Este store mantiene un contador que se actualiza cada vez que se da o quita un "like".

¿Cómo actualizar el store desde un componente?

Dentro del componente que gestiona los likes, importa el store y actualiza su valor en la función handleLike:

import { likeCount } from '../store/store';

function handleLike() {
  if (like) {
    likeCount.update(n => n - 1);
  } else {
    likeCount.update(n => n + 1);
  }
  like = !like;
}

Con update, incrementas o decrementas el contador según el estado actual de like.

¿Cómo reflejar cambios del store en la UI?

En el componente del header, importa el store para mostrar el contador dinámicamente:

import { likeCount } from '../store/store';

$: displayLikeCount = $likeCount > 0 ? $likeCount : '';

Al usar $ antes del nombre del store, Svelte otorga reactividad, actualizando automáticamente la vista cuando el estado cambia.

Desafío: Subir tu aplicación a un repositorio en línea

Como tarea adicional, se sugiere subir tu aplicación a un repositorio en línea, como GitHub, GitLab o Bitbucket. Esto no solo respaldará tu progreso, sino que también te preparará para futuros despliegues en la nube.

Con estos pasos, tu aplicación ahora ofrece interactividad atractiva y eficiente. ¡Sigue explorando y añadiendo nuevas funcionalidades para mejorar aún más tu proyecto!