From e005c61030fa20bd2dd7eeb5c50068c5833b569d Mon Sep 17 00:00:00 2001 From: qkrlnt Date: Sat, 24 May 2025 10:42:15 +0400 Subject: [PATCH] done without .docx --- db.json | 31 +++++++++++++----- src/components/ProductCard.jsx | 12 +++++-- src/components/ProductForm.jsx | 54 ++++++++++++++++++++++++++---- src/components/ProductList.jsx | 10 ++++-- src/hooks/useBasket.jsx | 1 - src/hooks/useOrders.jsx | 1 - src/pages/AccountPage.jsx | 60 +++++++++++++++++++++++++++++++--- src/pages/BasketPage.jsx | 27 +++++++++------ src/pages/FavoritesPage.jsx | 14 ++++---- src/pages/MainPage.jsx | 16 ++++++++- src/pages/OrderPage.jsx | 56 +++++++++++++++---------------- 11 files changed, 211 insertions(+), 71 deletions(-) diff --git a/db.json b/db.json index d87da8d..ee88b11 100644 --- a/db.json +++ b/db.json @@ -3,23 +3,38 @@ { "id": "1a54", "name": "новый товар", - "price": 102 + "price": 102, + "image": "images/fork.jpg" }, { "id": "f4f8", - "name": " товарчик", - "price": 111 + "name": "товарчик", + "price": 111, + "image": "images/chery.jpg" + }, + { + "id": "0fda", + "name": "ложка", + "price": 48, + "image": "images/bananas.jpg" } ], "basket": [ { - "id": "1", - "name": "Очки", - "price": 349, - "image": "images/glasses.jpg" + "id": "0fda", + "name": "ложка", + "price": 48, + "image": "images/bananas.jpg" + } + ], + "favorites": [ + { + "id": "1a54", + "name": "новый товар", + "price": 102, + "image": "images/fork.jpg" } ], - "favorites": [], "orders": [ { "id": "1", diff --git a/src/components/ProductCard.jsx b/src/components/ProductCard.jsx index 575c44c..e5f8ce5 100644 --- a/src/components/ProductCard.jsx +++ b/src/components/ProductCard.jsx @@ -1,16 +1,22 @@ import React from 'react'; -export default function ProductCard({ product, onEdit, onDelete }) { +export default function ProductCard({ product, onEdit, onDelete, onAddToFavorites }) { return (
+ {product.image && ( + {product.name} + )}
{product.name}

Цена: {product.price} ₽

- + +
); -} \ No newline at end of file +} diff --git a/src/components/ProductForm.jsx b/src/components/ProductForm.jsx index 0538c32..e2df644 100644 --- a/src/components/ProductForm.jsx +++ b/src/components/ProductForm.jsx @@ -1,32 +1,72 @@ import React, { useState, useEffect } from 'react'; export default function ProductForm({ initial, onSave, onCancel }) { - const [form, setForm] = useState({ name: '', price: '' }); + const [form, setForm] = useState({ name: '', price: '', image: '' }); useEffect(() => { - if (initial) setForm({ name: initial.name, price: initial.price }); + if (initial) { + setForm({ + name: initial.name || '', + price: initial.price || '', + image: initial.image || '' + }); + } else { + setForm({ name: '', price: '', image: '' }); + } }, [initial]); const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value }); const handleSubmit = e => { e.preventDefault(); - onSave({ ...initial, name: form.name, price: Number(form.price) }); - setForm({ name: '', price: '' }); + onSave({ ...initial, name: form.name, price: Number(form.price), image: form.image }); + setForm({ name: '', price: '', image: '' }); }; return (
- +
- +
+
+ + +
+ {form.image && ( +
+ Превью +
+ )}
); -} \ No newline at end of file +} diff --git a/src/components/ProductList.jsx b/src/components/ProductList.jsx index bd824c6..dbb72aa 100644 --- a/src/components/ProductList.jsx +++ b/src/components/ProductList.jsx @@ -1,11 +1,17 @@ import React from 'react'; import ProductCard from './ProductCard'; -export default function ProductList({ products, onEdit, onDelete }) { +export default function ProductList({ products, onEdit, onDelete, onAddToFavorites }) { return (
{products.map(prod => ( - + ))}
); diff --git a/src/hooks/useBasket.jsx b/src/hooks/useBasket.jsx index e18d87c..b84e77f 100644 --- a/src/hooks/useBasket.jsx +++ b/src/hooks/useBasket.jsx @@ -25,7 +25,6 @@ export default function useBasket() { }; const clearBasket = async () => { - // Очищаем корзину полностью for (let item of basket) { await fetch(`http://localhost:5000/basket/${item.id}`, { method: 'DELETE' }); } diff --git a/src/hooks/useOrders.jsx b/src/hooks/useOrders.jsx index 0b0aff5..90d374e 100644 --- a/src/hooks/useOrders.jsx +++ b/src/hooks/useOrders.jsx @@ -19,7 +19,6 @@ export default function useOrders() { setOrders([...orders, newOrder]); }; - // Можно реализовать фильтрацию прямо в хуке const inProcess = orders.filter(o => o.status === "in-process"); const completed = orders.filter(o => o.status === "completed"); diff --git a/src/pages/AccountPage.jsx b/src/pages/AccountPage.jsx index 6a42e90..acf7595 100644 --- a/src/pages/AccountPage.jsx +++ b/src/pages/AccountPage.jsx @@ -2,23 +2,75 @@ import React, { useState } from "react"; import useProfile from "../hooks/useProfile"; export default function AccountPage() { - const { profile } = useProfile(); + const { profile, updateProfile } = useProfile(); + const [showEdit, setShowEdit] = useState(false); + const [form, setForm] = useState(null); if (!profile) { return
Загрузка...
; } - + + const handleEdit = () => { + setForm(profile); + setShowEdit(true); + }; + + const handleChange = e => { + setForm({ ...form, [e.target.name]: e.target.value }); + }; + + const handleSave = async e => { + e.preventDefault(); + await updateProfile(form); + setShowEdit(false); + }; + + const handleCancel = () => setShowEdit(false); + return (
Профиль

{profile.firstName} {profile.lastName}

-
+ + {showEdit && ( +
+
+
+
+
+
Редактировать профиль
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+
+ )}
); -} +} \ No newline at end of file diff --git a/src/pages/BasketPage.jsx b/src/pages/BasketPage.jsx index b09f1f5..0ca8617 100644 --- a/src/pages/BasketPage.jsx +++ b/src/pages/BasketPage.jsx @@ -1,18 +1,25 @@ import React from "react"; -// импортируй кастомный хук для корзины, который ты сам реализуешь import useBasket from "../hooks/useBasket"; +import useOrders from "../hooks/useOrders"; export default function BasketPage() { - const { basket, addToBasket, removeFromBasket, clearBasket } = useBasket(); - // const { basket, removeFromBasket, checkout } = useBasket(); - // Ниже пример статики, замени на динамику после реализации useBasket + const { basket, removeFromBasket, clearBasket } = useBasket(); + const { addOrder } = useOrders(); - // const basket = [ - // { id: 1, name: "Очки", price: 349, image: "images/glasses.jpg" }, - // { id: 2, name: "Chery Tiggo 7 Pro Max", price: 5, image: "images/chery.jpg" }, - // { id: 3, name: "Ванадий", price: 2099, image: "images/vanadiy.jpg" }, - // ]; + const handleCheckout = () => { + if (basket.length === 0) { + alert("Корзина пуста"); + return; + } + // Сформируем заказ + addOrder({ + items: basket, + status: "in-process" + }); + clearBasket(); // Очищаем корзину + alert("Заказ оформлен!"); + }; return (
@@ -28,7 +35,7 @@ export default function BasketPage() { ))}
-
diff --git a/src/pages/FavoritesPage.jsx b/src/pages/FavoritesPage.jsx index 9213b16..a050f7e 100644 --- a/src/pages/FavoritesPage.jsx +++ b/src/pages/FavoritesPage.jsx @@ -1,14 +1,15 @@ import React from "react"; +import useBasket from "../hooks/useBasket"; import useFavorites from "../hooks/useFavorites"; export default function FavoritesPage() { - const { favorites, addToFavorites, removeFromFavorites } = useFavorites(); - // Ниже пример статических карточек + const { favorites, removeFromFavorites } = useFavorites(); + const { basket, addToBasket } = useBasket(); -// const favorites = [ -// { id: 1, name: "Женщина", price: "бесценна", image: "images/masha.jpg" }, -// { id: 2, name: "Отвертка", price: "219 руб", image: "images/screwdriver.jpg" }, -// ]; + const handleAddToBasket = (item) => { + addToBasket(item); + removeFromFavorites(item.id); + }; return (
@@ -21,6 +22,7 @@ export default function FavoritesPage() {
{item.name}

{item.price}

+
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 6bc9d7d..4eb2608 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,10 +1,12 @@ import React, { useState } from "react"; import useProducts from "../hooks/useProducts"; +import useFavorites from "../hooks/useFavorites"; import ProductList from "../components/ProductList"; import ProductForm from "../components/ProductForm"; export default function MainPage() { const { products, add, update, remove } = useProducts(); + const { favorites, addToFavorites } = useFavorites(); const [editing, setEditing] = useState(null); const [showForm, setShowForm] = useState(false); @@ -17,12 +19,24 @@ export default function MainPage() { }; const handleCancel = () => setShowForm(false); + const handleAddToFavorites = product => { + if (!favorites.some(fav => fav.id === product.id)) { + addToFavorites(product); + } + else alert('Товар уже в избранном!'); + }; + return (
{showForm && }

Рекомендуемые товары:

- +
); } diff --git a/src/pages/OrderPage.jsx b/src/pages/OrderPage.jsx index a1e4a89..b67176b 100644 --- a/src/pages/OrderPage.jsx +++ b/src/pages/OrderPage.jsx @@ -2,19 +2,7 @@ import React from "react"; import useOrders from "../hooks/useOrders"; export default function OrderPage() { - - const { orders, addOrder, inProcess, completed } = useOrders(); - // Пример статики - - // const inProcess = [ - // { id: 1, name: "Ложка", image: "images/spoon.jpg" }, - // { id: 2, name: "Вилка", image: "images/fork.jpg" }, - // { id: 3, name: "Нож", image: "images/knife.jpg" }, - // ]; - // const completed = [ - // { id: 4, name: "Утюг", image: "images/iron.jpg" }, - // { id: 5, name: "Бананы", image: "images/bananas.jpg" }, - // ]; + const { inProcess, completed } = useOrders(); return (
@@ -26,13 +14,19 @@ export default function OrderPage() {

В процессе

-
    - {inProcess.map(item => ( -
  • - {item.name} {item.name} -
    • - ))} -
+ {inProcess.length === 0 ? ( +
Нет заказов
+ ) : ( + inProcess.map(order => ( +
    + {order.items.map((item, idx) => ( +
  • + {item.name} {item.name} +
    • + ))} +
+ )) + )}
@@ -42,17 +36,23 @@ export default function OrderPage() {

Завершённые

-
    - {completed.map(item => ( -
  • - {item.name} {item.name} -
    • - ))} -
+ {completed.length === 0 ? ( +
Нет завершённых заказов
+ ) : ( + completed.map(order => ( +
    + {order.items.map((item, idx) => ( +
  • + {item.name} {item.name} +
    • + ))} +
+ )) + )}
); -} +} \ No newline at end of file