delivery form + database

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 (
+    <div className="delivery-form-group">
+      <label htmlFor="deliveryTime">{title}</label>
+      <select
+        id="deliveryTime"
+        name="deliveryTime"
+        value={value}
+        onChange={onChange}
+        required
+      >
+        <option value="" disabled>
+          Choose your desired delivery time slot
+        </option>
+        <option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
+        <option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
+        <option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
+      </select>
+    </div>
+  );
+}
+
+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: '',
+    address: initialAddress,
-    deliveryDate: '',
+    deliveryDate: initialDeliveryDate,
-    deliveryTime: '',
+    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 (
     <div className="delivery-form-container">
-      <h2 className='heading_h2'>Create Your Order</h2>
+      <h2 className="heading_h2">Create Your Order</h2>
       <form onSubmit={handleSubmit} className="delivery-form">
         <label htmlFor="address">Delivery Address</label>
         <input
@@ -60,14 +103,10 @@ function DeliveryForm() {
           required
         />
 
-        <label htmlFor="deliveryTime">Delivery Time</label>
+        <DeliveryTimeForm
-        <input
+          title="Delivery Time"
-          type="time"
-          id="deliveryTime"
-          name="deliveryTime"
           value={formData.deliveryTime}
           onChange={handleInputChange}
-          required
         />
 
         <label htmlFor="products">Products</label>

src/components/Footer.css

@@ -4,4 +4,6 @@
     color: white;
     text-align: center;
     padding: 20px 0;
+    position: relative;
+    top: 43px;
 }

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() {
+function OrderTracking({ currentUserId }) {
-  // Пример данных для заказа
+  const [userOrders, setUserOrders] = useState([]);
-  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: 'Позвонить при доставке',
-  });
 
-  const handleStatusUpdate = (newStatus) => {
+  useEffect(() => {
-    setOrderData((prevData) => ({ ...prevData, status: newStatus }));
+    // Фильтруем заказы по текущему пользователю
-  };
+    const filteredOrders = orders.filter(order => order.userId === currentUserId);
-  const handleStatusUpdate2 = (newStatus) => {
+    setUserOrders(filteredOrders);
-    setOrderData2((prevData) => ({ ...prevData, status: newStatus }));
+  }, [currentUserId]);
-  };
-  const handleStatusUpdate3 = (newStatus) => {
-    setOrderData3((prevData) => ({ ...prevData, status: newStatus }));
-  };
-  const handleStatusUpdate4 = (newStatus) => {
-    setOrderData4((prevData) => ({ ...prevData, status: newStatus }));
-  };
-  const handleStatusUpdate5 = (newStatus) => {
-    setOrderData5((prevData) => ({ ...prevData, status: newStatus }));
-  };
 
   return (
-    <div className="order-tracking-screen">
+    <div className="order-tracking-container">
-      <h2>Order tracking</h2>
+      <h2>Мои заказы</h2>
-      <table className="order-table">
+      {userOrders.length === 0 ? (
-        <thead>
+        <p>Заказы отсутствуют</p>
-          <tr>
+      ) : (
-            <th>Order Number</th>
+        <table className="order-table">
-            <th>Status</th>
+          <thead>
-            <th>Delivery Address</th>
+            <tr>
-            <th>Delivery Date and Time</th>
+              <th>Адрес доставки</th>
-            <th>Products</th>
+              <th>Дата доставки</th>
-            <th>Customer Name</th>
+              <th>Время доставки</th>
-            <th>Email</th>
+              <th>Продукты</th>
-            <th>Shipping</th>
+              <th>Комментарий</th>
-            <th>Payment</th>
+              <th>Статус</th>
-            <th>Order Date</th>
+            </tr>
-            <th>Expected Delivery</th>
+          </thead>
-            <th>Contacts</th>
+          <tbody>
-            <th>Discount Code</th>
+            {userOrders.map((order) => (
-            <th>Order Total</th>
+              <tr key={order.id}>
-            <th>Notes</th>
+                <td>{order.address}</td>
-            <th>Change Status</th>
+                <td>{order.deliveryDate}</td>
-          </tr>
+                <td>{order.deliveryTime}</td>
-        </thead>
+                <td>{order.products.join(', ')}</td>
-        <tbody>
+                <td>{order.comment}</td>
-          <tr>
+                <td>{order.status}</td>
-            <td>{orderData.orderId}</td>
+              </tr>
-            <td>{orderData.status}</td>
+            ))}
-            <td>{orderData.deliveryAddress}</td>
+          </tbody>
-            <td>{orderData.deliveryDateTime}</td>
+        </table>
-            <td>
+      )}
-              <ul className="order-items-list">
-                {orderData.items.map((item, index) => (
-                  <li key={index} className="order-item">
-                    {item.name} (x{item.quantity})
-                  </li>
-                ))}
-              </ul>
-            </td>
-            <td>{orderData.customerName}</td>
-            <td>{orderData.customerEmail}</td>
-            <td>{orderData.shippingMethod}</td>
-            <td>{orderData.paymentMethod}</td>
-            <td>{orderData.orderDate}</td>
-            <td>{orderData.estimatedDelivery}</td>
-            <td>{orderData.contactNumber}</td>
-            <td>{orderData.discountCode}</td>
-            <td>{orderData.totalAmount} руб.</td>
-            <td>{orderData.notes}</td>
-            <td>
-              <select value={orderData.status} onChange={(e) => handleStatusUpdate(e.target.value)}>
-                <option value="Создан">Создан</option>
-                <option value="Подтвержден">Подтвержден</option>
-                <option value="В пути">В пути</option>
-                <option value="Доставлен">Доставлен</option>
-                <option value="Отменен">Отменен</option>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>{orderData2.orderId}</td>
-            <td>{orderData2.status}</td>
-            <td>{orderData2.deliveryAddress}</td>
-            <td>{orderData2.deliveryDateTime}</td>
-            <td>
-              <ul className="order-items-list">
-                {orderData2.items.map((item, index) => (
-                  <li key={index} className="order-item">
-                    {item.name} (x{item.quantity})
-                  </li>
-                ))}
-              </ul>
-            </td>
-            <td>{orderData2.customerName}</td>
-            <td>{orderData2.customerEmail}</td>
-            <td>{orderData2.shippingMethod}</td>
-            <td>{orderData2.paymentMethod}</td>
-            <td>{orderData2.orderDate}</td>
-            <td>{orderData2.estimatedDelivery}</td>
-            <td>{orderData2.contactNumber}</td>
-            <td>{orderData2.discountCode}</td>
-            <td>{orderData2.totalAmount} руб.</td>
-            <td>{orderData2.notes}</td>
-            <td>
-              <select value={orderData2.status} onChange={(e) => handleStatusUpdate2(e.target.value)}>
-                <option value="Создан">Создан</option>
-                <option value="Подтвержден">Подтвержден</option>
-                <option value="В пути">В пути</option>
-                <option value="Доставлен">Доставлен</option>
-                <option value="Отменен">Отменен</option>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>{orderData3.orderId}</td>
-            <td>{orderData3.status}</td>
-            <td>{orderData3.deliveryAddress}</td>
-            <td>{orderData3.deliveryDateTime}</td>
-            <td>
-              <ul className="order-items-list">
-                {orderData3.items.map((item, index) => (
-                  <li key={index} className="order-item">
-                    {item.name} (x{item.quantity})
-                  </li>
-                ))}
-              </ul>
-            </td>
-            <td>{orderData3.customerName}</td>
-            <td>{orderData3.customerEmail}</td>
-            <td>{orderData3.shippingMethod}</td>
-            <td>{orderData3.paymentMethod}</td>
-            <td>{orderData3.orderDate}</td>
-            <td>{orderData3.estimatedDelivery}</td>
-            <td>{orderData3.contactNumber}</td>
-            <td>{orderData3.discountCode}</td>
-            <td>{orderData3.totalAmount} руб.</td>
-            <td>{orderData3.notes}</td>
-            <td>
-              <select value={orderData3.status} onChange={(e) => handleStatusUpdate3(e.target.value)}>
-                <option value="Создан">Создан</option>
-                <option value="Подтвержден">Подтвержден</option>
-                <option value="В пути">В пути</option>
-                <option value="Доставлен">Доставлен</option>
-                <option value="Отменен">Отменен</option>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>{orderData4.orderId}</td>
-            <td>{orderData4.status}</td>
-            <td>{orderData4.deliveryAddress}</td>
-            <td>{orderData4.deliveryDateTime}</td>
-            <td>
-              <ul className="order-items-list">
-                {orderData4.items.map((item, index) => (
-                  <li key={index} className="order-item">
-                    {item.name} (x{item.quantity})
-                  </li>
-                ))}
-              </ul>
-            </td>
-            <td>{orderData4.customerName}</td>
-            <td>{orderData4.customerEmail}</td>
-            <td>{orderData4.shippingMethod}</td>
-            <td>{orderData4.paymentMethod}</td>
-            <td>{orderData4.orderDate}</td>
-            <td>{orderData4.estimatedDelivery}</td>
-            <td>{orderData4.contactNumber}</td>
-            <td>{orderData4.discountCode}</td>
-            <td>{orderData4.totalAmount} руб.</td>
-            <td>{orderData4.notes}</td>
-            <td>
-              <select value={orderData4.status} onChange={(e) => handleStatusUpdate4(e.target.value)}>
-                <option value="Создан">Создан</option>
-                <option value="Подтвержден">Подтвержден</option>
-                <option value="В пути">В пути</option>
-                <option value="Доставлен">Доставлен</option>
-                <option value="Отменен">Отменен</option>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td>{orderData5.orderId}</td>
-            <td>{orderData5.status}</td>
-            <td>{orderData5.deliveryAddress}</td>
-            <td>{orderData5.deliveryDateTime}</td>
-            <td>
-              <ul className="order-items-list">
-                {orderData5.items.map((item, index) => (
-                  <li key={index} className="order-item">
-                    {item.name} (x{item.quantity})
-                  </li>
-                ))}
-              </ul>
-            </td>
-            <td>{orderData5.customerName}</td>
-            <td>{orderData5.customerEmail}</td>
-            <td>{orderData5.shippingMethod}</td>
-            <td>{orderData5.paymentMethod}</td>
-            <td>{orderData5.orderDate}</td>
-            <td>{orderData5.estimatedDelivery}</td>
-            <td>{orderData5.contactNumber}</td>
-            <td>{orderData5.discountCode}</td>
-            <td>{orderData5.totalAmount} руб.</td>
-            <td>{orderData5.notes}</td>
-            <td>
-              <select value={orderData5.status} onChange={(e) => handleStatusUpdate5(e.target.value)}>
-                <option value="Создан">Создан</option>
-                <option value="Подтвержден">Подтвержден</option>
-                <option value="В пути">В пути</option>
-                <option value="Отменен">Отменен</option>
-              </select>
-            </td>
-          </tr>
-        </tbody>
-      </table>
     </div>
   );
 }
 
