ГАЗ ГАЗ ГАЗ

src/App.jsx

@@ -1,7 +1,8 @@
-import { useState } from 'react'
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BasketProvider } from './context/BasketContext.jsx';
+import { LikesProvider } from './context/LikesContext.jsx';
 import IndexPage from './pages/IndexPage.jsx';
 import CatalogPage from './pages/CatalogPage.jsx';
 import ContactsPage from './pages/ContactsPage.jsx';
@@ -14,19 +15,21 @@ import './App.css'
 
 export default function App() {
   return (
-    <>
-      <ToastContainer />
-      <BrowserRouter>
-        <Navbar />
-        <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>
-        <Footer />
-      </BrowserRouter>
-    </>
+    <BasketProvider>
+      <LikesProvider>
+        <ToastContainer />
+        <BrowserRouter>
+          <Navbar />
+          <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>
+          <Footer />
+        </BrowserRouter>
+      </LikesProvider>
+    </BasketProvider>
   );
 }

src/Pages/BasketPage.jsx

@@ -1,18 +1,161 @@
+// src/pages/BasketPage.jsx
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { useBasketContext } from '../context/BasketContext.jsx';
 
 export default function BasketPage() {
-  return (
-    <main className="container my-4">
-      <div className="empty-basket text-center py-5">
-        <h1 className="mb-4">Здесь будут лежать твои товары</h1>
-        <p className="lead mb-4">А пока здесь так пусто...</p>
-        <img src="img/sad1.jpg" alt="Пустая корзина" className="img-fluid rounded" style={{maxHeight: "300px"}} />
-        <div className="mt-4">
-          <Link to="/catalog" className="btn btn-lg" style={{backgroundColor: "#00264d", color: "white"}}>
-            <i className="bi bi-arrow-left me-2"></i>Вернуться в каталог
-          </Link>
-        </div>
-      </div>
-    </main>
-  );
+    const { basketItems, removeFromBasket, updateQuantity, clearBasket, calculateTotal, loading, error } = useBasketContext();
+    const [showCheckoutSuccess, setShowCheckoutSuccess] = useState(false);
+
+    const handleCheckout = () => {
+        if (basketItems.length === 0) {
+            alert('Корзина пуста!');
+            return;
+        }
+        
+        setShowCheckoutSuccess(true);
+        clearBasket();
+        
+        setTimeout(() => {
+            setShowCheckoutSuccess(false);
+        }, 3000);
+    };
+
+    if (loading) {
+        return (
+            <main className="container my-4">
+                <div className="text-center">
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Загрузка...</span>
+                    </div>
+                </div>
+            </main>
+        );
+    }
+
+    if (error) {
+        return (
+            <main className="container my-4">
+                <div className="alert alert-danger" role="alert">
+                    {error}
+                </div>
+            </main>
+        );
+    }
+
+    if (basketItems.length === 0 && !showCheckoutSuccess) {
+        return (
+            <main className="container my-4">
+                <div className="empty-basket text-center py-5">
+                    <h1 className="mb-4">Здесь будут лежать твои товары</h1>
+                    <p className="lead mb-4">А пока здесь так пусто...</p>
+                    <img src="img/sad1.jpg" alt="Пустая корзина" className="img-fluid rounded" style={{maxHeight: "300px"}} />
+                    <div className="mt-4">
+                        <Link to="/catalog" className="btn btn-lg" style={{backgroundColor: "#00264d", color: "white"}}>
+                            <i className="bi bi-arrow-left me-2"></i>Вернуться в каталог
+                        </Link>
+                    </div>
+                </div>
+            </main>
+        );
+    }
+
+    if (showCheckoutSuccess) {
+        return (
+            <main className="container my-4">
+                <div className="text-center py-5">
+                    <div className="alert alert-success">
+                        <h4 className="alert-heading">Заказ оформлен!</h4>
+                        <p>Спасибо за покупку! Мы свяжемся с вами в ближайшее время.</p>
+                    </div>
+                    <Link to="/catalog" className="btn btn-lg" style={{backgroundColor: "#00264d", color: "white"}}>
+                        <i className="bi bi-arrow-left me-2"></i>Вернуться в каталог
+                    </Link>
+                </div>
+            </main>
+        );
+    }
+
+    return (
+        <main className="container my-4">
+            <div className="row">
+                <div className="col-12">
+                    <div className="card border-0 shadow">
+                        <div className="card-header" style={{backgroundColor: "#00264d", color: "white"}}>
+                            <h5 className="mb-0"><i className="bi bi-cart me-2"></i>Корзина</h5>
+                        </div>
+                        <div className="card-body">
+                            {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"}} />
+                                    </div>
+                                    <div className="col-md-4">
+                                        <h6 className="mb-1">{item.name}</h6>
+                                        <p className="text-muted small mb-0">{item.description}</p>
+                                    </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>
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                            
+                            <div className="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
+                                <h5>Итого: ${calculateTotal().toFixed(2)}</h5>
+                                <div>
+                                    <button 
+                                        className="btn btn-outline-secondary me-2"
+                                        onClick={clearBasket}
+                                    >
+                                        Очистить корзину
+                                    </button>
+                                    <button 
+                                        className="btn btn-lg" 
+                                        style={{backgroundColor: "#00264d", color: "white"}}
+                                        onClick={handleCheckout}
+                                    >
+                                        <i className="bi bi-credit-card me-2"></i>Оформить заказ
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
 }

src/Pages/CatalogPage.jsx

@@ -1,188 +1,131 @@
+// src/pages/CatalogPage.jsx
 import { useState } from 'react';
+import { useProducts } from '../hooks/useProducts.js';
+import ProductCard from '../components/ProductCard.jsx';
+import ProductForm from '../components/ProductForm.jsx';
 
 export default function CatalogPage() {
-  const [products, setProducts] = useState([
-    {
-      id: 1,
-      name: "Stone Island",
-      price: "$1999.99",
-      category: "men",
-      condition: "new",
-      description: "super idol rovny pacan, groza rayona, mother's modnik, патч на месте",
-      image: "img/stonik.jpg"
-    },
-    {
-      id: 2,
-      name: "Adidas",
-      price: "$19.99",
-      category: "men",
-      condition: "wu",
-      description: "sportik, street, baskemtball, air, old school",
-      image: "img/adidas.jpg"
-    },
-    {
-      id: 3,
-      name: "Napapisaj",
-      price: "$1499.99",
-      category: "men",
-      condition: "wu",
-      description: "super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers",
-      image: "img/napapisaj.jpg"
-    },
-    {
-      id: 4,
-      name: "Lacoste",
-      price: "$399.99",
-      category: "uni",
-      condition: "wu",
-      description: "style, nice, mother's modnik, cotton, krokodil",
-      image: "img/lacoste.png"
-    },
-    {
-      id: 5,
-      name: "Samba",
-      price: "$449.99",
-      category: "women",
-      condition: "new",
-      description: "super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers",
-      image: "img/samba.png"
-    }
-  ]);
+    const {
+        products,
+        categories,
+        conditions,
+        loading,
+        error,
+        addProduct,
+        updateProduct,
+        deleteProduct,
+        getCategoryName,
+        getConditionName
+    } = useProducts();
 
-  const [formData, setFormData] = useState({
-    name: '',
-    price: '',
-    category: '',
-    condition: '',
-    description: '',
-    image: ''
-  });
+    const [showAddForm, setShowAddForm] = useState(false);
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const newProduct = {
-      id: products.length + 1,
-      ...formData
+    const handleAddProduct = async (productData) => {
+        try {
+            await addProduct(productData);
+            setShowAddForm(false);
+            alert('Товар успешно добавлен!');
+        } catch (err) {
+            alert('Ошибка при добавлении товара');
+        }
     };
-    setProducts([...products, newProduct]);
-    setFormData({
-      name: '',
-      price: '',
-      category: '',
-      condition: '',
-      description: '',
-      image: ''
-    });
-  };
 
-  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.id]: e.target.value
-    });
-  };
+    const handleEditProduct = async (id, productData) => {
+        try {
+            await updateProduct(id, productData);
+            alert('Товар успешно обновлен!');
+        } catch (err) {
+            alert('Ошибка при обновлении товара');
+        }
+    };
 
