reviews + UI

2025-02-16 11:17:40 +03:00
parent 73c80dcc16
commit fa53707210
7 changed files with 182 additions and 128 deletions
--- a/frontend/style/components/cart-summary.tsx
+++ b/frontend/style/components/cart-summary.tsx
@@ -42,9 +42,9 @@ export function CartSummary() {
        <span>Итого</span>
        <span>{totalPrice} ₽</span>
      </div>
-      <Button className="w-full" size="lg" onClick={handleCheckout}>
+      {/* <Button className="w-full" size="lg" onClick={handleCheckout}>
        {isLoggedIn ? "Перейти к оформлению" : "Войти для оформления"}
-      </Button>
+      </Button> */}
    </div>
  )
 }
--- a/frontend/style/components/header.tsx
+++ b/frontend/style/components/header.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { Search } from "./search"
 import { Button } from "./ui/button"
 import { ShoppingCart, Heart, User, Menu, X } from "lucide-react"
@@ -13,19 +14,24 @@ import { useAuth } from "@/contexts/auth-context"
 import { Badge } from "./ui/badge"
 import { CartSummary } from "./cart-summary"

-
 export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isCartOpen, setIsCartOpen] = useState(false)
  const { getTotalItems, getTotalUniqueItems } = useCart()
  const { getTotalFavorites } = useFavorites()
  const { isLoggedIn } = useAuth()
+  const router = useRouter()
+
+  const handleNavigate = (path: string) => {
+    router.push(path)
+    setIsMenuOpen(false) // Закрываем меню после навигации
+  }

  return (
    <header className="border-b sticky top-0 bg-white z-50">
-      <div className="container mx-auto px-4 py-4 w-[95%]">
+      <div className="container mx-auto px-4 py-4">
        <div className="flex flex-wrap items-center justify-between">
-          <div className="flex items-center w-full sm:w-auto mb-4 sm:mb-0 pl-0">
+          <div className="flex items-center w-full sm:w-auto mb-4 sm:mb-0">
            <Link href="/" className="text-2xl font-bold text-blue-600 mr-4">
              STORE
            </Link>
@@ -56,10 +62,19 @@ export function Header() {
                  )}
                </Link>
              </Button>
-              <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
+              <Link href="/cart">
+              <Button variant="ghost" size="icon" className="relative">
+                <ShoppingCart className="h-5 w-5" />
+                </Button>
+                </Link>
+
+              {/* <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
                <SheetTrigger asChild>
                  <Button variant="ghost" size="icon" className="relative">
                    <ShoppingCart className="h-5 w-5" />
+                    <Link href="/cart" onClick={() => setIsCartOpen(false)}>
+	                        
+                      </Link>
                    {getTotalUniqueItems() > 0 && (
                      <Badge
                        variant="destructive"
@@ -71,6 +86,14 @@ export function Header() {
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-full sm:max-w-md">
+                  
+                  <div className="mt-6">
+                    <Button asChild className="w-full">
+                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
+	                        Перейти в корзину
+                      </Link>
+                    </Button>
+                  </div>
                  <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-bold">Корзина</h2>
                    <SheetClose asChild>
@@ -83,12 +106,13 @@ export function Header() {
                  <div className="mt-6">
                    <Button asChild className="w-full">
                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
-                        Перейти в корзину
+	                        Перейти в корзину
                      </Link>
                    </Button>
                  </div>
+                 
                </SheetContent>
-              </Sheet>
+              </Sheet> */}
            </div>
            <div className="sm:hidden">
              <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
