From de9a146722c050000e01c532af88f76c465da79b Mon Sep 17 00:00:00 2001 From: Vova <123321> Date: Sun, 27 Apr 2025 13:42:09 +0300 Subject: [PATCH] delivery form + database --- src/components/DeliveryForm.js | 83 +++++-- src/components/Footer.css | 2 + src/components/OrderTracking.js | 363 ++++-------------------------- src/components/ShippingDetails.js | 9 +- src/mockData.js | 29 ++- 5 files changed, 128 insertions(+), 358 deletions(-) diff --git a/src/components/DeliveryForm.js b/src/components/DeliveryForm.js index c410a1a..55adbfe 100644 --- a/src/components/DeliveryForm.js +++ b/src/components/DeliveryForm.js @@ -1,33 +1,76 @@ import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; +import { addOrder } from '../mockData'; // импорт функции добавления заказа import './DeliveryForm.css'; -function DeliveryForm() { +function DeliveryTimeForm({ title, value, onChange }) { + return ( +
+ + +
+ ); +} + +function DeliveryForm({ currentUserId }) { + const navigate = useNavigate(); + const location = useLocation(); + + const queryParams = new URLSearchParams(location.search); + const initialAddress = queryParams.get('address') || ''; + const initialDeliveryDate = queryParams.get('deliveryDate') || ''; + const initialDeliveryTime = queryParams.get('deliveryTime') || ''; + const [formData, setFormData] = useState({ - address: '', - deliveryDate: '', - deliveryTime: '', + address: initialAddress, + deliveryDate: initialDeliveryDate, + deliveryTime: initialDeliveryTime, products: '', comment: '', }); - const navigate = useNavigate(); // Хук для навигации - const handleInputChange = (e) => { const { name, value } = e.target; - setFormData({ ...formData, [name]: value }); + setFormData((prev) => ({ + ...prev, + [name]: value, + })); }; const handleSubmit = (e) => { e.preventDefault(); - const productsArray = formData.products.split(',').map((product) => product.trim()); - - console.log('Order Created:', { - ...formData, - products: productsArray, - }); - // Переход на страницу OrderTracking после создания заказа + const productsArray = formData.products + ? formData.products.split(',').map((product) => product.trim()) + : []; + + const newOrder = { + userId: currentUserId, // связываем заказ с пользователем + address: formData.address, + deliveryDate: formData.deliveryDate, + deliveryTime: formData.deliveryTime, + products: productsArray, + comment: formData.comment, + status: 'Создан', + orderDate: new Date().toISOString().split('T')[0], + id: null, // будет присвоено в addOrder + }; + + addOrder(newOrder); + navigate('/order-tracking'); }; @@ -37,7 +80,7 @@ function DeliveryForm() { return (
-

Create Your Order

+

Create Your Order

- - diff --git a/src/components/Footer.css b/src/components/Footer.css index a6d82f1..6625c19 100644 --- a/src/components/Footer.css +++ b/src/components/Footer.css @@ -4,4 +4,6 @@ color: white; text-align: center; padding: 20px 0; + position: relative; + top: 43px; } \ No newline at end of file diff --git a/src/components/OrderTracking.js b/src/components/OrderTracking.js index 794397b..bb8e73c 100644 --- a/src/components/OrderTracking.js +++ b/src/components/OrderTracking.js @@ -1,332 +1,49 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; +import { orders } from '../mockData'; import './OrderTrackingScreen.css'; -function OrderTrackingScreen() { - // Пример данных для заказа - const [orderData, setOrderData] = useState({ - orderId: 'ORD-90123', - status: 'Подтвержден', - deliveryAddress: 'Москва, ул. Тверская, д. 5', - deliveryDateTime: '2025-04-20 18:00', - items: [ - { name: 'Avocado', quantity: 4, image: '/images/avocado.jpg' }, - { name: 'Blueberries', quantity: 2, image: '/images/blueberries.jpg' }, - { name: 'Cheddar Cheese', quantity: 1, image: '/images/cheese.jpg' }, - { name: 'Dark Chocolate', quantity: 3, image: '/images/chocolate.jpg' }, - { name: 'Almonds', quantity: 1, image: '/images/almonds.jpg' }, - ], - customerName: 'Анна Петрова', - customerEmail: 'anna@example.com', - shippingMethod: 'Самовывоз', - paymentMethod: 'Наличными', - orderDate: '2025-04-10', - estimatedDelivery: '2025-04-20', - contactNumber: '+7 (499) 765-43-21', - discountCode: 'WELCOME10', - totalAmount: 3200, - notes: 'Позвонить за час до доставки', - }); - const [orderData2, setOrderData2] = useState({ - orderId: 'ORD-90124', - status: 'Создан', - deliveryAddress: 'Санкт-Петербург, ул. невский пр., д. 5', - deliveryDateTime: '2025-04-19 12:00', - items: [ - { name: 'Mango', quantity: 2, image: '/images/mango.jpg' }, - { name: 'Pineapple', quantity: 2, image: '/images/pineapple.jpg' }, - { name: 'Tomatoes', quantity: 4, image: '/images/tomatoes.jpg' }, - { name: 'Cucumber', quantity: 4, image: '/images/cucumber.jpg' }, - ], - customerName: 'Алексей Сидоров', - customerEmail: 'Alex@example.com', - shippingMethod: 'Экспресс', - paymentMethod: 'Онлайн картой', - orderDate: '2025-04-10', - estimatedDelivery: '2025-04-19', - contactNumber: '+7 (499) 765-43-22', - discountCode: 'WELCOME11', - totalAmount: 1000, - notes: 'Позвонить при доставке', - }); - const [orderData3, setOrderData3] = useState({ - orderId: 'ORD-90125', - status: 'В пути', - deliveryAddress: 'Казань, ул. Баумана, д. 5', - deliveryDateTime: '2025-04-21 15:00', - items: [ - { name: 'Orange', quantity: 2, image: '/images/orange.jpg' }, - { name: 'Kiwi', quantity: 2, image: '/images/kiwi.jpg' }, - { name: 'Potato', quantity: 4, image: '/images/potato.jpg' }, - { name: 'Onion', quantity: 4, image: '/images/onion.jpg' }, - ], - customerName: 'Ольга Васильева', - customerEmail: 'olga@example.com', - shippingMethod: 'Стандарт', - paymentMethod: 'Онлайн картой', - orderDate: '2025-04-11', - estimatedDelivery: '2025-04-21', - contactNumber: '+7 (499) 765-43-23', - discountCode: 'WELCOME12', - totalAmount: 1200, - notes: 'Позвонить при доставке', - }); - const [orderData4, setOrderData4] = useState({ - orderId: 'ORD-90126', - status: 'Доставлен', - deliveryAddress: 'Самара, ул. Ленинградская, д. 5', - deliveryDateTime: '2025-04-22 16:00', - items: [ - { name: 'Apple', quantity: 2, image: '/images/apple.jpg' }, - { name: 'Lemon', quantity: 2, image: '/images/lemon.jpg' }, - { name: 'Meat', quantity: 1, image: '/images/meat.jpg' }, - ], - customerName: 'Петр Иванов', - customerEmail: 'petr@example.com', - shippingMethod: 'Стандарт', - paymentMethod: 'Онлайн картой', - orderDate: '2025-04-12', - estimatedDelivery: '2025-04-22', - contactNumber: '+7 (499) 765-43-24', - discountCode: 'WELCOME13', - totalAmount: 3000, - notes: 'Позвонить за час до доставки', - }); - const [orderData5, setOrderData5] = useState({ - orderId: 'ORD-90127', - status: 'Отменен', - deliveryAddress: 'Ростов, ул. Пушкинская, д. 5', - deliveryDateTime: '2025-04-23 17:00', - items: [ - { name: 'Fish', quantity: 1, image: '/images/fish.jpg' }, - { name: 'Milk', quantity: 2, image: '/images/milk.jpg' }, - { name: 'Bread', quantity: 1, image: '/images/bread.jpg' }, - ], - customerName: 'Екатерина Смирнова', - customerEmail: 'kate@example.com', - shippingMethod: 'Экспресс', - paymentMethod: 'Онлайн картой', - orderDate: '2025-04-13', - estimatedDelivery: '2025-04-23', - contactNumber: '+7 (499) 765-43-25', - discountCode: 'WELCOME14', - totalAmount: 1400, - notes: 'Позвонить при доставке', - }); +function OrderTracking({ currentUserId }) { + const [userOrders, setUserOrders] = useState([]); - const handleStatusUpdate = (newStatus) => { - setOrderData((prevData) => ({ ...prevData, status: newStatus })); - }; - const handleStatusUpdate2 = (newStatus) => { - setOrderData2((prevData) => ({ ...prevData, status: newStatus })); - }; - const handleStatusUpdate3 = (newStatus) => { - setOrderData3((prevData) => ({ ...prevData, status: newStatus })); - }; - const handleStatusUpdate4 = (newStatus) => { - setOrderData4((prevData) => ({ ...prevData, status: newStatus })); - }; - const handleStatusUpdate5 = (newStatus) => { - setOrderData5((prevData) => ({ ...prevData, status: newStatus })); - }; + useEffect(() => { + // Фильтруем заказы по текущему пользователю + const filteredOrders = orders.filter(order => order.userId === currentUserId); + setUserOrders(filteredOrders); + }, [currentUserId]); return ( -
-

Order tracking

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Order NumberStatusDelivery AddressDelivery Date and TimeProductsCustomer NameEmailShippingPaymentOrder DateExpected DeliveryContactsDiscount CodeOrder TotalNotesChange Status
{orderData.orderId}{orderData.status}{orderData.deliveryAddress}{orderData.deliveryDateTime} -
    - {orderData.items.map((item, index) => ( -
  • - {item.name} (x{item.quantity}) -
    • - ))} -
- 		{orderData.customerName}{orderData.customerEmail}{orderData.shippingMethod}{orderData.paymentMethod}{orderData.orderDate}{orderData.estimatedDelivery}{orderData.contactNumber}{orderData.discountCode}{orderData.totalAmount} руб.{orderData.notes} - -
{orderData2.orderId}{orderData2.status}{orderData2.deliveryAddress}{orderData2.deliveryDateTime} -
    - {orderData2.items.map((item, index) => ( -
  • - {item.name} (x{item.quantity}) -
    • - ))} -
- 		{orderData2.customerName}{orderData2.customerEmail}{orderData2.shippingMethod}{orderData2.paymentMethod}{orderData2.orderDate}{orderData2.estimatedDelivery}{orderData2.contactNumber}{orderData2.discountCode}{orderData2.totalAmount} руб.{orderData2.notes} - -
{orderData3.orderId}{orderData3.status}{orderData3.deliveryAddress}{orderData3.deliveryDateTime} -
    - {orderData3.items.map((item, index) => ( -
  • - {item.name} (x{item.quantity}) -
    • - ))} -
- 		{orderData3.customerName}{orderData3.customerEmail}{orderData3.shippingMethod}{orderData3.paymentMethod}{orderData3.orderDate}{orderData3.estimatedDelivery}{orderData3.contactNumber}{orderData3.discountCode}{orderData3.totalAmount} руб.{orderData3.notes} - -
{orderData4.orderId}{orderData4.status}{orderData4.deliveryAddress}{orderData4.deliveryDateTime} -
    - {orderData4.items.map((item, index) => ( -
  • - {item.name} (x{item.quantity}) -
    • - ))} -
- 		{orderData4.customerName}{orderData4.customerEmail}{orderData4.shippingMethod}{orderData4.paymentMethod}{orderData4.orderDate}{orderData4.estimatedDelivery}{orderData4.contactNumber}{orderData4.discountCode}{orderData4.totalAmount} руб.{orderData4.notes} - -
{orderData5.orderId}{orderData5.status}{orderData5.deliveryAddress}{orderData5.deliveryDateTime} -
    - {orderData5.items.map((item, index) => ( -
  • - {item.name} (x{item.quantity}) -
    • - ))} -
- 		{orderData5.customerName}{orderData5.customerEmail}{orderData5.shippingMethod}{orderData5.paymentMethod}{orderData5.orderDate}{orderData5.estimatedDelivery}{orderData5.contactNumber}{orderData5.discountCode}{orderData5.totalAmount} руб.{orderData5.notes} - -
+
+

Мои заказы

+ {userOrders.length === 0 ? ( +

Заказы отсутствуют

+ ) : ( + + + + + + + + + + + + + {userOrders.map((order) => ( + + + + + + + + + ))} + +
Адрес доставкиДата доставкиВремя доставкиПродуктыКомментарийСтатус
{order.address}{order.deliveryDate}{order.deliveryTime}{order.products.join(', ')}{order.comment}{order.status}
+ )}
); } -export default OrderTrackingScreen; +export default OrderTracking; diff --git a/src/components/ShippingDetails.js b/src/components/ShippingDetails.js index 6ccff57..d46e04c 100644 --- a/src/components/ShippingDetails.js +++ b/src/components/ShippingDetails.js @@ -59,8 +59,13 @@ function ShippingTimeForm({ title, value, onChange }) { return (

{title}

- + diff --git a/src/mockData.js b/src/mockData.js index 0477cf3..836a197 100644 --- a/src/mockData.js +++ b/src/mockData.js @@ -1,14 +1,21 @@ -// mockData.js -export let users = [{ - id: 1, - name: 'Иван', - surname: 'Иванов', - phone: '1234567890', - password: 'password123', -}, ]; +export const users = [{ + id: 1, + name: 'Иван', + surname: 'Иванов', + phone: '1234567890', + password: 'password123', +}]; + +export const orders = []; -// Функция для добавления пользователя (имитация записи в БД) export const addUser = (user) => { - user.id = users.length + 1; - users.push(user); + const id = users.length + 1; + users.push({ id, ...user }); + return id; // return id for confirmation +}; + +export const addOrder = (order) => { + const id = orders.length + 1; + orders.push({ id, ...order }); + return id; // return id for confirmation };