reviews + UI

frontend/style/components/review-list.tsx

@@ -1,10 +1,20 @@
+"use client"
+
 import { useEffect, useState } from "react"
-import type { Review } from "@/types/product"
 import { Star } from "lucide-react"
 import { useAuth } from "@/contexts/auth-context"
 import Link from "next/link"
 import { Button } from "./ui/button"
 
+interface Review {
+  id: number
+  product_id: number
+  username: string
+  rating: number
+  comment: string
+  createdAt: string
+}
+
 interface ReviewListProps {
   productId: number
 }
@@ -12,34 +22,41 @@ interface ReviewListProps {
 export function ReviewList({ productId }: ReviewListProps) {
   const { isLoggedIn } = useAuth()
   const [reviews, setReviews] = useState<Review[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     const fetchReviews = async () => {
+      setIsLoading(true)
+      setError(null)
       try {
-        const response = await fetch(`http://localhost:8080/product/1`)
-        if (!response.ok) throw new Error("Ошибка загрузки отзывов")
-  
+        const response = await fetch(`http://localhost:8080/product/${productId}`)
+
+        // Добавляем логирование для отладки
+        console.log("Response status:", response.status)
         const data = await response.json()
-        console.log("Загруженные отзывы:", data) // Check the data received
-        setReviews(data)
+        console.log("Fetched reviews:", data)
+
+        // Проверяем, является ли data массивом
+        if (Array.isArray(data)) {
+          setReviews(data)
+        } else {
+          setReviews([])
+        }
       } catch (error) {
-        console.error(error)
+        console.error("Error fetching reviews:", error)
+        setError("Ошибка при загрузке отзывов")
+        setReviews([])
+      } finally {
+        setIsLoading(false)
       }
     }
-  
-    fetchReviews()
+
+    if (productId) {
+      fetchReviews()
+    }
   }, [productId])
-  
-  
-  interface Review {
-    id: number;
-    product_id: number;
-    username: string;
-    rating: number;
-    comment: string;
-    createdAt: string;
-  }
-  
+
   if (!isLoggedIn) {
     return (
       <div className="text-center py-8">
@@ -51,16 +68,23 @@ export function ReviewList({ productId }: ReviewListProps) {
     )
   }
 
+  if (isLoading) {
+    return <div>Загрузка отзывов...</div>
+  }
+
+  if (error) {
+    return <div className="text-red-500">{error}</div>
+  }
+
   return (
     <div className="space-y-4">
       <h3 className="text-lg font-semibold">Отзывы покупателей</h3>
-      {reviews.length === 0 ? (
+      {!reviews || reviews.length === 0 ? (
         <p>Пока нет отзывов. Будьте первым!</p>
       ) : (
         reviews.map((review) => (
           <div key={review.id} className="border-b pb-4">
             <div className="flex items-center gap-2">
-              {/* Вывод рейтинга с помощью звезд */}
               <div className="flex">
                 {[1, 2, 3, 4, 5].map((star) => (
                   <Star
@@ -69,15 +93,14 @@ export function ReviewList({ productId }: ReviewListProps) {
                   />
                 ))}
               </div>
-              {/* Дата отзыва */}
               <span className="text-sm text-gray-500">{new Date(review.createdAt).toLocaleDateString()}</span>
             </div>
-            {/* Комментарий */}
+            <p className="font-semibold mt-1">{review.username}</p>
             <p className="mt-2">{review.comment}</p>
           </div>
         ))
       )}
     </div>
   )
-  
 }
+