46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { ReviewCard } from "@/components/reviews/review-card"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { PenLine } from "lucide-react"
|
|
|
|
export function UserReviewsList({ userId }: { userId: number }) {
|
|
const [reviews, setReviews] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("token")
|
|
if (!token) return
|
|
|
|
fetch(`${getApiUrl()}/users/${userId}/reviews`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => setReviews(data))
|
|
.catch(err => console.error(err))
|
|
.finally(() => setLoading(false))
|
|
}, [userId])
|
|
|
|
if (loading) return <div>Loading reviews...</div>
|
|
|
|
if (reviews.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<div className="h-12 w-12 rounded-full bg-muted/50 mx-auto mb-4 flex items-center justify-center">
|
|
<PenLine className="h-6 w-6 text-muted-foreground/50" />
|
|
</div>
|
|
<p className="text-muted-foreground font-medium">No reviews written yet</p>
|
|
<p className="text-sm text-muted-foreground/70 mt-1">Share your thoughts on shows you've attended</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{reviews.map((review) => (
|
|
<ReviewCard key={review.id} review={review} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|