-export default OrderTrackingScreen;
+export default OrderTracking;

src/components/ShippingDetails.js

@@ -59,8 +59,13 @@ function ShippingTimeForm({ title, value, onChange }) {
   return (
     <div className="shipping-form">
       <h3>{title}</h3>
-      <select value={value} onChange={(e) => onChange(e.target.value)}>
+      <select
-        <option>Choose your desired delivery time slot</option>
+        value={value}
+        onChange={onChange}  // передаем событие дальше
+        name="deliveryTime"
+        required
+      >
+        <option value="" disabled>Choose your desired delivery time slot</option>
         <option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
         <option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
         <option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>

src/mockData.js

@@ -1,14 +1,21 @@
-// mockData.js
+export const users = [{
-export let users = [{
+  id: 1,
-    id: 1,
+  name: 'Иван',
-    name: 'Иван',
+  surname: 'Иванов',
-    surname: 'Иванов',
+  phone: '1234567890',
-    phone: '1234567890',
+  password: 'password123',
-    password: 'password123',
+}];
-}, ];
+
+export const orders = [];
 
-// Функция для добавления пользователя (имитация записи в БД)
 export const addUser = (user) => {
-    user.id = users.length + 1;
+  const id = users.length + 1;
-    users.push(user);
+  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
 };