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:
@@ -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 });
|
||||
}
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user