-  return (
-    <main className="container my-4">
-      <div className="accordion" id="accordionExample">
-        <div className="accordion-item">
-          <h2 className="accordion-header" id="headingOne">
-            <button className="accordion-button" type="button" data-bs-toggle="collapse" style={{backgroundColor: "#b0d8ff"}} data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-              Добавить товар
-            </button>
-          </h2>
-          <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-            <div className="accordion-body">
-              <div className="card mb-4 border-0 shadow">
-                <div className="card-body">
-                  <form onSubmit={handleSubmit} className="row g-3">
-                    <div className="col-md-6">
-                      <label htmlFor="name" className="form-label">Название товара</label>
-                      <input type="text" className="form-control" id="name" value={formData.name} onChange={handleChange} required />
+    const handleDeleteProduct = async (id) => {
+        try {
+            await deleteProduct(id);
+        } catch (err) {
+            alert('Ошибка при удалении товара');
+        }
+    };
+
+    if (loading) {
+        return (
+            <main className="container my-4">
+                <div className="text-center">
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Загрузка...</span>
                     </div>
-                    <div className="col-md-6">
-                      <label htmlFor="price" className="form-label">Цена</label>
-                      <input type="text" className="form-control" id="price" value={formData.price} onChange={handleChange} required />
-                    </div>
-                    <div className="col-md-6">
-                      <label htmlFor="category" className="form-label">Категория</label>
-                      <select className="form-select" id="category" value={formData.category} onChange={handleChange} required>
-                        <option value="">Выберите категорию</option>
-                        <option value="1">Для мужчин</option>
-                        <option value="2">Для женщин</option>
-                        <option value="3">Унисекс</option>
-                      </select>
-                    </div>
-                    <div className="col-md-6">
-                      <label htmlFor="condition" className="form-label">Состояние</label>
-                      <select className="form-select" id="condition" value={formData.condition} onChange={handleChange} required>
-                        <option value="">Выберите состояние</option>
-                        <option value="1">Новый</option>
-                        <option value="2">Б/У</option>
-                      </select>
-                    </div>
-                    <div className="col-12">
-                      <label htmlFor="description" className="form-label">Описание</label>
-                      <textarea className="form-control" id="description" rows="3" value={formData.description} onChange={handleChange} required></textarea>
-                    </div>
-                    <div className="col-12">
-                      <label htmlFor="image" className="form-label">Ссылка на изображение</label>
-                      <input type="text" className="form-control" id="image" value={formData.image} onChange={handleChange} required />
-                    </div>
-                    <div className="col-12">
-                      <button type="submit" className="btn" style={{backgroundColor: "#00264d", color: "white"}}>
-                        <i className="bi bi-check-circle me-2"></i>Добавить товар
-                      </button>
-                    </div>
-                  </form>
                 </div>
-              </div>
+            </main>
+        );
+    }
+
+    if (error) {
+        return (
+            <main className="container my-4">
+                <div className="alert alert-danger" role="alert">
+                    {error}
+                </div>
+            </main>
+        );
+    }
+
+    return (
+        <main className="container my-4">
+            <div className="d-flex justify-content-between align-items-center mb-4">
+                <h1 className="mb-0">Каталог товаров</h1>
+                <button 
+                    className="btn" 
+                    style={{backgroundColor: "#00264d", color: "white"}}
+                    onClick={() => setShowAddForm(!showAddForm)}
+                >
+                    <i className="bi bi-plus-circle me-2"></i>
+                    {showAddForm ? 'Отменить добавление' : 'Добавить товар'}
+                </button>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <h1 className="text-center mb-4 mt-2">Каталог товаров</h1>
-      
-      <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
-        {products.map(product => (
-          <div key={product.id} className="col">
-            <div className="card h-100 border-0 shadow">
-              <img src={product.image} className="card-img-top" alt={product.name} />
-              <div className="card-body">
-                <h4 className="card-title">{product.name}</h4>
-                <p className="card-text">{product.description}</p>
-                <div className="row">
-                  <div className="col-6">
-                    <h5 className="card-text mb-1">Category:</h5>
-                    <p className="card-text">{product.category}</p>
-                  </div>
-                  <div className="col-6">
-                    <h5 className="card-text mb-1">Condition:</h5>
-                    <p className="card-text">{product.condition}</p>
-                  </div>
+            {showAddForm && (
+                <div className="row mb-4">
+                    <div className="col-12">
+                        <ProductForm
+                            categories={categories}
+                            conditions={conditions}
+                            onSubmit={handleAddProduct}
+                            onCancel={() => setShowAddForm(false)}
+                            isEditing={false}
+                        />
+                    </div>
                 </div>
-              </div>
-              <div className="card-footer bg-transparent">
-                <div className="d-flex justify-content-between align-items-center">
-                  <span className="text-muted">{product.price}</span>
-                  <button className="btn btn-sm" style={{backgroundColor: "#00264d", color: "white"}}>
-                    <i className="bi bi-cart-plus me-1"></i>В корзину
-                  </button>
-                </div>
-                <div className="mt-2 d-flex justify-content-between">
-                  <button className="btn btn-sm btn-outline-secondary like-btn">
-                    <i className="bi bi-heart"></i> В избранное
-                  </button>
-                  <button className="btn btn-sm btn-outline-secondary">
-                    <i className="bi bi-share"></i> Поделиться
-                  </button>
-                </div>
-              </div>
+            )}
+            
+            {/* 3 карточки в ряд на всех экранах кроме мобильных */}
+            <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
+                {products.map(product => (
+                    <ProductCard 
+                        key={product.id}
+                        product={product}
+                        categories={categories}
+                        conditions={conditions}
+                        getCategoryName={getCategoryName}
+                        getConditionName={getConditionName}
+                        onEdit={handleEditProduct}
+                        onDelete={handleDeleteProduct}
+                    />
+                ))}
             </div>
-          </div>
-        ))}
-      </div>
-    </main>
-  );
+
+            {products.length === 0 && !showAddForm && (
+                <div className="text-center py-5">
+                    <h3>Товаров пока нет</h3>
+                    <p className="text-muted">Добавьте первый товар в каталог</p>
+                    <button 
+                        className="btn btn-lg" 
+                        style={{backgroundColor: "#00264d", color: "white"}}
+                        onClick={() => setShowAddForm(true)}
+                    >
+                        <i className="bi bi-plus-circle me-2"></i>Добавить товар
+                    </button>
+                </div>
+            )}
+        </main>
+    );
 }

