Likes y comentarios en Supabase con SQL

La interacción social se vuelve real al agregar likes y comentarios con Supabase y SQL. Aquí verás cómo crear tablas, definir relaciones con usuarios y posts, y conectar la UI para publicar comentarios, contar likes y evitar duplicados, todo sin refrescar la pantalla.

¿Cómo se agregan likes y comentarios en Supabase?

Para habilitar la interacción, se crean dos tablas: likes y comments. Se hace desde el dashboard de Supabase usando el editor de SQL, ejecutando el script con run y confirmando los cambios. Es más rápido que crear columnas manualmente y refuerza el dominio de SQL.

¿Qué estructura tiene la tabla comments?

La tabla de comments incluye: id del comentario, user_id del autor, post_id del post donde comenta, body con el texto, y fecha de creación. Esta última permite ordenar por más nuevos o más antiguos.

• id del comentario único.
• user_id del usuario autenticado.
• post_id que relaciona el comentario con el post.
• body con el contenido del comentario.
• created_at para orden cronológico.

¿Qué estructura tiene la tabla likes?

La tabla de likes es similar pero sin body: id del like, user_id, post_id y created_at. Se aplica una restricción para que un usuario solo pueda dar un like por post.

• id del like único.
• user_id del usuario que da like.
• post_id del post asociado.
• created_at para auditoría básica.

¿Cómo se crean rápido con el editor de SQL?

• Abrir el editor de SQL y pegar la sentencia para crear likes y comments.
• Ejecutar con run y confirmar.
• Verificar en el panel que aparezcan ambas tablas.
• Ventaja: rapidez y control de esquema.

¿Qué cambia en la UI y la lógica del front end?

La UI ya tenía la caja para comentar. Al conectar con Supabase, al publicar se disparan las solicitudes de profile y comment, se inserta el registro y se refleja en la interfaz de inmediato, incluyendo el contador de comentarios. El user_id corresponde al usuario autenticado en la sección de auth.

¿Qué hace el componente PostCard?

El componente recibe ahora cuatro props: post, current user ID, unlike y uncomment. Maneja más estados, conserva username y avatar_url, y coordina la interacción del usuario.

• Propagación del usuario actual para acciones.
• Estados para like, lista de comentarios y contadores.
• Presentación de username y avatar del autor del comentario.

¿Cómo funciona submit comment y el listado?

La función de submit comment gestiona el envío, incrementa el contador y actualiza el listado sin refrescar. El botón actúa como toggle para mostrar u ocultar comentarios, pero siempre indica el total.

• Envío del comentario con user_id, post_id y body.
• Actualización inmediata en pantalla.
• Lectura del usuario logueado para asociar el comentario.

¿Qué lógica vive en page.tsx de homepage?

En page.tsx se obtiene el usuario, se pasan props a los componentes y se maneja la lógica de like y comment. Al insertar en comments, se solicita el single de vuelta para pintar el nuevo registro al instante. El contador de likes ya es oficial: se lee desde la base de datos y se separa por usuario.

• Inserción en comments con retorno de single.
• Lectura y conteo real de likes por post.
• Obtención de perfiles de comentadores para username y avatar.

¿Cómo se valida la interacción y se evitan duplicados?

Al hacer clic en like, el contador sube. Si el mismo usuario vuelve a hacer clic, se quita el like. En la base, el registro aparece y desaparece según la acción. Una restricción impide que un usuario deje dos likes sobre el mismo post.

¿Cómo se refleja en base de datos y network?

• Las solicitudes muestran llamadas a profile y comment exitosas.
• En la tabla de comments se ve user_id, post_id, body y el id generado.
• En likes, el registro se crea o elimina según el toggle.

¿Dónde encontrar el código actualizado?

• Rama: clase ocho en el repository del curso.
• Recursos: script SQL para crear ambas tablas.
• Contexto: integración con Supabase en la nube.

¿Qué habilidades y conceptos refuerzas?

• Modelado con SQL: columnas, tipos y relaciones entre tablas.
• Manejo de Supabase: dashboard, editor de tabla y editor de SQL.
• Lógica de front end: estado, toggle y actualización de contadores.
• Prevención de duplicados: restricción en likes por usuario y post.
• Envío y lectura eficiente: insertar y devolver single para render inmediato.
• Perfiles de usuarios: username, avatar_url y autenticación vinculada a user_id.

¿Quieres compartir cómo estructuraste tus tablas o cómo manejas el contador de likes? Deja tu comentario y cuéntanos tu implementación.