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
This commit is contained in:
2026-06-30 21:57:28 -05:00
parent 7eae73eefb
commit 2353198924
3 changed files with 161 additions and 32 deletions
+65 -29
View File
@@ -1,53 +1,89 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
import { getSession } from '@/lib/auth';
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
// GET - check if user liked a room and get total likes
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const roomId = parseInt(params.id, 10);
if (isNaN(roomId)) {
return NextResponse.json({ error: 'Invalid room ID' }, { status: 400 });
const session = await getSession();
// Get total likes
const { rows: countRows } = await db.query(
'SELECT COUNT(*) as count FROM room_likes WHERE room_id = $1',
[roomId]
);
const totalLikes = parseInt(countRows[0].count) || 0;
// Check if current user liked this room
let likedByUser = false;
if (session) {
const { rows: likeRows } = await db.query(
'SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2',
[roomId, session.id]
);
likedByUser = likeRows.length > 0;
}
const [countResult, userLikeResult] = await Promise.all([
db.query('SELECT COUNT(*) AS count FROM room_likes WHERE room_id = $1', [roomId]),
db.query('SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2', [roomId, 1]),
]);
return NextResponse.json({
count: parseInt(countResult.rows[0].count, 10),
user_liked: userLikeResult.rows.length > 0,
});
return NextResponse.json({ totalLikes, likedByUser });
} catch (err: any) {
// Table may not exist yet — return safe defaults
return NextResponse.json({ count: 0, user_liked: false });
return NextResponse.json({ error: err.message || 'Failed to get likes' }, { status: 500 });
}
}
export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
// POST - toggle like (add if not liked, remove if already liked)
export async function POST(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const roomId = parseInt(params.id, 10);
if (isNaN(roomId)) {
return NextResponse.json({ error: 'Invalid room ID' }, { status: 400 });
const session = await getSession();
if (!session) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
// TODO: get user_id from session/auth instead of hardcoded
const userId = 1;
const roomId = parseInt(params.id, 10);
// Toggle: if already liked, unlike; otherwise like
const existing = await db.query(
'SELECT id FROM room_likes WHERE room_id = $1 AND user_id = $2',
[roomId, userId]
// Check if already liked
const { rows: existing } = await db.query(
'SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2',
[roomId, session.id]
);
if (existing.rows.length > 0) {
await db.query('DELETE FROM room_likes WHERE id = $1', [existing.rows[0].id]);
let liked: boolean;
if (existing.length > 0) {
// Unlike - remove the like
await db.query(
'DELETE FROM room_likes WHERE room_id = $1 AND user_id = $2',
[roomId, session.id]
);
liked = false;
} else {
await db.query('INSERT INTO room_likes (room_id, user_id) VALUES ($1, $2)', [roomId, userId]);
// Like - add the like
await db.query(
'INSERT INTO room_likes (room_id, user_id) VALUES ($1, $2)',
[roomId, session.id]
);
liked = true;
}
const countResult = await db.query('SELECT COUNT(*) AS count FROM room_likes WHERE room_id = $1', [roomId]);
// Get updated count
const { rows: countRows } = await db.query(
'SELECT COUNT(*) as count FROM room_likes WHERE room_id = $1',
[roomId]
);
const totalLikes = parseInt(countRows[0].count) || 0;
return NextResponse.json({ count: parseInt(countResult.rows[0].count, 10) });
// Update the rooms table for quick access
await db.query(
'UPDATE rooms SET likes_count = $1 WHERE id = $2',
[totalLikes, roomId]
);
return NextResponse.json({ liked, totalLikes });
} catch (err: any) {
return NextResponse.json({ error: err.message || 'Failed to toggle like' }, { status: 500 });
}
+6 -2
View File
@@ -3,6 +3,7 @@
import { useEffect, useState, useRef } from 'react';
import { formatDisplayDate } from '@/lib/date';
import RoomCalendar from '@/components/RoomCalendar';
import LikeButton from '@/components/LikeButton';
interface Room {
id: number;
@@ -420,8 +421,11 @@ export default function RoomsPage() {
{/* ─── Room Info ─── */}
<div style={{ padding: '1.5rem', flex: 1, display: 'flex', flexDirection: 'column' }}>
<h2 style={{ margin: '0 0 0.5rem', color: navy, fontSize: '24px' }}>{room.name}</h2>
<p style={{ color: '#555', lineHeight: 1.5, flex: 1 }}>{room.description}</p>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<h2 style={{ margin: 0, color: navy, fontSize: '24px' }}>{room.name}</h2>
<LikeButton roomId={room.id} />
</div>
<p style={{ color: '#555', lineHeight: 1.5, flex: 1, marginTop: '0.5rem' }}>{room.description}</p>
{/* ─── Amenity Icons ─── */}
{room.amenities && room.amenities.length > 0 && (
+89
View File
@@ -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>
);
}