reviews

frontend/style/components/review-list.tsx

@@ -1,18 +1,53 @@
-import { Review } from "@/types/product"
-import { Star } from 'lucide-react'
+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 ReviewListProps {
-  reviews: Review[]
+  productId: number
 }
 
-export function ReviewList({ reviews }: ReviewListProps) {
+export function ReviewList({ productId }: ReviewListProps) {
   const { isLoggedIn } = useAuth()
+  const [reviews, setReviews] = useState<Review[]>([])
 
+  useEffect(() => {
+    const fetchReviews = async () => {
+      try {
+        const response = await fetch(`http://localhost:8080/product/1`)
+        if (!response.ok) throw new Error("Ошибка загрузки отзывов")
+  
+        const data = await response.json()
+        console.log("Загруженные отзывы:", data) // Check the data received
+        setReviews(data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  
+    fetchReviews()
+  }, [productId])
+  
+  
+  interface Review {
+    id: number;
+    product_id: number;
+    username: string;
+    rating: number;
+    comment: string;
+    createdAt: string;
+  }
+  
   if (!isLoggedIn) {
     return (
-      <p className="text-gray-600">Чтобы просматривать отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
+      <div className="text-center py-8">
+        <p className="text-gray-600 mb-4">Чтобы просматривать отзывы, пожалуйста, войдите в систему.</p>
+        <Button asChild variant="outline" className="rounded-full">
+          <Link href="/login">Войти</Link>
+        </Button>
+      </div>
     )
   }
 
@@ -25,25 +60,24 @@ export function ReviewList({ reviews }: ReviewListProps) {
         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
                     key={star}
-                    className={`h-5 w-5 ${
-                      star <= review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'
-                    }`}
+                    className={`h-5 w-5 ${star <= review.rating ? "text-yellow-400 fill-yellow-400" : "text-gray-300"}`}
                   />
                 ))}
               </div>
-              <span className="text-sm text-gray-500">
-                {new Date(review.createdAt).toLocaleDateString()}
-              </span>
+              {/* Дата отзыва */}
+              <span className="text-sm text-gray-500">{new Date(review.createdAt).toLocaleDateString()}</span>
             </div>
+            {/* Комментарий */}
             <p className="mt-2">{review.comment}</p>
           </div>
         ))
       )}
     </div>
   )
+  
 }
-