@@ -97,34 +121,34 @@ export function Header() {
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
-                <SheetContent side="right" className="w-full sm:max-w-md">
-                  <div className="flex justify-between items-center mb-6">
-                    <h2 className="text-2xl font-bold">Меню</h2>
-                    <SheetClose asChild>
-                      <Button variant="ghost" size="icon">
-                        <X className="h-5 w-5" />
-                      </Button>
-                    </SheetClose>
-                  </div>
+                <SheetContent side="right" className="h-[100vh] pt-16">
                  <nav className="flex flex-col gap-4">
-                    <CatalogMenu />
-                    <Link
-                      href={isLoggedIn ? "/profile" : "/login"}
+                    <div className="border-b pb-4">
+                      <CatalogMenu onSelect={() => setIsMenuOpen(false)} />
+                    </div>
+                    <button
+                      onClick={() => handleNavigate(isLoggedIn ? "/profile" : "/login")}
                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
                    >
                      <User className="h-5 w-5" />
                      <span>Личный кабинет</span>
-                    </Link>
-                    <Link href="/favorites" className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md">
+                    </button>
+                    <button
+                      onClick={() => handleNavigate("/favorites")}
+                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                    >
                      <Heart className="h-5 w-5" />
                      <span>Избранное</span>
                      {getTotalFavorites() > 0 && <Badge variant="destructive">{getTotalFavorites()}</Badge>}
-                    </Link>
-                    <Link href="/cart" className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md">
+                    </button>
+                    <button
+                      onClick={() => handleNavigate("/cart")}
+                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                    >
                      <ShoppingCart className="h-5 w-5" />
                      <span>Корзина</span>
                      {getTotalUniqueItems() > 0 && <Badge variant="destructive">{getTotalUniqueItems()}</Badge>}
-                    </Link>
+                    </button>
                  </nav>
                </SheetContent>
              </Sheet>
--- a/frontend/style/components/product-detail.tsx
+++ b/frontend/style/components/product-detail.tsx
@@ -2,11 +2,11 @@

 import Image from "next/image"
 import { useState } from "react"
-import { Heart, ShoppingCart, Minus, Plus } from 'lucide-react'
+import { Heart, ShoppingCart, Minus, Plus } from "lucide-react"
 import { Button } from "./ui/button"
 import { useCart } from "@/contexts/cart-context"
 import { useFavorites } from "@/contexts/favorites-context"
-import { Product } from "@/types/product"
+import type { Product } from "@/types/product"
 import { ReviewList } from "./review-list"
 import { ReviewForm } from "./review-form"
 import { useAuth } from "@/contexts/auth-context"
@@ -22,15 +22,18 @@ export function ProductDetail({ product }: ProductDetailProps) {
  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
  const { isLoggedIn } = useAuth()

-  const isInCart = items.some(item => item.id === product.id)
+  const isInCart = items.some((item) => item.id === product.id)

  const handleAddToCart = () => {
    if (!isInCart) {
-      addToCart({
-        id: product.id,
-        title: product.title,
-        price: product.price,
-      }, quantity)
+      addToCart(
+        {
+          id: product.id,
+          title: product.title,
+          price: product.price,
+        },
+        quantity,
+      )
    }
  }

@@ -51,7 +54,7 @@ export function ProductDetail({ product }: ProductDetailProps) {
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-1/2">
          <Image
-            src={product.image}
+            src={product.images?.[0] || "/placeholder.svg"}
            alt={product.title}
            width={500}
            height={500}
@@ -60,9 +63,9 @@ export function ProductDetail({ product }: ProductDetailProps) {
        </div>
        <div className="md:w-1/2 space-y-4">
          <h1 className="text-3xl font-bold">{product.title}</h1>
-          {product.category === 'software' && (
+          {product.category === "software" && (
            <div className="text-sm text-muted-foreground">
-              Тип лицензии: {product.licenseType === 'perpetual' ? 'Бессрочная' : 'Подписка'}
+              Тип лицензии: {product.licenseType === "perpetual" ? "Бессрочная" : "Подписка"}
            </div>
          )}
          <div className="flex items-baseline gap-2">
@@ -72,19 +75,11 @@ export function ProductDetail({ product }: ProductDetailProps) {
            {!isInCart && (
              <>
                <div className="flex items-center gap-2">
-                  <Button 
-                    variant="outline" 
-                    size="icon"
-                    onClick={() => setQuantity(prev => Math.max(1, prev - 1))}
-                  >
+                  <Button variant="outline" size="icon" onClick={() => setQuantity((prev) => Math.max(1, prev - 1))}>
                    <Minus className="h-4 w-4" />
                  </Button>
                  <span className="w-8 text-center">{quantity}</span>
-                  <Button 
-                    variant="outline" 
-                    size="icon"
-                    onClick={() => setQuantity(prev => prev + 1)}
-                  >
+                  <Button variant="outline" size="icon" onClick={() => setQuantity((prev) => prev + 1)}>
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
@@ -99,13 +94,14 @@ export function ProductDetail({ product }: ProductDetailProps) {
              </Button>
            )}
            <Button variant="outline" size="icon" onClick={handleToggleFavorite}>
-              <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
+              <Heart className={`h-5 w-5 ${isFavorite(product.id) ? "fill-red-500 text-red-500" : ""}`} />
            </Button>
          </div>
          <div className="border-t pt-4">
            <h2 className="text-xl font-semibold mb-2">Описание</h2>
            <p className="text-gray-600">
-              {product.description || 'Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта.'}
+              {product.description ||
+                "Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта."}
            </p>
          </div>
        </div>
@@ -114,14 +110,20 @@ export function ProductDetail({ product }: ProductDetailProps) {
        <h2 className="text-2xl font-bold mb-4">Отзывы</h2>
        {isLoggedIn ? (
          <>
-            <ReviewList reviews={product.reviews} />
+            <ReviewList productId={product.id} />
            <div className="mt-8">
              <h3 className="text-xl font-semibold mb-4">Оставить отзыв</h3>
              <ReviewForm productId={product.id} />
            </div>
          </>
        ) : (
-          <p className="text-gray-600">Чтобы просматривать и оставлять отзывы, пожалуйста, <Link href="/login" className="text-blue-600 hover:underline">войдите в систему</Link>.</p>
+          <p className="text-gray-600">
+            Чтобы просматривать и оставлять отзывы, пожалуйста,{" "}
+            <Link href="/login" className="text-blue-600 hover:underline">
+              войдите в систему
+            </Link>
+            .
+          </p>
        )}
      </div>
    </div>
--- a/frontend/style/components/review-form.tsx
+++ b/frontend/style/components/review-form.tsx
@@ -17,20 +17,19 @@ export function ReviewForm({ productId }: ReviewFormProps) {
  const [rating, setRating] = useState(0)
  const [comment, setComment] = useState("")
  const { isLoggedIn } = useAuth()
-  const {email} = useAuth();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    const reviewData = {
-      username: {email}=useAuth(), // Здесь можно подтянуть имя из Auth-контекста
+      username: "No name", // Здесь можно подтянуть имя из Auth-контекста
      rating,
      comment,
    }

    try {
   
-      const response = await fetch(`http://localhost:8080/product/1`, {
+      const response = await fetch(`http://localhost:8080/product/${productId}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
--- a/frontend/style/components/review-list.tsx
+++ b/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>
  )
-  
 }
+
--- a/frontend/style/components/reviews.db
+++ b/frontend/style/components/reviews.db
--- a/frontend/style/components/reviews.go
+++ b/frontend/style/components/reviews.go
@@ -3,7 +3,6 @@ package main
 import (
 	"database/sql"
 	"encoding/json"
-	"fmt"
 	"log"
 	"net/http"
 	"strconv"
@@ -65,12 +64,65 @@ func createTable() {
 		log.Fatal("Ошибка создания таблицы:", err)
 	}
 }
+func addReview(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	productID, err := strconv.Atoi(vars["product_id"])
+	if err != nil {
+		http.Error(w, "Некорректный product_id", http.StatusBadRequest)
+		log.Println("Ошибка преобразования product_id:", err)
+		return
+	}
+
+	var review Review
+	if err := json.NewDecoder(r.Body).Decode(&review); err != nil {
+		http.Error(w, "Некорректный JSON", http.StatusBadRequest)
+		log.Println("Ошибка декодирования JSON:", err)
+		return
+	}
+
+	// Игнорируем переданный в JSON product_id и устанавливаем его из URL
+	review.ProductID = productID
+	log.Printf("Добавление отзыва для товара %d: %+v", productID, review)
+
+	stmt, err := db.Prepare(`
+        INSERT INTO reviews (product_id, username, rating, comment, created_at) 
+        VALUES (?, ?, ?, ?, datetime('now'))
+    `)
+	if err != nil {
+		http.Error(w, "Ошибка при подготовке SQL-запроса", http.StatusInternalServerError)
+		log.Println("Ошибка при подготовке запроса:", err)
+		return
+	}
+	defer stmt.Close()
+
+	result, err := stmt.Exec(review.ProductID, review.Username, review.Rating, review.Comment)
+	if err != nil {
+		http.Error(w, "Ошибка при добавлении отзыва", http.StatusInternalServerError)
+		log.Println("Ошибка при выполнении SQL-запроса:", err)
+		return
+	}
+
+	rowsAffected, _ := result.RowsAffected()
+	log.Printf("Добавлено строк: %d для товара %d", rowsAffected, productID)
+
+	// Возвращаем созданный отзыв
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusCreated)
+	json.NewEncoder(w).Encode(review)
+}

 func getReviews(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)
 	productID := vars["product_id"]

-	rows, err := db.Query("SELECT id, product_id, username, rating, comment, created_at FROM reviews WHERE product_id = ?", productID)
+	log.Printf("Получение отзывов для товара %s", productID)
+
+	rows, err := db.Query(`
+        SELECT id, product_id, username, rating, comment, created_at 
+        FROM reviews 
+        WHERE product_id = ? 
+        ORDER BY created_at DESC
+    `, productID)
 	if err != nil {
 		http.Error(w, "Ошибка при получении отзывов", http.StatusInternalServerError)
 		log.Println("Ошибка при запросе отзывов:", err)
@@ -89,55 +141,9 @@ func getReviews(w http.ResponseWriter, r *http.Request) {
 		reviews = append(reviews, review)
 	}

-	// Log the reviews being returned
-	log.Printf("Reviews fetched: %+v", reviews)
-
-	if len(reviews) == 0 {
-		http.Error(w, "Нет отзывов", http.StatusNotFound)
-		return
-	}
+	log.Printf("Найдено %d отзывов для товара %s", len(reviews), productID)

+	// Всегда возвращаем JSON массив, даже если он пустой
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(reviews)
 }
-
-func addReview(w http.ResponseWriter, r *http.Request) {
-	vars := mux.Vars(r)
-	productID, err := strconv.Atoi(vars["product_id"])
-	if err != nil {
-		http.Error(w, "Некорректный product_id", http.StatusBadRequest)
-		log.Println("Ошибка преобразования product_id:", err)
-		return
-	}
-
-	var review Review
-	if err := json.NewDecoder(r.Body).Decode(&review); err != nil {
-		http.Error(w, "Некорректный JSON", http.StatusBadRequest)
-		log.Println("Ошибка декодирования JSON:", err)
-		return
-	}
-
-	review.ProductID = productID
-	log.Printf("Попытка добавить отзыв: %+v", review)
-
-	stmt, err := db.Prepare("INSERT INTO reviews (product_id, username, rating, comment, created_at) VALUES (?, ?, ?, ?, datetime('now'))")
-	if err != nil {
-		http.Error(w, "Ошибка при подготовке SQL-запроса", http.StatusInternalServerError)
-		log.Println("Ошибка при подготовке запроса:", err)
-		return
-	}
-	defer stmt.Close()
-
-	result, err := stmt.Exec(review.ProductID, review.Username, review.Rating, review.Comment)
-	if err != nil {
-		http.Error(w, "Ошибка при добавлении отзыва", http.StatusInternalServerError)
-		log.Println("Ошибка при выполнении SQL-запроса:", err)
-		return
-	}
-
-	rowsAffected, _ := result.RowsAffected()
-	log.Println("Добавлено строк:", rowsAffected)
-
-	w.WriteHeader(http.StatusCreated)
-	fmt.Fprintln(w, "Отзыв успешно добавлен")
-}