Likes y comentarios con Supabase en tiempo real

Impulsa la interacción en PlatziGram con likes y comentarios conectados a Supabase. Aquí verás cómo crear las tablas, definir relaciones, bloquear duplicados y actualizar contadores desde el front end sin recargar. Todo con una lógica clara y lista para producción.

¿Cómo se crean tablas likes y comments en Supabase con relaciones?

Para acelerar el desarrollo, se usa el editor de SQL del dashboard de Supabase en lugar de crear columnas manualmente. Con una sentencia SQL se generan dos tablas: likes y comments, ambas relacionadas con la tabla de publicaciones (post_new) y con perfiles de usuarios. Tras ejecutar con run, las tablas aparecen listas en la barra lateral y conectadas a la UI.

• Tabla comments: id, user_id, post_id, body y created_at. Permite ordenar por fecha para mostrar los más nuevos o los más antiguos.
• Tabla likes: id, user_id, post_id y created_at. No requiere body.
• Relaciones: user_id referencia al perfil y post_id a la publicación, asegurando integridad.
• Regla clave: un usuario solo puede dar like una vez a un post. Un segundo clic lo quita, evitando duplicados.
• Beneficio: crear tablas por SQL es más rápido y reproducible.

¿Qué cambia en el front end para publicar comentarios y gestionar likes?

La UI ya trae una caja de comentarios. Al publicar, se disparan llamadas de red, se inserta el comentario en Supabase y el contador se actualiza en vivo, sin refrescar la pantalla. Los likes funcionan como toggle: primer clic agrega, segundo clic elimina.

• El componente Postcard ahora recibe cuatro props: post, currentUserId, unlike y uncomment.
• Se agregan estados para manejar conteos y visibilidad de comentarios.
• La función submit comment gestiona el envío del comentario desde el componente.
• Hay un botón tipo toggle para mostrar/ocultar comentarios y, aun cerrado, muestra la cantidad total.
• La lista de comentarios incluye username y body; también el avatar cuando se obtiene el perfil.
• Para likes: el contador en la interfaz refleja el estado real en base de datos y respeta la regla de no duplicar por usuario.

¿Cómo es la lógica con Supabase para insertar, contar y mostrar datos?

En page.tsx se obtiene el usuario actual, se pasan datos a los componentes y se centraliza la lógica de insertar comentarios y gestionar likes. Al insertar en la tabla de comments, se envían user_id, post_id y body; se recibe un single para pintar inmediatamente en la UI. Los contadores ahora leen de la base y se separan por usuario para saber cuántos likes reales tiene cada post.

• Insertar comentarios: llamada a Supabase a la tabla comments con los campos requeridos y retorno del registro insertado.
• Contador oficial de likes: consulta por post y por usuario para evitar duplicados y mostrar el total correcto.
• Listado de comentarios: fetch desde la tabla comments y perfiles de los autores para mostrar username y avatar.
• Autenticación coherente: el user_id registrado en comentarios/likes corresponde al usuario logueado en Auth.
• Habilidades reforzadas: manejo de SQL en Supabase, modelado de datos relacional, control de duplicados, estados en componentes, y actualización optimista sin recarga.

Todos los cambios están disponibles en la rama clase ocho del repositorio de Supabase avanzado, listos para revisar y adaptar a tu proyecto.

¿Tienes dudas sobre la lógica de likes o la inserción de comentarios con Supabase? Comenta qué parte te gustaría profundizar y seguimos construyendo juntos.