src/Pages/LikesPage.jsx

@@ -1,18 +1,115 @@
+import { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { useLikesContext } from '../context/LikesContext.jsx';
+import { useBasketContext } from '../context/BasketContext.jsx';
 
 export default function LikesPage() {
-  return (
-    <main className="container my-4">
-      <div className="text-center py-5 empty-likes">
-        <h1 className="mb-4">Здесь будут лежать товары, которые тебе понравились</h1>
-        <p className="lead mb-4">А пока здесь так пусто...</p>
-        <img src="img/sad2.jpeg" alt="Пусто" className="img-fluid rounded" style={{maxHeight: "300px"}} />
-        <div className="mt-4">
-          <Link to="/catalog" className="btn btn-lg" style={{backgroundColor: "#00264d", color: "white"}}>
-            <i className="bi bi-arrow-left me-2"></i>Вернуться в каталог
-          </Link>
-        </div>
-      </div>
-    </main>
-  );
+    const { likesItems, removeFromLikes, loading, error } = useLikesContext();
+    const { addToBasket } = useBasketContext();
+
+    const handleMoveToBasket = async (product) => {
+        try {
+            await addToBasket(product);
+            await removeFromLikes(product.id);
+            alert('Товар перенесен в корзину!');
+        } catch (err) {
+            alert('Ошибка при переносе товара в корзину');
+        }
+    };
+
+    const handleRemoveFromLikes = async (productId) => {
+        try {
+            await removeFromLikes(productId);
+            alert('Товар удален из избранного!');
+        } catch (err) {
+            alert('Ошибка при удалении из избранного');
+        }
+    };
+
+    if (loading) {
+        return (
+            <main className="container my-4">
+                <div className="text-center">
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Загрузка...</span>
+                    </div>
+                </div>
+            </main>
+        );
+    }
+
+    if (error) {
+        return (
+            <main className="container my-4">
+                <div className="alert alert-danger" role="alert">
+                    {error}
+                </div>
+            </main>
+        );
+    }
+
+    if (likesItems.length === 0) {
+        return (
+            <main className="container my-4">
+                <div className="text-center py-5 empty-likes">
+                    <h1 className="mb-4">Здесь будут лежать товары, которые тебе понравились</h1>
+                    <p className="lead mb-4">А пока здесь так пусто...</p>
+                    <img src="img/sad2.jpeg" alt="Пусто" className="img-fluid rounded" style={{maxHeight: "300px"}} />
+                    <div className="mt-4">
+                        <Link to="/catalog" className="btn btn-lg" style={{backgroundColor: "#00264d", color: "white"}}>
+                            <i className="bi bi-arrow-left me-2"></i>Вернуться в каталог
+                        </Link>
+                    </div>
+                </div>
+            </main>
+        );
+    }
+
+    return (
+        <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">
+                        <div className="card h-100 border-0 shadow">
+                            <img src={item.image} className="card-img-top" alt={item.name} />
+                            <div className="card-body">
+                                <h5 className="card-title">{item.name}</h5>
+                                <p className="card-text">{item.description}</p>
+                                <div className="row">
+                                    <div className="col-6">
+                                        <h6 className="mb-1">Category:</h6>
+                                        <p className="card-text">{item.category || '-'}</p>
+                                    </div>
+                                    <div className="col-6">
+                                        <h6 className="mb-1">Condition:</h6>
+                                        <p className="card-text">{item.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>
+                                    <div className="d-flex flex-column gap-1">
+                                        <button 
+                                            className="btn btn-sm btn-outline-primary"
+                                            onClick={() => handleMoveToBasket(item)}
+                                        >
+                                            <i className="bi bi-cart-plus"></i> В корзину
+                                        </button>
+                                        <button 
+                                            className="btn btn-sm btn-outline-danger"
+                                            onClick={() => handleRemoveFromLikes(item.id)}
+                                        >
+                                            <i className="bi bi-trash"></i> Удалить
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </main>
+    );
 }

src/components/Navbar.jsx

@@ -1,6 +1,15 @@
+// src/components/Navbar.jsx
 import { Link } from 'react-router-dom';
+import { useBasketContext } from '../context/BasketContext.jsx';
+import { useLikesContext } from '../context/LikesContext.jsx';
 
 export default function Navbar() {
+  const { basketItems, getBasketCount } = useBasketContext();
+  const { getLikesCount } = useLikesContext();
+
+  const basketItemsCount = getBasketCount();
+  const likesItemsCount = getLikesCount();
+
   return (
     <nav className="navbar navbar-expand-lg navbar-dark" style={{backgroundColor: "#00264d"}}>
       <div className="container">
@@ -29,10 +38,20 @@ export default function Navbar() {
               <Link className="nav-link" to="/contacts"><i className="bi bi-telephone me-1"></i>Контакты</Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/likes"><i className="bi bi-heart me-1"></i>Избранное</Link>
+              <Link className="nav-link" to="/likes">
+                <i className="bi bi-heart me-1"></i>Избранное
+                {likesItemsCount > 0 && (
+                  <span className="badge bg-danger ms-1">{likesItemsCount}</span>
+                )}
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/basket"><i className="bi bi-cart me-1"></i>Корзина</Link>
+              <Link className="nav-link" to="/basket">
+                <i className="bi bi-cart me-1"></i>Корзина
+                {basketItemsCount > 0 && (
+                  <span className="badge bg-danger ms-1">{basketItemsCount}</span>
+                )}
+              </Link>
             </li>
           </ul>
         </div>

src/components/ProductCard.jsx

@@ -0,0 +1,154 @@
+// src/components/ProductCard.jsx
+import { useState } from 'react';
+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 { addToBasket } = useBasketContext();
+    const { isLiked, toggleLike } = useLikesContext();
+    const [showEditForm, setShowEditForm] = useState(false);
+
+    const handleAddToBasket = async () => {
+        try {
+            await addToBasket(product);
+            alert('Товар добавлен в корзину!');
+        } catch (err) {
+            alert('Ошибка при добавлении в корзину');
+        }
+    };
+
+    const handleLike = async () => {
+        try {
+            const wasAdded = await toggleLike(product);
+            if (wasAdded) {
+                alert('Товар добавлен в избранное!');
+            } else {
+                alert('Товар удален из избранного!');
+            }
+        } catch (err) {
+            alert('Ошибка при работе с избранным');
+        }
+    };
+
+    const handleEdit = () => {
+        setShowEditForm(true);
+    };
+
+    const handleDelete = async () => {
+        if (window.confirm(`Вы уверены, что хотите удалить товар "${product.name}"?`)) {
+            try {
+                await onDelete(product.id);
+                alert('Товар удален!');
+            } catch (err) {
+                alert('Ошибка при удалении товара');
+            }
+        }
+    };
+
+    const handleSaveEdit = async (productData) => {
+        try {
+            await onEdit(product.id, productData);
+            setShowEditForm(false);
+        } catch (err) {
+            alert('Ошибка при сохранении изменений');
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setShowEditForm(false);
+    };
+
+    if (showEditForm) {
+        return (
+            <div className="col">
+                <ProductForm
+                    product={product}
+                    categories={categories}
+                    conditions={conditions}
+                    onSubmit={handleSaveEdit}
+                    onCancel={handleCancelEdit}
+                    isEditing={true}
+                />
+            </div>
+        );
+    }
+
+    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} 
+                        className="card-img-top" 
+                        alt={product.name} 
+                        style={{ 
+                            width: '100%', 
+                            height: '100%', 
+                            objectFit: 'cover',
+                            objectPosition: 'center'
+                        }} 
+                        onError={(e) => {
+                            e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=';
+                            e.target.alt = 'Изображение не найдено';
+                        }}
+                    />
+                </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>
+                    <div className="row mt-auto">
+                        <div className="col-6">
+                            <h6 className="mb-1">Category:</h6>
+                            <p className="card-text">{getCategoryName(product.category)}</p>
+                        </div>
+                        <div className="col-6">
+                            <h6 className="mb-1">Condition:</h6>
+                            <p className="card-text">{getConditionName(product.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>
+                        <button 
+                            className="btn btn-sm" 
+                            style={{backgroundColor: "#00264d", color: "white"}}
+                            onClick={handleAddToBasket}
+                        >
+                            <i className="bi bi-cart-plus me-1"></i>В корзину
+                        </button>
+                    </div>
+                    <div className="mt-2 d-flex justify-content-between">
+                        <button 
+                            className={`btn btn-sm btn-outline-secondary like-btn ${isLiked(product.id) ? 'liked' : ''}`}
+                            onClick={handleLike}
+                        >
+                            <i className="bi bi-heart"></i> 
+                            {isLiked(product.id) ? ' В избранном' : ' В избранное'}
+                        </button>
+                        <div className="btn-group">
+                            <button 
+                                className="btn btn-sm btn-outline-warning"
+                                onClick={handleEdit}
+                                title="Редактировать"
+                            >
+                                <i className="bi bi-pencil"></i>
+                            </button>
+                            <button 
+                                className="btn btn-sm btn-outline-danger"
+                                onClick={handleDelete}
+                                title="Удалить"
+                            >
+                                <i className="bi bi-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;

src/components/ProductForm.jsx

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+
+const ProductForm = ({ product, categories, conditions, onSubmit, onCancel, isEditing = false }) => {
+    const [formData, setFormData] = useState({
+        name: '',
+        price: '',
+        category: '',
+        condition: '',
+        description: '',
+        image: ''
+    });
+
+    // Заполняем форму данными товара при редактировании
+    useEffect(() => {
+        if (isEditing && product) {
+            setFormData({
+                name: product.name || '',
+                price: product.price || '',
+                category: product.category || '',
+                condition: product.condition || '',
+                description: product.description || '',
+                image: product.image || ''
+            });
+        }
+    }, [product, isEditing]);
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.id]: e.target.value
+        });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(formData);
+    };
+
+    return (
+        <div className="card h-100 border-0 shadow">
+            <div className="card-header" style={{backgroundColor: "#00264d", color: "white"}}>
+                <h5 className="mb-0">
+                    <i className="bi bi-pencil me-2"></i>
+                    {isEditing ? 'Редактировать товар' : 'Добавить товар'}
+                </h5>
+            </div>
+            <div className="card-body">
+                <form onSubmit={handleSubmit} className="row g-3">
+                    <div className="col-md-6">
+                        <label htmlFor="name" className="form-label">Название товара</label>
+                        <input 
+                            type="text" 
+                            className="form-control" 
+                            id="name" 
+                            value={formData.name} 
+                            onChange={handleChange} 
+                            required 
+                        />
+                    </div>
+                    <div className="col-md-6">
+                        <label htmlFor="price" className="form-label">Цена</label>
+                        <input 
+                            type="number" 
+                            step="0.01" 
+                            className="form-control" 
+                            id="price" 
+                            value={formData.price} 
+                            onChange={handleChange} 
+                            required 
+                        />
+                    </div>
+                    <div className="col-md-6">
+                        <label htmlFor="category" className="form-label">Категория</label>
+                        <select 
+                            className="form-select" 
+                            id="category" 
+                            value={formData.category} 
+                            onChange={handleChange} 
+                            required
+                        >
+                            <option value="">Выберите категорию</option>
+                            {categories.map(cat => (
+                                <option key={cat.id} value={cat.id}>{cat.name}</option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className="col-md-6">
+                        <label htmlFor="condition" className="form-label">Состояние</label>
+                        <select 
+                            className="form-select" 
+                            id="condition" 
+                            value={formData.condition} 
+                            onChange={handleChange} 
+                            required
+                        >
+                            <option value="">Выберите состояние</option>
+                            {conditions.map(cond => (
+                                <option key={cond.id} value={cond.id}>{cond.name}</option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className="col-12">
+                        <label htmlFor="description" className="form-label">Описание</label>
+                        <textarea 
+                            className="form-control" 
+                            id="description" 
+                            rows="3" 
+                            value={formData.description} 
+                            onChange={handleChange} 
+                            required
+                        ></textarea>
+                    </div>
+                    <div className="col-12">
+                        <label htmlFor="image" className="form-label">Ссылка на изображение</label>
+                        <input 
+                            type="text" 
+                            className="form-control" 
+                            id="image" 
+                            value={formData.image} 
+                            onChange={handleChange} 
+                            required 
+                        />
+                    </div>
+                    <div className="col-12">
+                        <div className="d-flex gap-2">
+                            <button 
+                                type="submit" 
+                                className="btn flex-fill" 
+                                style={{backgroundColor: "#00264d", color: "white"}}
+                            >
+                                <i className="bi bi-check-circle me-2"></i>
+                                {isEditing ? 'Сохранить изменения' : 'Добавить товар'}
+                            </button>
+                            {isEditing && (
+                                <button 
+                                    type="button" 
+                                    className="btn btn-secondary"
+                                    onClick={onCancel}
+                                >
+                                    <i className="bi bi-x-circle me-2"></i>Отмена
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default ProductForm;

src/context/BasketContext.jsx

@@ -0,0 +1,28 @@
+// src/context/BasketContext.jsx
+import React, { createContext, useContext } from 'react';
+import { useBasket } from '../hooks/useBasket.js';
+
+// Создаем контекст
+export const BasketContext = createContext();
+
+// Провайдер контекста
+export const BasketProvider = ({ children }) => {
+    const basketData = useBasket();
+
+    return (
+        <BasketContext.Provider value={basketData}>
+            {children}
+        </BasketContext.Provider>
+    );
+};
+
+// Кастомный хук для удобного использования контекста
+export const useBasketContext = () => {
+    const context = useContext(BasketContext);
+    
+    if (context === undefined) {
+        throw new Error('useBasketContext must be used within a BasketProvider');
+    }
+    
+    return context;
+};

src/context/LikesContext.jsx

@@ -0,0 +1,28 @@
+// src/context/LikesContext.jsx
+import React, { createContext, useContext } from 'react';
+import { useLikes } from '../hooks/useLikes.js';
+
+// Создаем контекст
+export const LikesContext = createContext();
+
+// Провайдер контекста
+export const LikesProvider = ({ children }) => {
+    const likesData = useLikes();
+
+    return (
+        <LikesContext.Provider value={likesData}>
+            {children}
+        </LikesContext.Provider>
+    );
+};
+
+// Кастомный хук для удобного использования контекста
+export const useLikesContext = () => {
+    const context = useContext(LikesContext);
+    
+    if (context === undefined) {
+        throw new Error('useLikesContext must be used within a LikesProvider');
+    }
+    
+    return context;
+};

src/database/db.json

@@ -32,7 +32,7 @@
       "name": "samba",
       "price": 449.99,
       "description": "super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers",
-      "image": "img/samba.jpg",
+      "image": "img/samba.png",
       "category": "2",
       "condition": "1"
     },
@@ -41,9 +41,27 @@
       "name": "lacoste",
       "price": 399.99,
       "description": "style, nice, mother's modnik, cotton, krokodil",
-      "image": "img/lacoste.jpg",
+      "image": "img/lacoste.png",
       "category": "1",
       "condition": "1"
+    },
+    {
+      "name": "ываыв",
+      "price": 13,
+      "category": "1",
+      "condition": "1",
+      "description": "ывавфа",
+      "image": "https://i.pinimg.com/736x/96/a4/cb/96a4cbd571fb356fb050704f58b17ca4.jpg",
+      "id": "1759949431089"
+    },
+    {
+      "id": "1759952611913",
+      "name": "вап",
+      "price": 200,
+      "category": "2",
+      "condition": "2",
+      "description": "ыфваыва",
+      "image": "https://i.pinimg.com/1200x/db/2f/d7/db2fd7ce379a4dc67db87bd1999fa681.jpg"
     }
   ],
   "category": [

src/hooks/useBasket.js

@@ -0,0 +1,159 @@
+// src/hooks/useBasket.js
+import { useState, useEffect } from 'react';
+
+const apiUrl = 'http://localhost:3000';
+
+export const useBasket = () => {
+    const [basketItems, setBasketItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Загрузить корзину из JSON Server при монтировании
+    useEffect(() => {
+        loadBasketFromServer();
+    }, []);
+
+    const loadBasketFromServer = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch(`${apiUrl}/basket`);
+            if (response.ok) {
+                const data = await response.json();
+                setBasketItems(data);
+            }
+        } catch (err) {
+            console.error('Ошибка при загрузке корзины:', err);
+            setError('Ошибка загрузки корзины');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Добавить товар в корзину
+    const addToBasket = async (product) => {
+        try {
+            const existingItem = basketItems.find(item => item.id === product.id);
+
+            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}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                setBasketItems(prev => prev.filter(item => item.id !== productId));
+                return true;
+            }
+            return false;
+        } 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'
+                });
+            }
+            setBasketItems([]);
+            return true;
+        } catch (err) {
+            console.error('Ошибка при очистке корзины:', err);
+            setError('Ошибка очистки корзины');
+            throw err;
+        }
+    };
+
+    // Рассчитать общую сумму
+    const calculateTotal = () => {
+        return basketItems.reduce((total, item) => total + (parseFloat(item.price) * item.quantity), 0);
+    };
+
+    // Получить количество товаров в корзине
+    const getBasketCount = () => {
+        return basketItems.reduce((total, item) => total + item.quantity, 0);
+    };
+
+    // Обновить состояние корзины
+    const refetchBasket = () => {
+        loadBasketFromServer();
+    };
+
+    return {
+        basketItems,
+        loading,
+        error,
+        addToBasket,
+        removeFromBasket,
+        updateQuantity: updateBasketItem,
+        clearBasket,
+        calculateTotal,
+        getBasketCount,
+        refetch: refetchBasket
+    };
+};

src/hooks/useLikes.js

@@ -0,0 +1,136 @@
+// src/hooks/useLikes.js
+import { useState, useEffect } from 'react';
+
+const apiUrl = 'http://localhost:3000';
+
+export const useLikes = () => {
+    const [likesItems, setLikesItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Загрузить избранное из JSON Server при монтировании
+    useEffect(() => {
+        loadLikesFromServer();
+    }, []);
+
+    const loadLikesFromServer = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch(`${apiUrl}/likes`);
+            if (response.ok) {
+                const data = await response.json();
+                setLikesItems(data);
+            }
+        } catch (err) {
+            console.error('Ошибка при загрузке избранного:', err);
+            setError('Ошибка загрузки избранного');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Добавить в избранное
+    const addToLikes = async (product) => {
+        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;
+        }
+    };
+
+    // Удалить из избранного
+    const removeFromLikes = async (productId) => {
+        try {
+            const response = await fetch(`${apiUrl}/likes/${productId}`, { 
+                method: 'DELETE' 
+            });
+            
+            if (response.ok) {
+                setLikesItems(prev => prev.filter(item => item.id !== productId));
+                return true;
+            }
+            return false;
+        } catch (err) {
+            console.error('Ошибка при удалении из избранного:', err);
+            setError('Ошибка удаления из избранного');
+            throw err;
+        }
+    };
+
+    // Проверить, есть ли товар в избранном
+    const isLiked = (productId) => {
+        return likesItems.some(item => item.id === productId);
+    };
+
+    // Переключить избранное (добавить/удалить)
+    const toggleLike = async (product) => {
+        if (isLiked(product.id)) {
+            await removeFromLikes(product.id);
+            return false; // Удален
+        } else {
+            await addToLikes(product);
+            return true; // Добавлен
+        }
+    };
+
+    // Очистить избранное
+    const clearLikes = async () => {
+        try {
+            for (const item of likesItems) {
+                await fetch(`${apiUrl}/likes/${item.id}`, {
+                    method: 'DELETE'
+                });
+            }
+            setLikesItems([]);
+            return true;
+        } catch (err) {
+            console.error('Ошибка при очистке избранного:', err);
+            setError('Ошибка очистки избранного');
+            throw err;
+        }
+    };
+
+    // Получить количество избранных товаров
+    const getLikesCount = () => {
+        return likesItems.length;
+    };
+
+    // Обновить состояние избранного
+    const refetchLikes = () => {
+        loadLikesFromServer();
+    };
+
+    return {
+        likesItems,
+        loading,
+        error,
+        addToLikes,
+        removeFromLikes,
+        isLiked,
+        toggleLike,
+        clearLikes,
+        getLikesCount,
+        refetch: refetchLikes
+    };
+};

src/hooks/useProducts.js

@@ -0,0 +1,166 @@
+import { useState, useEffect } from 'react';
+
+const apiUrl = 'http://localhost:3000';
+
+export const useProducts = () => {
+    const [products, setProducts] = useState([]);
+    const [categories, setCategories] = useState([]);
+    const [conditions, setConditions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Загрузка всех данных
+    useEffect(() => {
+        loadAllData();
+    }, []);
+
+    const loadAllData = async () => {
+        try {
+            setLoading(true);
+            await Promise.all([
+                loadProducts(),
+                loadCategories(),
+                loadConditions()
+            ]);
+        } catch (err) {
+            setError('Ошибка загрузки данных');
+            console.error('Ошибка загрузки данных:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadProducts = async () => {
+        try {
+            const response = await fetch(`${apiUrl}/shmots`);
+            if (!response.ok) throw new Error('Ошибка загрузки товаров');
+            const data = await response.json();
+            setProducts(data);
+        } catch (err) {
+            setError('Ошибка загрузки товаров');
+            throw err;
+        }
+    };
+
+    const loadCategories = async () => {
+        try {
+            const response = await fetch(`${apiUrl}/category`);
+            if (!response.ok) throw new Error('Ошибка загрузки категорий');
+            const data = await response.json();
+            setCategories(data);
+        } catch (err) {
+            setError('Ошибка загрузки категорий');
+            throw err;
+        }
+    };
+
+    const loadConditions = async () => {
+        try {
+            const response = await fetch(`${apiUrl}/condition`);
+            if (!response.ok) throw new Error('Ошибка загрузки состояний');
+            const data = await response.json();
+            setConditions(data);
+        } catch (err) {
+            setError('Ошибка загрузки состояний');
+            throw err;
+        }
+    };
+
+    // Добавление товара
+    const addProduct = async (productData) => {
+        try {
+            const newProduct = {
+                ...productData,
+                id: Date.now().toString(),
+                price: parseFloat(productData.price)
+            };
+
+            const response = await fetch(`${apiUrl}/shmots`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(newProduct)
+            });
+
+            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}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(updatedProduct)
+            });
+
+            if (!response.ok) throw new Error('Ошибка обновления товара');
+
+            const result = await response.json();
+            setProducts(prev => prev.map(product => 
+                product.id === id ? result : product
+            ));
+            return result;
+        } catch (err) {
+            setError('Ошибка обновления товара');
+            throw err;
+        }
+    };
+
+    // Удаление товара
+    const deleteProduct = async (id) => {
+        try {
+            const response = await fetch(`${apiUrl}/shmots/${id}`, {
+                method: 'DELETE'
+            });
+
+            if (!response.ok) throw new Error('Ошибка удаления товара');
+
+            setProducts(prev => prev.filter(product => product.id !== id));
+        } catch (err) {
+            setError('Ошибка удаления товара');
+            throw err;
+        }
+    };
+
+    // Получение названий по ID
+    const getCategoryName = (categoryId) => {
+        const category = categories.find(cat => cat.id === categoryId);
+        return category ? category.name : 'Unknown';
+    };
+
+    const getConditionName = (conditionId) => {
+        const condition = conditions.find(cond => cond.id === conditionId);
+        return condition ? condition.name : 'Unknown';
+    };
+
+    return {
+        products,
+        categories,
+        conditions,
+        loading,
+        error,
+        addProduct,
+        updateProduct,
+        deleteProduct,
+        getCategoryName,
+        getConditionName,
+        refetch: loadAllData
+    };
+};