feat: add room likes feature

- Users can like/unlike rooms - Like count displayed on room cards - LikeButton component with heart icon - room_likes table with unique constraint
2026-06-30 21:57:28 -05:00
parent 7eae73eefb
commit 2353198924
3 changed files with 161 additions and 32 deletions
@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface LikeButtonProps {
+  roomId: number;
+}
+
+export default function LikeButton({ roomId }: LikeButtonProps) {
+  const [liked, setLiked] = useState(false);
+  const [totalLikes, setTotalLikes] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/rooms/${roomId}/likes`)
+      .then(res => res.json())
+      .then(data => {
+        setLiked(data.likedByUser);
+        setTotalLikes(data.totalLikes);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [roomId]);
+
+  const toggleLike = async () => {
+    try {
+      const res = await fetch(`/api/rooms/${roomId}/likes`, { method: 'POST' });
+      if (res.ok) {
+        const data = await res.json();
+        setLiked(data.liked);
+        setTotalLikes(data.totalLikes);
+      }
+    } catch (err) {
+      console.error('Failed to toggle like:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        gap: '0.35rem',
+        padding: '0.4rem 0.75rem',
+        background: 'rgba(0,0,0,0.04)',
+        borderRadius: '999px',
+        fontSize: '13px',
+        color: '#666'
+      }}>
+        ...
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleLike}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.35rem',
+        padding: '0.4rem 0.75rem',
+        background: liked ? '#fee2e2' : 'rgba(0,0,0,0.04)',
+        border: 'none',
+        borderRadius: '999px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: 500,
+        color: liked ? '#dc2626' : '#666',
+        transition: 'all 0.2s ease',
+      }}
+      title={liked ? 'Unlike this room' : 'Like this room'}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill={liked ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+      </svg>
+      {totalLikes > 0 && <span>{totalLikes}</span>}
+    </button>
+  );
+}