4 Commits

9 changed files with 402 additions and 340 deletions

View File

@@ -8,32 +8,42 @@ import CatalogPage from './pages/CatalogPage.jsx';
import ContactsPage from './pages/ContactsPage.jsx';
import LikesPage from './pages/LikesPage.jsx';
import BasketPage from './pages/BasketPage.jsx';
import ErrorPage from './pages/ErrorPage.jsx';
import Footer from './components/Footer.jsx';
import Navbar from './components/Navbar.jsx';
import './App.css'
// Создаем отдельный компонент для роутинга
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<IndexPage />} />
<Route path="/catalog" element={<CatalogPage />} />
<Route path="/contacts" element={<ContactsPage />} />
<Route path="/likes" element={<LikesPage />} />
<Route path="/basket" element={<BasketPage />} />
</Routes>
);
}
export default function App() {
return (
<BasketProvider>
<LikesProvider>
<ToastContainer />
<BrowserRouter>
<BrowserRouter
future={{
v7_startTransition: true,
v7_relativeSplatPath: true
}}
>
<BasketProvider>
<LikesProvider>
<ToastContainer />
<Navbar />
<main style={{ flex: 1 }}>
<Routes>
<Route path="/" element={<IndexPage />} />
<Route path="/catalog" element={<CatalogPage />} />
<Route path="/contacts" element={<ContactsPage />} />
<Route path="/likes" element={<LikesPage />} />
<Route path="/basket" element={<BasketPage />} />
<Route path="*" element={<ErrorPage/>}/>
</Routes>
<main>
<AppRoutes />
</main>
<Footer />
</BrowserRouter>
</LikesProvider>
</BasketProvider>
</LikesProvider>
</BasketProvider>
</BrowserRouter>
);
}

