MERDE.COM/eternos
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reviews + UI

Browse Source
This commit is contained in:
User
2025-02-16 11:17:40 +03:00
parent 73c80dcc16
commit fa53707210
7 changed files with 182 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/style/components/cart-summary.tsx
View File

@@ -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>
)
}

70
frontend/style/components/header.tsx
View File

@@ -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>

52
frontend/style/components/product-detail.tsx
View File

@@ -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>

5
frontend/style/components/review-form.tsx
View File

@@ -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",

73
frontend/style/components/review-list.tsx
View File

@@ -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>
)
}

BIN
frontend/style/components/reviews.db
View File

Binary file not shown.

106
frontend/style/components/reviews.go
View File

@@ -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, "Отзыв успешно добавлен")
}