105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { RatingInput, RatingBadge } from "@/components/ui/rating-input"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
|
|
interface EntityRatingProps {
|
|
entityType: "show" | "song" | "venue" | "tour" | "performance"
|
|
entityId: number
|
|
compact?: boolean
|
|
}
|
|
|
|
export function EntityRating({ entityType, entityId, compact = false }: EntityRatingProps) {
|
|
const [userRating, setUserRating] = useState(0)
|
|
const [averageRating, setAverageRating] = useState(0)
|
|
const [loading, setLoading] = useState(false)
|
|
const [hasRated, setHasRated] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Fetch average rating
|
|
fetch(`${getApiUrl()}/social/ratings/average?${entityType}_id=${entityId}`)
|
|
.then(res => res.ok ? res.json() : 0)
|
|
.then(data => setAverageRating(data || 0))
|
|
.catch(() => setAverageRating(0))
|
|
}, [entityType, entityId])
|
|
|
|
const handleRate = async (score: number) => {
|
|
const token = localStorage.getItem("token")
|
|
if (!token) {
|
|
alert("Please log in to rate.")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
try {
|
|
const body: Record<string, unknown> = { score }
|
|
body[`${entityType}_id`] = entityId
|
|
|
|
const res = await fetch(`${getApiUrl()}/social/ratings`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify(body)
|
|
})
|
|
|
|
if (!res.ok) throw new Error("Failed to submit rating")
|
|
|
|
const data = await res.json()
|
|
setUserRating(data.score)
|
|
setHasRated(true)
|
|
|
|
// Re-fetch average
|
|
fetch(`${getApiUrl()}/social/ratings/average?${entityType}_id=${entityId}`)
|
|
.then(res => res.ok ? res.json() : averageRating)
|
|
.then(setAverageRating)
|
|
} catch (err) {
|
|
console.error(err)
|
|
alert("Error submitting rating")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{averageRating > 0 && (
|
|
<RatingBadge value={averageRating} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="border rounded-lg p-4 bg-card">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className="text-sm font-medium">Your Rating</span>
|
|
{averageRating > 0 && (
|
|
<span className="text-xs text-muted-foreground">
|
|
Community avg: <span className="font-medium">{averageRating.toFixed(1)}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<RatingInput
|
|
value={userRating}
|
|
onChange={handleRate}
|
|
showSlider={true}
|
|
/>
|
|
|
|
{loading && (
|
|
<p className="text-xs text-muted-foreground mt-2 animate-pulse">
|
|
Submitting...
|
|
</p>
|
|
)}
|
|
{hasRated && !loading && (
|
|
<p className="text-xs text-green-600 mt-2">
|
|
Rating saved!
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|