View File

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import { useBasketContext } from '../context/BasketContext.jsx';
export default function BasketPage() {
const { basketItems, removeFromBasket, updateQuantity, clearBasket, calculateTotal, loading, error } = useBasketContext();
const { basketItems, removeFromBasket, clearBasket, calculateTotal, loading, error } = useBasketContext();
const [showCheckoutSuccess, setShowCheckoutSuccess] = useState(false);
const handleCheckout = () => {
@@ -88,47 +88,32 @@ export default function BasketPage() {
{basketItems.map(item => (
<div key={item.id} className="row align-items-center mb-3 basket-item">
<div className="col-md-2">
<img src={item.image} alt={item.name} className="img-fluid rounded" style={{maxHeight: "80px"}} />
<img
src={item.image}
alt={item.name}
className="img-fluid rounded"
style={{maxHeight: "80px", objectFit: 'cover', width: '100%'}}
onError={(e) => {
e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=';
}}
/>
</div>
<div className="col-md-4">
<div className="col-md-6">
<h6 className="mb-1">{item.name}</h6>
<p className="text-muted small mb-0">{item.description}</p>
<small className="text-muted">
Category: {item.category} | Condition: {item.condition}
</small>
</div>
<div className="col-md-2">
<span className="fw-bold">${item.price}</span>
</div>
<div className="col-md-2">
<div className="input-group input-group-sm">
<button
className="btn btn-outline-secondary"
type="button"
onClick={() => updateQuantity(item.id, item.quantity - 1)}
>
-
</button>
<input
type="number"
className="form-control text-center"
value={item.quantity}
min="1"
onChange={(e) => updateQuantity(item.id, parseInt(e.target.value) || 1)}
/>
<button
className="btn btn-outline-secondary"
type="button"
onClick={() => updateQuantity(item.id, item.quantity + 1)}
>
+
</button>
</div>
</div>
<div className="col-md-2">
<span className="fw-bold me-3">${(parseFloat(item.price) * item.quantity).toFixed(2)}</span>
<button
className="btn btn-sm btn-outline-danger"
onClick={() => removeFromBasket(item.id)}
>
<i className="bi bi-trash"></i>
<i className="bi bi-trash"></i> Удалить
</button>
</div>
</div>

View File

@@ -6,40 +6,39 @@ import ProductForm from '../components/ProductForm.jsx';
export default function CatalogPage() {
const {
products,
shmotki,
categories,
conditions,
loading,
error,
addProduct,
updateProduct,
deleteProduct,
addShmotka,
updateShmotka,
deleteShmotka,
getCategoryName,
getConditionName
} = useProducts();
const [showAddForm, setShowAddForm] = useState(false);
const [sortBy, setSortBy] = useState(''); // '' - без сортировки, 'price_asc' - по возрастанию, 'price_desc' - по убыванию
const [sortBy, setSortBy] = useState('');
// Функция для сортировки товаров
const getSortedProducts = () => {
const productsCopy = [...products];
const getSortedShmotki = () => {
const shmotkiCopy = [...shmotki];
switch (sortBy) {
case 'price_asc':
return productsCopy.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
return shmotkiCopy.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
case 'price_desc':
return productsCopy.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
return shmotkiCopy.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
default:
return productsCopy;
return shmotkiCopy;
}
};
const sortedProducts = getSortedProducts();
const sortedShmotki = getSortedShmotki();
const handleAddProduct = async (productData) => {
const handleAddShmotka = async (shmotkaData) => {
try {
await addProduct(productData);
await addShmotka(shmotkaData);
setShowAddForm(false);
alert('Товар успешно добавлен!');
} catch (err) {
@@ -47,18 +46,18 @@ export default function CatalogPage() {
}
};
const handleEditProduct = async (id, productData) => {
const handleEditShmotka = async (id, shmotkaData) => {
try {
await updateProduct(id, productData);
await updateShmotka(id, shmotkaData);
alert('Товар успешно обновлен!');
} catch (err) {
alert('Ошибка при обновлении товара');
}
};
const handleDeleteProduct = async (id) => {
const handleDeleteShmotka = async (id) => {
try {
await deleteProduct(id);
await deleteShmotka(id);
} catch (err) {
alert('Ошибка при удалении товара');
}
@@ -104,7 +103,6 @@ export default function CatalogPage() {
</button>
</div>
{/* Панель сортировки */}
<div className="row mb-4">
<div className="col-md-6">
<div className="card border-0 shadow-sm">
@@ -132,7 +130,6 @@ export default function CatalogPage() {
</div>
</div>
{/* Информация о сортировке */}
<div className="col-md-6">
{sortBy && (
<div className="card border-0 shadow-sm">
@@ -141,7 +138,7 @@ export default function CatalogPage() {
<i className="bi bi-info-circle me-1"></i>
{sortBy === 'price_asc' && 'Сортировка: от дешевых к дорогим'}
{sortBy === 'price_desc' && 'Сортировка: от дорогих к дешевым'}
{sortedProducts.length > 0 && ` (${sortedProducts.length} товаров)`}
{sortedShmotki.length > 0 && ` (${sortedShmotki.length} товаров)`}
</small>
</div>
</div>
@@ -155,7 +152,7 @@ export default function CatalogPage() {
<ProductForm
categories={categories}
conditions={conditions}
onSubmit={handleAddProduct}
onSubmit={handleAddShmotka}
onCancel={() => setShowAddForm(false)}
isEditing={false}
/>
@@ -163,23 +160,22 @@ export default function CatalogPage() {
</div>
)}
{/* 3 карточки в ряд на всех экранах кроме мобильных */}
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
{sortedProducts.map(product => (
{sortedShmotki.map(shmotka => (
<ProductCard
key={product.id}
product={product}
key={shmotka.id}
shmotka={shmotka}
categories={categories}
conditions={conditions}
getCategoryName={getCategoryName}
getConditionName={getConditionName}
onEdit={handleEditProduct}
onDelete={handleDeleteProduct}
onEdit={handleEditShmotka}
onDelete={handleDeleteShmotka}
/>
))}
</div>
{sortedProducts.length === 0 && !showAddForm && (
{sortedShmotki.length === 0 && !showAddForm && (
<div className="text-center py-5">
<h3>Товаров пока нет</h3>
<p className="text-muted">Добавьте первый товар в каталог</p>

View File

@@ -1,4 +1,4 @@
import { useContext } from 'react';
// src/pages/LikesPage.jsx
import { Link } from 'react-router-dom';
import { useLikesContext } from '../context/LikesContext.jsx';
import { useBasketContext } from '../context/BasketContext.jsx';
@@ -7,19 +7,19 @@ export default function LikesPage() {
const { likesItems, removeFromLikes, loading, error } = useLikesContext();
const { addToBasket } = useBasketContext();
const handleMoveToBasket = async (product) => {
const handleMoveToBasket = async (shmotka) => {
try {
await addToBasket(product);
await removeFromLikes(product.id);
await addToBasket(shmotka);
await removeFromLikes(shmotka.id);
alert('Товар перенесен в корзину!');
} catch (err) {
alert('Ошибка при переносе товара в корзину');
}
};
const handleRemoveFromLikes = async (productId) => {
const handleRemoveFromLikes = async (shmotkaId) => {
try {
await removeFromLikes(productId);
await removeFromLikes(shmotkaId);
alert('Товар удален из избранного!');
} catch (err) {
alert('Ошибка при удалении из избранного');
@@ -69,37 +69,47 @@ export default function LikesPage() {
<main className="container my-4">
<h2 className="mb-4 text-center">Избранное</h2>
<div className="row g-3">
{likesItems.map(item => (
<div key={item.id} className="col-md-4">
{likesItems.map(shmotka => (
<div key={shmotka.id} className="col-md-4">
<div className="card h-100 border-0 shadow">
<img src={item.image} className="card-img-top" alt={item.name} />
<img
src={shmotka.image}
className="card-img-top"
alt={shmotka.name}
style={{ height: '250px', objectFit: 'cover' }}
onError={(e) => {
e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=';
}}
/>
<div className="card-body">
<h5 className="card-title">{item.name}</h5>
<p className="card-text">{item.description}</p>
<h5 className="card-title">{shmotka.name}</h5>
<p className="card-text">{shmotka.description}</p>
<div className="row">
<div className="col-6">
<h6 className="mb-1">Category:</h6>
<p className="card-text">{item.category || '-'}</p>
<p className="card-text">{shmotka.category}</p>
</div>
<div className="col-6">
<h6 className="mb-1">Condition:</h6>
<p className="card-text">{item.condition || '-'}</p>
<p className="card-text">{shmotka.condition}</p>
</div>
</div>
</div>
<div className="card-footer bg-transparent">
<div className="d-flex justify-content-between align-items-end">
<span className="fw-bold text-muted fs-3">${item.price}</span>
<span className="fw-bold text-muted fs-3">
${shmotka.price}
</span>
<div className="d-flex flex-column gap-1">
<button
className="btn btn-sm btn-outline-primary"
onClick={() => handleMoveToBasket(item)}
onClick={() => handleMoveToBasket(shmotka)}
>
<i className="bi bi-cart-plus"></i> В корзину
</button>
<button
className="btn btn-sm btn-outline-danger"
onClick={() => handleRemoveFromLikes(item.id)}
onClick={() => handleRemoveFromLikes(shmotka.id)}
>
<i className="bi bi-trash"></i> Удалить
</button>

View File

@@ -4,14 +4,14 @@ import { useBasketContext } from '../context/BasketContext.jsx';
import { useLikesContext } from '../context/LikesContext.jsx';
import ProductForm from './ProductForm.jsx';
const ProductCard = ({ product, categories, conditions, getCategoryName, getConditionName, onEdit, onDelete }) => {
const ProductCard = ({ shmotka, categories, conditions, getCategoryName, getConditionName, onEdit, onDelete }) => {
const { addToBasket } = useBasketContext();
const { isLiked, toggleLike } = useLikesContext();
const [showEditForm, setShowEditForm] = useState(false);
const handleAddToBasket = async () => {
try {
await addToBasket(product);
await addToBasket(shmotka);
alert('Товар добавлен в корзину!');
} catch (err) {
alert('Ошибка при добавлении в корзину');
@@ -20,7 +20,7 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
const handleLike = async () => {
try {
const wasAdded = await toggleLike(product);
const wasAdded = await toggleLike(shmotka);
if (wasAdded) {
alert('Товар добавлен в избранное!');
} else {
@@ -36,9 +36,9 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
};
const handleDelete = async () => {
if (window.confirm(`Вы уверены, что хотите удалить товар "${product.name}"?`)) {
if (window.confirm(`Вы уверены, что хотите удалить товар "${shmotka.name}"?`)) {
try {
await onDelete(product.id);
await onDelete(shmotka.id);
alert('Товар удален!');
} catch (err) {
alert('Ошибка при удалении товара');
@@ -46,9 +46,9 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
}
};
const handleSaveEdit = async (productData) => {
const handleSaveEdit = async (shmotkaData) => {
try {
await onEdit(product.id, productData);
await onEdit(shmotka.id, shmotkaData);
setShowEditForm(false);
} catch (err) {
alert('Ошибка при сохранении изменений');
@@ -63,7 +63,7 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
return (
<div className="col">
<ProductForm
product={product}
product={shmotka}
categories={categories}
conditions={conditions}
onSubmit={handleSaveEdit}
@@ -77,12 +77,11 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
return (
<div className="col">
<div className="card h-100 border-0 shadow" style={{ minHeight: '550px' }}>
{/* Увеличиваем высоту изображения */}
<div style={{ height: '450px', overflow: 'hidden' }}>
<img
src={product.image}
src={shmotka.image}
className="card-img-top"
alt={product.name}
alt={shmotka.name}
style={{
width: '100%',
height: '100%',
@@ -96,22 +95,22 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
/>
</div>
<div className="card-body d-flex flex-column">
<h5 className="card-title">{product.name}</h5>
<p className="card-text flex-grow-1">{product.description}</p>
<h5 className="card-title">{shmotka.name}</h5>
<p className="card-text flex-grow-1">{shmotka.description}</p>
<div className="row mt-auto">
<div className="col-6">
<h6 className="mb-1">Category:</h6>
<p className="card-text">{getCategoryName(product.category)}</p>
<p className="card-text">{getCategoryName(shmotka.category)}</p>
</div>
<div className="col-6">
<h6 className="mb-1">Condition:</h6>
<p className="card-text">{getConditionName(product.condition)}</p>
<p className="card-text">{getConditionName(shmotka.condition)}</p>
</div>
</div>
</div>
<div className="card-footer bg-transparent">
<div className="d-flex justify-content-between align-items-center">
<span className="fw-bold text-muted fs-5">${product.price}</span>
<span className="fw-bold text-muted fs-5">${shmotka.price}</span>
<button
className="btn btn-sm"
style={{backgroundColor: "#00264d", color: "white"}}
@@ -122,11 +121,11 @@ const ProductCard = ({ product, categories, conditions, getCategoryName, getCond
</div>
<div className="mt-2 d-flex justify-content-between">
<button
className={`btn btn-sm btn-outline-secondary like-btn ${isLiked(product.id) ? 'liked' : ''}`}
className={`btn btn-sm btn-outline-secondary like-btn ${isLiked(shmotka.id) ? 'liked' : ''}`}
onClick={handleLike}
>
<i className="bi bi-heart"></i>
{isLiked(product.id) ? ' В избранном' : ' В избранное'}
{isLiked(shmotka.id) ? ' В избранном' : ' В избранное'}
</button>
<div className="btn-group">
<button

View File

@@ -1,23 +1,23 @@
// src/components/ProductForm.jsx
import { useState, useEffect } from 'react';
const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEditing = false }) => {
const [formData, setFormData] = useState({
name: '',
price: '',
category: '',
condition: '',
categoryId: '',
conditionId: '',
description: '',
image: ''
});
// Заполняем форму данными товара при редактировании
useEffect(() => {
if (isEditing && product) {
setFormData({
name: product.name || '',
price: product.price || '',
category: product.category || '',
condition: product.condition || '',
categoryId: product.category || '',
conditionId: product.condition || '',
description: product.description || '',
image: product.image || ''
});
@@ -33,7 +33,18 @@ const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEd
const handleSubmit = (e) => {
e.preventDefault();
onSubmit(formData);
const shmotkaData = {
name: formData.name,
price: parseFloat(formData.price),
description: formData.description,
image: formData.image,
categoryId: parseInt(formData.categoryId),
conditionId: parseInt(formData.conditionId),
inStock: true
};
onSubmit(shmotkaData);
};
return (
@@ -70,11 +81,11 @@ const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEd
/>
</div>
<div className="col-md-6">
<label htmlFor="category" className="form-label">Категория</label>
<label htmlFor="categoryId" className="form-label">Категория</label>
<select
className="form-select"
id="category"
value={formData.category}
id="categoryId"
value={formData.categoryId}
onChange={handleChange}
required
>
@@ -85,11 +96,11 @@ const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEd
</select>
</div>
<div className="col-md-6">
<label htmlFor="condition" className="form-label">Состояние</label>
<label htmlFor="conditionId" className="form-label">Состояние</label>
<select
className="form-select"
id="condition"
value={formData.condition}
id="conditionId"
value={formData.conditionId}
onChange={handleChange}
required
>
@@ -120,6 +131,20 @@ const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEd
onChange={handleChange}
required
/>
{formData.image && (
<div className="mt-2">
<small className="text-muted">Предпросмотр:</small>
<img
src={formData.image}
alt="Preview"
className="img-fluid mt-1 rounded"
style={{maxHeight: '100px'}}
onError={(e) => {
e.target.style.display = 'none';
}}
/>
</div>
)}
</div>
<div className="col-12">
<div className="d-flex gap-2">

View File

@@ -1,14 +1,13 @@
// src/hooks/useBasket.js
import { useState, useEffect } from 'react';
const apiUrl = 'http://localhost:3000';
const apiUrl = 'http://localhost:8080/api/1.0';
export const useBasket = () => {
const [basketItems, setBasketItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Загрузить корзину из JSON Server при монтировании
useEffect(() => {
loadBasketFromServer();
}, []);
@@ -19,92 +18,52 @@ export const useBasket = () => {
const response = await fetch(`${apiUrl}/basket`);
if (response.ok) {
const data = await response.json();
setBasketItems(data);
console.log('Basket data from server:', data);
// Преобразуем данные в формат фронтенда
const mappedItems = data.map(item => {
const shmotka = item.shmotka;
return {
id: shmotka?.id || item.shmotkaId,
name: shmotka?.name || 'Без названия',
price: shmotka?.price || 0,
description: shmotka?.description || 'Описание отсутствует',
image: shmotka?.imageUrl || 'img/placeholder.jpg',
category: shmotka?.category.name || 'Unknown',
condition: shmotka?.condition.name || 'Unknown',
categoryId: shmotka?.categoryId,
conditionId: shmotka?.conditionId,
// Сохраняем оригинальные данные для удаления
_basketItemId: item.id
};
});
setBasketItems(mappedItems);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (err) {
console.error('Ошибка при загрузке корзины:', err);
setError('Ошибка загрузки корзины');
setError('Ошибка загрузки корзины: ' + err.message);
} finally {
setLoading(false);
}
};
// Добавить товар в корзину
const addToBasket = async (product) => {
const removeFromBasket = async (shmotkaId) => {
try {
const existingItem = basketItems.find(item => item.id === product.id);
// Находим ID элемента корзины
const basketItem = basketItems.find(item => item.id === shmotkaId);
if (!basketItem) throw new Error('Товар не найден в корзине');
if (existingItem) {
return await updateBasketItem(product.id, existingItem.quantity + 1);
} else {
const basketItem = {
...product,
quantity: 1,
addedAt: new Date().toISOString()
};
const response = await fetch(`${apiUrl}/basket`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(basketItem)
});
if (response.ok) {
const newItem = await response.json();
setBasketItems(prev => [...prev, newItem]);
return newItem;
}
}
return null;
} catch (err) {
console.error('Ошибка при добавлении в корзину:', err);
setError('Ошибка добавления в корзину');
throw err;
}
};
// Обновить количество товара в корзине
const updateBasketItem = async (productId, quantity) => {
try {
const response = await fetch(`${apiUrl}/basket/${productId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ quantity })
});
if (response.ok) {
const updatedItem = await response.json();
setBasketItems(prev =>
prev.map(item =>
item.id === productId ? updatedItem : item
)
);
return updatedItem;
}
return null;
} catch (err) {
console.error('Ошибка при обновлении корзины:', err);
setError('Ошибка обновления корзины');
throw err;
}
};
// Удалить товар из корзины
const removeFromBasket = async (productId) => {
try {
const response = await fetch(`${apiUrl}/basket/${productId}`, {
const response = await fetch(`${apiUrl}/basket/${basketItem._basketItemId}`, {
method: 'DELETE'
});
if (response.ok) {
setBasketItems(prev => prev.filter(item => item.id !== productId));
return true;
}
return false;
if (!response.ok) throw new Error('Ошибка удаления из корзины');
await loadBasketFromServer();
return true;
} catch (err) {
console.error('Ошибка при удалении из корзины:', err);
setError('Ошибка удаления из корзины');
@@ -112,14 +71,39 @@ export const useBasket = () => {
}
};
// Очистить корзину
const addToBasket = async (shmotka) => {
try {
const basketItem = {
shmotkaId: shmotka.id
};
const response = await fetch(`${apiUrl}/basket`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(basketItem)
});
if (!response.ok) throw new Error('Ошибка добавления в корзину');
await loadBasketFromServer();
return true;
} catch (err) {
console.error('Ошибка при добавлении в корзину:', err);
setError('Ошибка добавления в корзину');
throw err;
}
};
const clearBasket = async () => {
try {
for (const item of basketItems) {
await fetch(`${apiUrl}/basket/${item.id}`, {
method: 'DELETE'
});
}
const response = await fetch(`${apiUrl}/basket`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('Ошибка очистки корзины');
setBasketItems([]);
return true;
} catch (err) {
@@ -129,19 +113,12 @@ export const useBasket = () => {
}
};
// Рассчитать общую сумму
const calculateTotal = () => {
return basketItems.reduce((total, item) => total + (parseFloat(item.price) * item.quantity), 0);
return basketItems.reduce((total, item) => total + parseFloat(item.price), 0);
};
// Получить количество товаров в корзине
const getBasketCount = () => {
return basketItems.reduce((total, item) => total + item.quantity, 0);
};
// Обновить состояние корзины
const refetchBasket = () => {
loadBasketFromServer();
return basketItems.length;
};
return {
@@ -150,10 +127,9 @@ export const useBasket = () => {
error,
addToBasket,
removeFromBasket,
updateQuantity: updateBasketItem,
clearBasket,
calculateTotal,
getBasketCount,
refetch: refetchBasket
refetch: loadBasketFromServer
};
};

View File

@@ -1,14 +1,13 @@
// src/hooks/useLikes.js
import { useState, useEffect } from 'react';
const apiUrl = 'http://localhost:3000';
const apiUrl = 'http://localhost:8080/api/1.0';
export const useLikes = () => {
const [likesItems, setLikesItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Загрузить избранное из JSON Server при монтировании
useEffect(() => {
loadLikesFromServer();
}, []);
@@ -19,58 +18,52 @@ export const useLikes = () => {
const response = await fetch(`${apiUrl}/likes`);
if (response.ok) {
const data = await response.json();
setLikesItems(data);
console.log('Likes data from server:', data);
// Преобразуем данные в формат фронтенда
const mappedItems = data.map(item => {
const shmotka = item.shmotka;
return {
id: shmotka?.id || item.shmotkaId,
name: shmotka?.name || 'Без названия',
price: shmotka?.price || 0,
description: shmotka?.description || 'Описание отсутствует',
image: shmotka?.imageUrl || 'img/placeholder.jpg',
category: shmotka?.category.name || 'Unknown',
condition: shmotka?.condition.name || 'Unknown',
categoryId: shmotka?.categoryId,
conditionId: shmotka?.conditionId,
// Сохраняем оригинальные данные для удаления
_likeItemId: item.id
};
});
setLikesItems(mappedItems);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (err) {
console.error('Ошибка при загрузке избранного:', err);
setError('Ошибка загрузки избранного');
setError('Ошибка загрузки избранного: ' + err.message);
} finally {
setLoading(false);
}
};
// Добавить в избранное
const addToLikes = async (product) => {
const removeFromLikes = async (shmotkaId) => {
try {
const exists = likesItems.find(item => item.id === product.id);
if (!exists) {
const response = await fetch(`${apiUrl}/likes`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
...product,
likedAt: new Date().toISOString()
})
});
if (response.ok) {
const newItem = await response.json();
setLikesItems(prev => [...prev, newItem]);
return newItem;
}
}
return null;
} catch (err) {
console.error('Ошибка при добавлении в избранное:', err);
setError('Ошибка добавления в избранное');
throw err;
}
};
// Находим ID элемента избранного
const likeItem = likesItems.find(item => item.id === shmotkaId);
if (!likeItem) throw new Error('Товар не найден в избранном');
// Удалить из избранного
const removeFromLikes = async (productId) => {
try {
const response = await fetch(`${apiUrl}/likes/${productId}`, {
method: 'DELETE'
const response = await fetch(`${apiUrl}/likes/${likeItem._likeItemId}`, {
method: 'DELETE'
});
if (response.ok) {
setLikesItems(prev => prev.filter(item => item.id !== productId));
return true;
}
return false;
if (!response.ok) throw new Error('Ошибка удаления из избранного');
await loadLikesFromServer();
return true;
} catch (err) {
console.error('Ошибка при удалении из избранного:', err);
setError('Ошибка удаления из избранного');
@@ -78,30 +71,53 @@ export const useLikes = () => {
}
};
// Проверить, есть ли товар в избранном
const isLiked = (productId) => {
return likesItems.some(item => item.id === productId);
};
const addToLikes = async (shmotka) => {
try {
const likeItem = {
shmotkaId: shmotka.id
};
// Переключить избранное (добавить/удалить)
const toggleLike = async (product) => {
if (isLiked(product.id)) {
await removeFromLikes(product.id);
return false; // Удален
} else {
await addToLikes(product);
return true; // Добавлен
const response = await fetch(`${apiUrl}/likes`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(likeItem)
});
if (!response.ok) throw new Error('Ошибка добавления в избранное');
await loadLikesFromServer();
return true;
} catch (err) {
console.error('Ошибка при добавлении в избранное:', err);
setError('Ошибка добавления в избранное');
throw err;
}
};
const isLiked = (shmotkaId) => {
return likesItems.some(item => item.id === shmotkaId);
};
const toggleLike = async (shmotka) => {
if (isLiked(shmotka.id)) {
await removeFromLikes(shmotka.id);
return false;
} else {
await addToLikes(shmotka);
return true;
}
};
// Очистить избранное
const clearLikes = async () => {
try {
for (const item of likesItems) {
await fetch(`${apiUrl}/likes/${item.id}`, {
method: 'DELETE'
});
}
const response = await fetch(`${apiUrl}/likes`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('Ошибка очистки избранного');
setLikesItems([]);
return true;
} catch (err) {
@@ -111,16 +127,10 @@ export const useLikes = () => {
}
};
// Получить количество избранных товаров
const getLikesCount = () => {
return likesItems.length;
};
// Обновить состояние избранного
const refetchLikes = () => {
loadLikesFromServer();
};
return {
likesItems,
loading,
@@ -131,6 +141,6 @@ export const useLikes = () => {
toggleLike,
clearLikes,
getLikesCount,
refetch: refetchLikes
refetch: loadLikesFromServer
};
};

View File

@@ -1,15 +1,15 @@
// src/hooks/useProducts.js
import { useState, useEffect } from 'react';
const apiUrl = 'http://localhost:3000';
const apiUrl = 'http://localhost:8080/api/1.0';
export const useProducts = () => {
const [products, setProducts] = useState([]);
const [shmotki, setShmotki] = useState([]);
const [categories, setCategories] = useState([]);
const [conditions, setConditions] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Загрузка всех данных
useEffect(() => {
loadAllData();
}, []);
@@ -18,7 +18,7 @@ export const useProducts = () => {
try {
setLoading(true);
await Promise.all([
loadProducts(),
loadShmotki(),
loadCategories(),
loadConditions()
]);
@@ -30,12 +30,28 @@ export const useProducts = () => {
}
};
const loadProducts = async () => {
const loadShmotki = async () => {
try {
const response = await fetch(`${apiUrl}/shmots`);
const response = await fetch(`${apiUrl}/shmotki`);
if (!response.ok) throw new Error('Ошибка загрузки товаров');
const data = await response.json();
setProducts(data);
// Маппим данные с бэкенда
const mappedShmotki = data.map(shmotka => ({
id: shmotka.id,
name: shmotka.name,
price: shmotka.price,
description: shmotka.description,
image: shmotka.imageUrl,
category: shmotka.categoryId,
condition: shmotka.conditionId,
inStock: shmotka.inStock,
// Сохраняем полные объекты если они есть
categoryObj: shmotka.category,
conditionObj: shmotka.condition
}));
setShmotki(mappedShmotki);
} catch (err) {
setError('Ошибка загрузки товаров');
throw err;
@@ -44,7 +60,7 @@ export const useProducts = () => {
const loadCategories = async () => {
try {
const response = await fetch(`${apiUrl}/category`);
const response = await fetch(`${apiUrl}/categories`);
if (!response.ok) throw new Error('Ошибка загрузки категорий');
const data = await response.json();
setCategories(data);
@@ -56,7 +72,7 @@ export const useProducts = () => {
const loadConditions = async () => {
try {
const response = await fetch(`${apiUrl}/condition`);
const response = await fetch(`${apiUrl}/conditions`);
if (!response.ok) throw new Error('Ошибка загрузки состояний');
const data = await response.json();
setConditions(data);
@@ -66,80 +82,115 @@ export const useProducts = () => {
}
};
// Добавление товара
const addProduct = async (productData) => {
const addShmotka = async (shmotkaData) => {
try {
// Преобразуем данные для бэкенда
const newShmotka = {
name: shmotkaData.name,
price: parseFloat(shmotkaData.price),
description: shmotkaData.description,
imageUrl: shmotkaData.image,
categoryId: parseInt(shmotkaData.categoryId || shmotkaData.category),
conditionId: parseInt(shmotkaData.conditionId || shmotkaData.condition),
inStock: true
};
console.log('Sending to backend:', newShmotka);
const response = await fetch(`${apiUrl}/shmotki`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newShmotka)
});
if (!response.ok) throw new Error('Ошибка добавления товара');
const createdShmotka = await response.json();
// Маппим ответ для фронтенда
const mappedShmotka = {
id: createdShmotka.id,
name: createdShmotka.name,
price: createdShmotka.price,
description: createdShmotka.description,
image: createdShmotka.imageUrl,
category: createdShmotka.categoryId,
condition: createdShmotka.conditionId,
inStock: createdShmotka.inStock
};
setShmotki(prev => [...prev, mappedShmotka]);
return mappedShmotka;
} catch (err) {
setError('Ошибка добавления товара');
throw err;
}
};
const updateShmotka = async (id, shmotkaData) => {
try {
const newProduct = {
...productData,
id: Date.now().toString(),
price: parseFloat(productData.price)
const updatedShmotka = {
name: shmotkaData.name,
price: parseFloat(shmotkaData.price),
description: shmotkaData.description,
imageUrl: shmotkaData.image,
categoryId: parseInt(shmotkaData.categoryId || shmotkaData.category),
conditionId: parseInt(shmotkaData.conditionId || shmotkaData.condition),
inStock: true
};
const response = await fetch(`${apiUrl}/shmots`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newProduct)
});
console.log('Updating shmotka:', id, updatedShmotka);
if (!response.ok) throw new Error('Ошибка добавления товара');
const createdProduct = await response.json();
setProducts(prev => [...prev, createdProduct]);
return createdProduct;
} catch (err) {
setError('Ошибка добавления товара');
throw err;
}
};
// Обновление товара
const updateProduct = async (id, productData) => {
try {
const updatedProduct = {
...productData,
price: parseFloat(productData.price)
};
const response = await fetch(`${apiUrl}/shmots/${id}`, {
const response = await fetch(`${apiUrl}/shmotki/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedProduct)
body: JSON.stringify(updatedShmotka)
});
if (!response.ok) throw new Error('Ошибка обновления товара');
const result = await response.json();
setProducts(prev => prev.map(product =>
product.id === id ? result : product
const mappedResult = {
id: result.id,
name: result.name,
price: result.price,
description: result.description,
image: result.imageUrl,
category: result.categoryId,
condition: result.conditionId,
inStock: result.inStock
};
setShmotki(prev => prev.map(shmotka =>
shmotka.id === id ? mappedResult : shmotka
));
return result;
return mappedResult;
} catch (err) {
setError('Ошибка обновления товара');
throw err;
}
};
// Удаление товара
const deleteProduct = async (id) => {
const deleteShmotka = async (id) => {
try {
const response = await fetch(`${apiUrl}/shmots/${id}`, {
const response = await fetch(`${apiUrl}/shmotki/${id}`, {
method: 'DELETE'
});
if (!response.ok) throw new Error('Ошибка удаления товара');
setProducts(prev => prev.filter(product => product.id !== id));
setShmotki(prev => prev.filter(shmotka => shmotka.id !== id));
} catch (err) {
setError('Ошибка удаления товара');
throw err;
}
};
// Получение названий по ID
const getCategoryName = (categoryId) => {
const category = categories.find(cat => cat.id === categoryId);
return category ? category.name : 'Unknown';
@@ -151,14 +202,14 @@ export const useProducts = () => {
};
return {
products,
shmotki,
categories,
conditions,
loading,
error,
addProduct,
updateProduct,
deleteProduct,
addShmotka,
updateShmotka,
deleteShmotka,
getCategoryName,
getConditionName,
refetch: loadAllData