laba5

2024-01-17 20:19:32 +04:00 · 2024-01-17 20:19:32 +04:00 · 4fbf84e1a3
commit 4fbf84e1a3
parent 51d0c67bdd
65 changed files with 7859 additions and 0 deletions
--- a/lab5/.eslintrc.cjs
+++ b/lab5/.eslintrc.cjs
@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'react/prop-types': 'off',
+  },
+}
--- a/lab5/.eslintrc.json
+++ b/lab5/.eslintrc.json
@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": "airbnb-base",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "quotes": "off",
+    "indent": "off",
+    "no-console": "off",
+    "no-use-before-define": "off",
+    "no-alert": "off",
+    "no-restricted-globals": "off",
+    "quote-props": "off"
+  }
+}
--- a/lab5/.gitignore
+++ b/lab5/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/lab5/README.md
+++ b/lab5/README.md
@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
--- a/lab5/index.html
+++ b/lab5/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lab. 5</title>
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="./src/assets/styles/style.css">
+    <script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
+  </head>
+  <body class="d-flex flex-column h-100" style="min-height: 100vh;">
+    <div id="root" class="d-flex flex-column h-100" style="flex: 1 0 auto"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/lab5/package-lock.json
+++ b/lab5/package-lock.json
--- a/lab5/package.json
+++ b/lab5/package.json
@ -0,0 +1,40 @@
+{
+  "name": "project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "server": "json-server -w server/data.json -p 8081",
+    "app": "npm-run-all --parallel dev server"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@popperjs/core": "^2.11.8",
+    "axios": "^1.6.5",
+    "bootstrap": "^5.3.2",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
+    "path": "^0.12.7",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-router-dom": "^6.19.0",
+    "url": "^0.11.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "vite": "^5.0.0"
+  }
+}
--- a/lab5/server/data.json
+++ b/lab5/server/data.json
--- a/lab5/src/App.jsx
+++ b/lab5/src/App.jsx
@ -0,0 +1,12 @@
+import Navigation from "./components/navigation/Navigation";
+import Contexts from "./contexts/Contexts";
+
+function App() {
+  return (
+    <Contexts>
+      <Navigation />
+    </Contexts>
+  );
+}
+
+export default App;
--- a/lab5/src/assets/Images/flower.jpg
+++ b/lab5/src/assets/Images/flower.jpg
--- a/lab5/src/assets/Images/logo.png
+++ b/lab5/src/assets/Images/logo.png
--- a/lab5/src/assets/Images/rose.jpg
+++ b/lab5/src/assets/Images/rose.jpg
--- a/lab5/src/assets/styles/style.css
+++ b/lab5/src/assets/styles/style.css
@ -0,0 +1,60 @@
+header nav {
+    background-color: #e8fae0;
+}
+
+@media (min-width: 768px) {
+    header nav {
+        height: 100px;
+    }
+}
+
+header nav a:hover {
+    text-decoration: underline;
+}
+
+.navbar-brand img {
+    margin-left: 235px;
+}
+
+@media (max-width: 576px) {
+    .navbar-brand img {
+        margin-left: 25px;
+    }
+}
+
+@media (min-width: 577px) and (max-width: 992px) {
+    .navbar-brand img {
+        margin-left: 25px;
+    }
+}
+
+@media (min-width: 993px) and (max-width: 1200px) {
+    .navbar-brand img {
+        margin-left: 150px;
+    }
+}
+
+@media (min-width: 1201px) {
+    .navbar-brand img {
+        margin-left: 235px;
+    }
+}
+
+.navbar-nav {
+    margin-top: 25px;
+}
+
+.btn {
+    background-color: #7bca8c !important;
+    border-radius: 8px;
+    height: 35px;
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-top: 10px;
+    color: #FFFFFF !important;
+}
+
+footer {
+    background-color: #e8fae0;
+    color: #686464;
+}
--- a/lab5/src/axios.js
+++ b/lab5/src/axios.js
@ -0,0 +1,9 @@
+import axios from "axios";
+
+import { serverPath } from "./variables/variables";
+
+const $axios = axios.create({
+  baseURL: serverPath
+});
+
+export default $axios;
--- a/lab5/src/components/layout/Footer.jsx
+++ b/lab5/src/components/layout/Footer.jsx
@ -0,0 +1,9 @@
+function Footer() {
+  return (
+    <footer className="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+      Все права защищены © 2023-2024
+    </footer>
+  );
+}
+
+export default Footer;
--- a/lab5/src/components/layout/Header.jsx
+++ b/lab5/src/components/layout/Header.jsx
@ -0,0 +1,73 @@
+import { useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Logo from "../../assets/Images/logo.png";
+import { UserContext } from '../../contexts/userContext';
+import { useRef } from "react";
+
+function Header() {
+  const { isAuth, isAdmin, logout } = useContext(UserContext);
+
+  return (
+    <header>
+      <nav className="navbar navbar-expand-md">
+        <div className="container-fluid">
+          <Link className="navbar-brand" to="/">
+            <img src={Logo} alt="logo" width="128" />
+          </Link>
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="navbar-collapse collapse justify-content-start" id="navbarNav">
+            <div className="navbar-nav">
+              <Link className="nav-link" to="/">Каталог</Link>
+              <Link className="nav-link" to="/aboutUs">О нас</Link>
+              <Link className="nav-link" to="/paymentAndDelivery">Оплата и доставка</Link>
+              <Link className="nav-link" to="/contacts">Контакты</Link>
+              <HeaderInput />
+            </div>
+          </div>
+          <div className="navbar-collapse collapse justify-content-end" id="navbarNav">
+            <div className="navbar-nav">
+              <Link
+                className="btn"
+                to="/login"
+                onClick={isAuth ? logout : undefined}
+              >
+                {isAuth ? "Выйти" : "Войти"}
+              </Link>
+              <Link className="btn" to="/basket">Корзина</Link>
+              <Link className="btn" to="/orders">Заказы</Link>
+              {isAdmin && (<Link className="btn" to="/admin">Админка</Link>)}
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}
+
+function HeaderInput() {
+  const inputRef = useRef(null);
+  const navigate = useNavigate();
+
+  // Функции
+  function handleEnterDown(e) {
+    if (e.key !== 'Enter') return;
+
+    const value = inputRef.current.value;
+    if (!value) return;
+
+    navigate(`/search?term=${value}`);
+  }
+  // Функции END
+
+  return (
+    <form className="d-flex mb-2 mb-sm-0" role="search" onSubmit={(e) => e.preventDefault()}>
+      <input className="form-control" type="search" placeholder="Поиск товара..." aria-label="Search" onKeyDown={handleEnterDown} ref={inputRef} />
+    </form>
+  );
+}
+
+export default Header;
--- a/lab5/src/components/layout/Layout.jsx
+++ b/lab5/src/components/layout/Layout.jsx
@ -0,0 +1,37 @@
+import { Outlet } from "react-router-dom";
+import Header from "./Header";
+import Footer from "./Footer";
+import { useContext, useEffect } from "react";
+import { UserContext } from './../../contexts/userContext';
+import { BasketContext } from './../../contexts/basketContext';
+import { FavouritesContext } from './../../contexts/favouritesContext';
+import { OrdersContext } from "../../contexts/ordersContext";
+
+function Layout() {
+  const { id, checkIsAuth } = useContext(UserContext);
+  const { fetchBasketAndProducts } = useContext(BasketContext);
+  const { fetchFavourites } = useContext(FavouritesContext);
+  const { fetchOrders } = useContext(OrdersContext);
+
+  useEffect(() => {
+    fetchBasketAndProducts();
+    fetchFavourites();
+    fetchOrders();
+  }, [id]);
+
+  useEffect(() => {
+    checkIsAuth();
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default Layout;
--- a/lab5/src/components/navigation/Navigation.jsx
+++ b/lab5/src/components/navigation/Navigation.jsx
@ -0,0 +1,42 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Layout from '../layout/Layout';
+import Admin from "../screens/Admin/Admin";
+import Basket from "../screens/Basket/Basket";
+import Contacts from "../screens/Contacts/Contacts";
+import Home from '../screens/Home/Home';
+import PaymentAndDelivery from "../screens/PaymentAndDelivery/PaymentAndDelivery";
+import Registration from "../screens/Registration/Registration";
+import AboutUs from './../screens/AboutUs/AboutUs';
+import Login from './../screens/Login/Login';
+import MakingAnOrder from './../screens/MakingAnOrder/MakingAnOrder';
+import PageEdit from './../screens/PageEdit/PageEdit';
+import PersonalAccount from './../screens/PersonalAccount/PersonalAccount';
+import Search from '../screens/Search/Search';
+
+// Привязываем компоненты-страницы к путям
+function Navigation() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Весь сайт оборачиваем в шаблон <Layout /> */}
+        <Route path="/" element={<Layout />}>
+          <Route path="/aboutUs" element={<AboutUs />} />
+          <Route path="/admin" element={<Admin />} />
+          <Route path="/basket" element={<Basket />} />
+          <Route path="/contacts" element={<Contacts />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/paymentAndDelivery" element={<PaymentAndDelivery />} />
+          <Route path="/makingAnOrder" element={<MakingAnOrder />} />
+          <Route path="/pageEdit" element={<PageEdit />} />
+          <Route path="/personalAccount" element={<PersonalAccount />} />
+          <Route path="/search" element={<Search />} />
+
+          <Route path="/login" element={<Login />} />
+          <Route path="/registration" element={<Registration />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Navigation;
--- a/lab5/src/components/screens/AboutUs/AboutUs.jsx
+++ b/lab5/src/components/screens/AboutUs/AboutUs.jsx
@ -0,0 +1,46 @@
+function AboutUs() {
+  return (
+    <>
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text font-weight-bold">О компании</h1>
+      </div>
+      <div className="container">
+        <div className="row">
+          <h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Наши
+            преимущества:</h2>
+          <ul>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> привозим
+              официально и напрямую из Южной Кореи</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}>
+              качественная упаковка и обслуживание</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
+              отправка</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
+              доставка (в среднем 8 дней по России)</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> удобная
+              оплата через сайт</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> большой
+              ассортимент в наличии в Ульяновске</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> никаких
+              доплат из-за веса, количества, выбора версии и т.д.</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> после
+              оплаты заказа на эл. почту Вам приходит чек, подтверждающий Вашу покупку</li>
+            <li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> работаем
+              почти 8 лет</li>
+          </ul>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>За время работы
+            магазина, мы уже продали более 60 000 альбомов.</p>
+          <p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Также у нас есть
+            физический магазин в Ульяновске, где весь товар можно увидеть в живую!</p>
+          <p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Адрес магазина:
+            Ульяновск, ул. Северный Венец 32. Время работы: каждый день с 13:00 до 21:00</p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AboutUs;
--- a/lab5/src/components/screens/Admin/Admin.jsx
+++ b/lab5/src/components/screens/Admin/Admin.jsx
@ -0,0 +1,28 @@
+import { useContext, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { ProductsContext } from "../../../contexts/productsContext";
+import { CategoriesContext } from './../../../contexts/categoriesContext';
+import AdminTable from "./AdminTable";
+
+function Admin() {
+  const { fetchProducts } = useContext(ProductsContext);
+  const { fetchCategories } = useContext(CategoriesContext);
+
+  useEffect(() => {
+    fetchCategories();
+    fetchProducts();
+  }, []);
+
+  return (
+    <div className="container-fluid text-center p-2">
+      <h1 className="text-center font-weight-bold">Панель администратора</h1>
+      <div className="btn-group" role="group">
+        <Link className="btn" to="/pageEdit">Добавить товар</Link>
+      </div>
+
+      <AdminTable />
+    </div>
+  );
+}
+
+export default Admin;
--- a/lab5/src/components/screens/Admin/AdminTable.jsx
+++ b/lab5/src/components/screens/Admin/AdminTable.jsx
@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { ProductsContext } from "../../../contexts/productsContext";
+import AdminTableRow from "./AdminTableRow";
+
+function AdminTable() {
+  const { products } = useContext(ProductsContext);
+
+  return (
+    <div className="w-100">
+      <h2 className="text-center font-weight-bold" style={{ paddingTop: "19px" }}>Таблица данных</h2>
+      <table id="items-table" className="table table-striped">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col" className="w-25">Название</th>
+            <th scope="col" className="w-25">Вид</th>
+            <th scope="col" className="w-25">Цена</th>
+            <th scope="col" className="w-25">Фото</th>
+            <th scope="col"></th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {products && products.map(product => <AdminTableRow product={product} key={product.id} />)}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default AdminTable;
--- a/lab5/src/components/screens/Admin/AdminTableRow.jsx
+++ b/lab5/src/components/screens/Admin/AdminTableRow.jsx
@ -0,0 +1,41 @@
+import { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { CategoriesContext } from "../../../contexts/categoriesContext";
+import { ProductsContext } from "../../../contexts/productsContext";
+
+function AdminTableRow({ product }) {
+  const { deleteProduct } = useContext(ProductsContext);
+  const { getCategoryById } = useContext(CategoriesContext);
+  const [category, setCategory] = useState(null);
+
+  useEffect(() => {
+    async function getCategory() {
+      const response = await getCategoryById(product.categoryId);
+      setCategory(response);
+    }
+
+    getCategory();
+  }, [product]);
+
+  return (
+    <tr>
+      <td>{product.id}</td>
+      <td>{product.name}</td>
+      <td>{category && category.name}</td>
+      <td>{product.price}</td>
+      <td><img src={product.photo} alt="" style={{ maxWidth: "150px", maxHeight: "150px" }} className="w-100" /></td>
+      <td>
+        <Link to={`/pageEdit?id=${product.id}`}>
+          <i className="fa-solid fa-pencil"></i>
+        </Link>
+      </td>
+      <td>
+        <button className="bg-transparent border-0" onClick={() => deleteProduct(product.id)}>
+          <i className="fa-solid fa-trash"></i>
+        </button>
+      </td>
+    </tr>
+  );
+}
+
+export default AdminTableRow;
--- a/lab5/src/components/screens/Basket/Basket.jsx
+++ b/lab5/src/components/screens/Basket/Basket.jsx
@ -0,0 +1,24 @@
+import { useContext, useState } from "react";
+import { BasketContext } from './../../../contexts/basketContext';
+import BasketWithItems from "./BasketWithItems";
+import BasketHistory from "./BasketHistory";
+import BasketModal from "./BasketModal";
+
+function Basket() {
+  const { basketProducts } = useContext(BasketContext);
+  const isCartFull = basketProducts && basketProducts.length != 0;
+  const [currentOrder, setCurrentOrder] = useState(null);
+
+  return (
+    <div className="container">
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text-success font-weight-bold">Корзина</h1>
+      </div>
+      {isCartFull ? <BasketWithItems /> : (<p>Корзина пуста...</p>)}
+      <BasketHistory setCurrentOrder={setCurrentOrder} />
+      <BasketModal currentOrder={currentOrder} />
+    </div>
+  );
+}
+
+export default Basket;
--- a/lab5/src/components/screens/Basket/BasketHistory.jsx
+++ b/lab5/src/components/screens/Basket/BasketHistory.jsx
@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { OrdersContext } from './../../../contexts/ordersContext';
+import BasketHistoryRow from "./BasketHistoryRow";
+
+function BasketHistory({ setCurrentOrder }) {
+  const { orders } = useContext(OrdersContext);
+
+  return (
+    <div className="table-responsive mt-5">
+      <table className="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col">ID заказа</th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody id="parent">
+          {orders && orders.map(order => <BasketHistoryRow setCurrentOrder={setCurrentOrder} key={order.id} order={order} />)}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default BasketHistory;
--- a/lab5/src/components/screens/Basket/BasketHistoryRow.jsx
+++ b/lab5/src/components/screens/Basket/BasketHistoryRow.jsx
@ -0,0 +1,21 @@
+
+function BasketHistoryRow({ order, setCurrentOrder }) {
+  return (
+    <tr>
+      <td>{order.id}</td>
+      <td>
+        <button
+          type="button"
+          className="btn"
+          data-bs-toggle="modal"
+          data-bs-target="#exampleModal"
+          onClick={() => setCurrentOrder({ id: order.id, date: order.date })}
+        >
+          Открыть детали
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+export default BasketHistoryRow;
--- a/lab5/src/components/screens/Basket/BasketItem.jsx
+++ b/lab5/src/components/screens/Basket/BasketItem.jsx
@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { BasketContext } from "../../../contexts/basketContext";
+
+function BasketItem({ product }) {
+  const { deleteProductFromBasket } = useContext(BasketContext);
+
+  return (
+    <div className="card rounded-3 mb-4">
+      <div className="card-body p-4">
+        <div className="row d-flex justify-content-between align-items-center">
+          <div className="col-md-2 col-lg-2 col-xl-2">
+            <img src={product.photo} className="img-fluid rounded-3 w-100" alt="Flower" style={{ maxWidth: "200px", maxHeight: "200px" }} />
+          </div>
+          <div className="col-md-auto col-lg-3 col-xl-3">
+            <p className="lead fw-normal mb-2">{product.name}</p>
+          </div>
+          <div className="col-md-auto col-lg-2 col-xl-2 offset-lg-1">
+            <h5 className="mb-0">Цена {product.price}₽</h5>
+          </div>
+          <div className="col-md-auto col-lg-0 col-xl-0 text-end">
+            <button className="text-muted btn" onClick={() => deleteProductFromBasket(product.id)}><i className="fas fa-delete-left fa-lg"></i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BasketItem;
--- a/lab5/src/components/screens/Basket/BasketModal.jsx
+++ b/lab5/src/components/screens/Basket/BasketModal.jsx
@ -0,0 +1,62 @@
+import { useContext, useEffect, useState } from "react";
+import { OrdersContext } from "../../../contexts/ordersContext";
+
+function BasketModal({ currentOrder }) {
+  //позволяет получать продукты заказа по id заказа
+  const { getOrderProducts } = useContext(OrdersContext);
+  //состояние для таких продуктов
+  const [orderProducts, setOrderProducts] = useState(null);
+
+  useEffect(() => {
+    if (!currentOrder) return;
+
+    const func = async () => {
+      // Получение нужных продуктов
+      const response = await getOrderProducts(currentOrder.id);
+      // Обновление состояния
+      setOrderProducts(response);
+    }
+
+    func();
+  }, [currentOrder]);
+
+  return (
+    <div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="modal-title fs-5" id="exampleModalLabel">Детали заказа</h1>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div className="modal-body">
+            <p><b>ID Заказа:</b> {currentOrder ? currentOrder.id : null}</p>
+            <p><b>Дата заказа:</b> {currentOrder ? new Date(currentOrder.date).toLocaleString('ru-RU') : null}</p>
+            <p><b>Товары в заказе:</b></p>
+            <table className="table table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">Название товара</th>
+                  <th scope="col">Фото</th>
+                  <th scope="col">Цена</th>
+                </tr>
+              </thead>
+              <tbody id="parent">
+                {orderProducts && orderProducts.map(op => {
+                  return (
+                    <tr key={op.id}>
+                      <td>{op.name}</td>
+                      <td><img src={op.photo} alt="" style={{ maxWidth: "100px", maxHeight: "100px" }} /></td>
+                      <td>{op.price}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BasketModal;
--- a/lab5/src/components/screens/Basket/BasketWithItems.jsx
+++ b/lab5/src/components/screens/Basket/BasketWithItems.jsx
@ -0,0 +1,49 @@
+import { useContext, useEffect, useState } from "react";
+import { BasketContext } from "../../../contexts/basketContext";
+import { OrdersContext } from './../../../contexts/ordersContext';
+import BasketItem from './BasketItem';
+
+function BasketWithItems() {
+  const { basketProducts, getBasketProductsWithTotalPrice } = useContext(BasketContext);
+  const [products, setProducts] = useState(null);
+  const [totalPrice, setTotalPrice] = useState(0);
+
+  const { createOrder } = useContext(OrdersContext);
+
+  useEffect(() => {
+    getDataForCart();
+  }, [basketProducts]);
+
+  async function getDataForCart() {
+    const [prods, total] = await getBasketProductsWithTotalPrice();
+    setProducts(prods);
+    setTotalPrice(total);
+  }
+
+  async function handleCreateOrder() {
+    const productsIds = products.map(product => product.id);
+    const orderId = await createOrder({ date: Date.now() }, productsIds);
+    alert(`Заказ №${orderId} создан!`);
+  }
+
+  return (
+    <>
+      <div className="row">
+        <div className="col-10">
+          {products && products.map(bp => <BasketItem product={bp} key={bp.id} />)}
+        </div>
+      </div>
+      <div className="d-flex justify-content-start align-items-center">
+        <div className="text-dark font-weight-bold" style={{ fontSize: "24px" }}>
+          Сумма заказа:
+        </div>
+        <div className="text-end text-success" style={{ fontSize: "24px" }}>
+          {totalPrice} ₽
+        </div>
+      </div>
+      <button className="btn" style={{ marginLeft: "25px", marginBottom: "10px" }} onClick={handleCreateOrder}>Оплатить</button>
+    </>
+  );
+};
+
+export default BasketWithItems;
--- a/lab5/src/components/screens/Contacts/Contacts.jsx
+++ b/lab5/src/components/screens/Contacts/Contacts.jsx
@ -0,0 +1,22 @@
+function Contacts() {
+  return (
+    <>
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text-success font-weight-bold">Контакты</h1>
+      </div>
+      <div className="container">
+        <div className="row">
+          <div className="div d-flex justify-content-center">
+            <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Afa2d61fb6063802ddf9f646ff254a8764a6dfd399031b696dbda0a7c93474211&amp;source=constructor" className="img-fluid" style={{width: "980px", height: "505px"}}></iframe>
+          </div>
+          <a href="tel:+79273456567" className="text-dark" style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>+7 (927) 345 65 67</a>
+          <h2 className="fw-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>г.Ульяновск, ул.Гончарова, 40</h2>
+          <p style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>Пн-Пт: 9:00 - 20:00</p>
+          <p style={{fontSize: "25px", marginLeft: "10px", marginTop: "10px"}}>Сб-Вс: 10:00 - 19:00</p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Contacts;
--- a/lab5/src/components/screens/Home/Card.jsx
+++ b/lab5/src/components/screens/Home/Card.jsx
@ -0,0 +1,44 @@
+import { useContext } from "react";
+import { ProductType } from '../../../types/ProductType';
+import { BasketContext } from '../../../contexts/basketContext';
+import { FavouritesContext } from "../../../contexts/favouritesContext";
+
+function Card({ product }) {
+  const { isProductInBasket, addProductToBasket, deleteProductFromBasket } = useContext(BasketContext);
+  const isBasketProduct = isProductInBasket(product.id);
+
+  const { isProductInFavourites, addProductToFavourites, deleteProductFromFavourites } = useContext(FavouritesContext);
+  const isFavouriteProduct = isProductInFavourites(product.id)
+
+  return (
+    <div className="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
+      <div className="card">
+        <img src={product.photo} className="card-img-top" alt="Product Image" />
+        <div className="card-body">
+          <h5 className="card-title">{product.name}</h5>
+        </div>
+        <div className="card-footer">
+          <div className="text-success font-weight-bold">Цена {product.price}₽</div>
+          <button
+            className="btn"
+            onClick={!isBasketProduct ? () => addProductToBasket(product.id) : () => deleteProductFromBasket(product.id)}
+          >
+            {isBasketProduct ? "Удалить из корзины" : "В корзину"}
+          </button>
+          <button
+            className="btn"
+            onClick={!isFavouriteProduct ? () => addProductToFavourites(product.id) : () => deleteProductFromFavourites(product.id)}
+          >
+            {isFavouriteProduct ? "Удалить из избранных" : "Добавить в избранное"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Card.propTypes = {
+  product: ProductType.isRequired
+}
+
+export default Card;
--- a/lab5/src/components/screens/Home/Home.jsx
+++ b/lab5/src/components/screens/Home/Home.jsx
@ -0,0 +1,26 @@
+import { useContext, useEffect } from "react";
+import { ProductsContext } from './../../../contexts/productsContext';
+import Card from "./Card";
+
+function Home() {
+  const { fetchProducts, products } = useContext(ProductsContext);
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  return (
+    <>
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text-success font-weight-bold">Каталог</h1>
+      </div>
+      <div className="container">
+        <div className="row" id="catalog">
+          {products && products.map(product => <Card product={product} key={product.id} />)}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Home;
--- a/lab5/src/components/screens/Login/Login.jsx
+++ b/lab5/src/components/screens/Login/Login.jsx
@ -0,0 +1,60 @@
+import { useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { UserContext } from './../../../contexts/userContext';
+import { useForm } from "react-hook-form";
+
+function Login() {
+  const { authorization } = useContext(UserContext);
+  const navigate = useNavigate();
+  const { register, handleSubmit } = useForm();
+
+  async function onSubmit(data) {
+    try {
+      await authorization(data);
+      navigate("/");
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <section className="h-100">
+      <div className="mask d-flex align-items-center h-100 gradient-custom-3">
+        <div className="container h-100">
+          <div className="row d-flex justify-content-center align-items-center h-100">
+            <div className="col-12 col-md-9 col-lg-7 col-xl-6">
+              <div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
+                <div className="card-body p-5">
+                  <h2 className="text-success text-center mb-5">Войти</h2>
+
+                  <form onSubmit={handleSubmit(onSubmit)}>
+
+                    <div className="form-outline mb-4">
+                      <input type="email" id="form3Example3cg" className="form-control form-control-lg" {...register("email")} />
+                      <label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="password" id="form3Example4cg" className="form-control form-control-lg" {...register("password")} />
+                      <label className="form-label" htmlFor="form3Example4cg">Пароль</label>
+                    </div>
+
+                    <div className="d-flex justify-content-center">
+                      <input type="submit" value="Войти" className="btn" />
+                    </div>
+
+                    <p className="text-center text-muted mb-0">У вас нет аккаунта? <Link to="/registration"
+                      className="fw-bold text-body"><u>Регистрация</u></Link></p>
+                  </form>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Login;
--- a/lab5/src/components/screens/MakingAnOrder/MakingAnOrder.jsx
+++ b/lab5/src/components/screens/MakingAnOrder/MakingAnOrder.jsx
@ -0,0 +1,87 @@
+function MakingAnOrder() {
+  return (
+    <section className="h-100">
+      <div className="mask d-flex align-items-center h-100 gradient-custom-3">
+        <div className="container h-100">
+          <div className="row d-flex justify-content-center align-items-center h-100">
+            <div className="col-12 col-md-9 col-lg-7 col-xl-6">
+              <div className="card" style="border-radius: 15px; border-color:#7bca8c;">
+                <div className="card-body p-5">
+                  <h2 className="text-success text-center mb-5">Оформление заказа</h2>
+                  <form>
+                    <div className="form-outline mb-4">
+                      <input type="text" id="form3Example1cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example5cg">Номер телефона</label>
+                    </div>
+
+                    <label className="form-check-label" htmlFor="creditCard">Вариант получения</label>
+
+                    <div className="form-check mb-4">
+                      <input className="form-check-input" type="radio" name="deliveryMethod" id="selfPickup"
+                        defaultValue="selfPickup" />
+                      <label className="form-check-label" htmlFor="selfPickup">Самовывоз</label>
+                    </div>
+
+                    <div className="form-check mb-4">
+                      <input className="form-check-input" type="radio" name="deliveryMethod" id="delivery" defaultValue="delivery" />
+                      <label className="form-check-label" htmlFor="delivery">Доставка</label>
+                    </div>
+
+                    <div className="form-outline mb-4" id="deliveryAddress" style="display: none;">
+                      <input type="text" id="form3ExampleAddress" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3ExampleAddress">Ваш адрес доставки</label>
+                    </div>
+
+
+                    <div className="row mb-4">
+                      <div className="col">
+                        <div className="form-outline">
+                          <input type="text" id="formNameOnCard" className="form-control" />
+                          <label className="form-label" htmlFor="formNameOnCard">Имя держателя карты</label>
+                        </div>
+                      </div>
+                      <div className="col">
+                        <div className="form-outline">
+                          <input type="text" id="formCardNumber" className="form-control" />
+                          <label className="form-label" htmlFor="formCardNumber">Номер карты</label>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="row mb-4">
+                      <div className="col-3">
+                        <div className="form-outline">
+                          <input type="text" id="formExpiration" className="form-control" />
+                          <label className="form-label" htmlFor="formExpiration">Срок действия</label>
+                        </div>
+                      </div>
+                      <div className="col-3">
+                        <div className="form-outline">
+                          <input type="text" id="formCVV" className="form-control" />
+                          <label className="form-label" htmlFor="formCVV">CVV</label>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="d-flex justify-content-center">
+                      <button className="btn" style="margin-bottom: 20px;" type="button" id="saveButton">Оформить</button>
+                    </div>
+
+                  </form>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section >
+  );
+}
+
+export default MakingAnOrder;
--- a/lab5/src/components/screens/PageEdit/PageEdit.jsx
+++ b/lab5/src/components/screens/PageEdit/PageEdit.jsx
@ -0,0 +1,125 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { CategoriesContext } from './../../../contexts/categoriesContext';
+import { ProductsContext } from './../../../contexts/productsContext';
+
+function PageEdit() {
+  const navigate = useNavigate();
+
+  const [searchParams, _] = useSearchParams();
+  const id = +searchParams.get("id");
+
+  const isUpdatePage = !!id;
+
+  const { getProductById, createProduct, updateProduct } = useContext(ProductsContext);
+  const [product, setProduct] = useState(null);
+
+  const { categories, fetchCategories } = useContext(CategoriesContext);
+
+  const { register, handleSubmit, setValue, reset } = useForm();
+
+  const [file, setFile] = useState(null);
+  const previewPhotoRef = useRef(null);
+
+  useEffect(() => {
+    async function fetchProduct() {
+      const product = await getProductById(id);
+      setProduct(product);
+    }
+
+    if (!!id) fetchProduct();
+    fetchCategories();
+  }, [id]);
+
+  useEffect(() => {
+    if (!isUpdatePage || !product) {
+      reset();
+      return;
+    }
+
+    setValue("price", product.price);
+    setValue("categoryId", product.categoryId);
+    setValue("name", product.name);
+  }, [product]);
+
+  // /////
+  function getBase64Image(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+
+  async function handleFileInputChange(e) {
+    const ffile = await getBase64Image(e.target.files[0]);
+    previewPhotoRef.current.src = ffile;
+    setFile(ffile);
+  }
+
+  async function onFormSubmit(data) {
+    if (!file && !isUpdatePage) return alert("Вы не установили фотографию для товара!");
+
+    if (isUpdatePage) {
+      await updateProduct({
+        ...data,
+        id: product.id,
+        photo: (file || product.photo)
+      });
+      navigate("/admin");
+      return;
+    }
+
+    await createProduct({
+      ...data,
+      photo: file
+    });
+
+    navigate("/admin");
+  }
+  //////
+
+  return (
+    <div className="p-2">
+      <h1 className="text-success text-center font-weight-bold">{isUpdatePage ? "Обновление" : "Создание"} товара</h1>
+      <div className="text-center">
+        <img
+          id="image-preview"
+          src={isUpdatePage && product ? product.photo : "https://via.placeholder.com/200"}
+          ref={previewPhotoRef}
+          style={{ maxWidth: "200px", maxHeight: "200px" }}
+          className="rounded rounded-circle"
+          alt="placeholder"
+        />
+      </div>
+      <form id="items-form" className="needs-validation" noValidate onSubmit={handleSubmit(onFormSubmit)}>
+        <div className="mb-2">
+          <label className="form-label">Название</label>
+          <input className="form-control" type="text" required {...register("name")} />
+        </div>
+        <div className="mb-2">
+          <label htmlFor="item" className="form-label">Категории</label>
+          <select id="item" className="form-select" name="selected" required {...register("categoryId", { setValueAs: value => +value })}>
+            {categories && categories.map(category => <option value={category.id} key={category.id}>{category.name}</option>)}
+          </select>
+        </div>
+        <div className="mb-2">
+          <label className="form-label" htmlFor="price">Цена</label>
+          <input id="price" name="price" className="form-control" type="number" defaultValue="0.00" min="1000.00" step="0.50" {...register("price", { setValueAs: value => +value })}
+            required />
+        </div>
+        <div className="mb-2">
+          <label className="form-label" htmlFor="image">Изображение</label>
+          <input id="image" type="file" name="image" className="form-control" accept="image/*" onChange={handleFileInputChange} />
+        </div>
+        <Link to="/admin" className="btn">Назад</Link>
+        <button type="submit" className="btn">{isUpdatePage ? "Обновить" : "Создать"}</button>
+      </form>
+    </div>
+  );
+}
+
+export default PageEdit;
--- a/lab5/src/components/screens/PaymentAndDelivery/PaymentAndDelivery.jsx
+++ b/lab5/src/components/screens/PaymentAndDelivery/PaymentAndDelivery.jsx
@ -0,0 +1,20 @@
+function PaymentAndDelivery() {
+  return (
+    <>
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text-success font-weight-bold">Оплата и доставка</h1>
+      </div>
+      <h4 className="text-success" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "100px" }}>Способ оплаты</h4>
+      <p className="text-black" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "40px" }}>Картой онлайн</p>
+      <h2 className="text-success" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "70px" }}>Доставка</h2>
+      <p className="text-black" style={{ fontSize: "25px", marginLeft: "50px", marginTop: "40px" }}>Заказ на доставку
+        принимается не менее, чем за 3 часа</p>
+      <p className="text-black" style={{fontSize: "25px", marginLeft: "50px", marginTop: "50px"}}>Минимальная стоимость букета
+        на доставку - 1500 р</p>
+      <p className="text-black" style={{fontSize: "25px", marginLeft: "50px", marginTop: "50px"}}>Доставим ваш букет бесплатно
+        с 10:00 до 19:00</p>
+    </>
+  );
+}
+
+export default PaymentAndDelivery;
--- a/lab5/src/components/screens/PersonalAccount/PersonalAccount.jsx
+++ b/lab5/src/components/screens/PersonalAccount/PersonalAccount.jsx
@ -0,0 +1,60 @@
+import { Link } from "react-router-dom";
+
+function PersonalAccount() {
+  return (
+    <section className="h-100">
+      <div className="mask d-flex align-items-center h-100 gradient-custom-3">
+        <div className="container h-100">
+          <div className="row d-flex justify-content-center align-items-center h-100">
+            <div className="col-12 col-md-9 col-lg-7 col-xl-6">
+              <div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
+                <div className="card-body p-5">
+                  <h2 className="text-center text-success mb-5">Личный кабинет</h2>
+
+                  <form>
+
+                    <div className="form-outline mb-4">
+                      <input type="text" id="form3Example1cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="text" id="form3Example1cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example1cg">Ваша фамилия</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="email" id="form3Example3cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="date" id="form3Example4cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example4cg">Дата рождения</label>
+                    </div>
+
+                    <div className="form-outline mb-2">
+                      <input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
+                      <label className="form-label" htmlFor="form3Example5cg">Номер телефона</label>
+                    </div>
+
+                    <div className="d-flex justify-content-center">
+                      <button className="btn btn-outline-light" type="button" id="saveButton">Сохранить</button>
+                    </div>
+
+                    <div className="d-flex justify-content-center">
+                      <Link className="btn btn-outline-light" type="button" to="/">Выйти</Link>
+                    </div>
+
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default PersonalAccount;
--- a/lab5/src/components/screens/Registration/Registration.jsx
+++ b/lab5/src/components/screens/Registration/Registration.jsx
@ -0,0 +1,59 @@
+import { useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { UserContext } from "../../../contexts/userContext";
+import { useForm } from "react-hook-form";
+
+function Registration() {
+  const { reg } = useContext(UserContext);
+  const navigate = useNavigate();
+  const { register, handleSubmit } = useForm();
+
+  async function onSubmit(data) {
+    try {
+      await reg(data);
+      navigate("/");
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <section className="h-100">
+      <div className="mask d-flex align-items-center h-100 gradient-custom-3">
+        <div className="container h-100">
+          <div className="row d-flex justify-content-center align-items-center h-100">
+            <div className="col-12 col-md-9 col-lg-7 col-xl-6">
+              <div className="card" style={{ borderRadius: "15px", borderColor: "border-color:rgb(95, 206, 123)" }}>
+                <div className="card-body p-5">
+                  <h2 className="text-success text-center mb-5">Регистрация</h2>
+
+                  <form onSubmit={handleSubmit(onSubmit)}>
+                    <div className="form-outline mb-4">
+                      <input type="email" id="form3Example3cg" className="form-control form-control-lg" {...register("email")} />
+                      <label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
+                    </div>
+
+                    <div className="form-outline mb-4">
+                      <input type="password" id="form3Example4cg" className="form-control form-control-lg" {...register("email")} />
+                      <label className="form-label" htmlFor="form3Example4cg">Пароль</label>
+                    </div>
+
+                    <div className="d-flex justify-content-center">
+                      <input type="submit" value="Регистрация" className="btn" />
+                    </div>
+
+                    <p className="text-center text-muted mb-0">У вас уже есть учетная запись? <Link to="/login"
+                      className="fw-bold text-body"><u>Войдите здесь</u></Link></p>
+                  </form>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Registration;
--- a/lab5/src/components/screens/Search/OrderModal.jsx
+++ b/lab5/src/components/screens/Search/OrderModal.jsx
@ -0,0 +1,62 @@
+import { useContext, useEffect, useState } from "react";
+import { OrdersContext } from "../../../contexts/ordersContext";
+
+function OrderModal({ currentOrder }) {
+  // Достали функцию, которая позволяет получать продукты заказа по id заказа
+  const { getOrderProducts } = useContext(OrdersContext);
+  // Делаем состояние для таких продуктов
+  const [orderProducts, setOrderProducts] = useState(null);
+
+  useEffect(() => {
+    if (!currentOrder) return;
+
+    const func = async () => {
+      // Получили нужные продукты
+      const response = await getOrderProducts(currentOrder.id);
+      // Обновили состояние
+      setOrderProducts(response);
+    }
+
+    func();
+  }, [currentOrder]);
+
+  return (
+    <div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="modal-title fs-5" id="exampleModalLabel">Детали заказа</h1>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div className="modal-body">
+            <p><b>ID Заказа:</b> {currentOrder ? currentOrder.id : null}</p>
+            <p><b>Дата заказа:</b> {currentOrder ? new Date(currentOrder.date).toLocaleString('ru-RU') : null}</p>
+            <p><b>Товары в заказе:</b></p>
+            <table className="table table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">Название товара</th>
+                  <th scope="col">Фото</th>
+                  <th scope="col">Цена</th>
+                </tr>
+              </thead>
+              <tbody id="parent">
+                {orderProducts && orderProducts.map(op => {
+                  return (
+                    <tr key={op.id}>
+                      <td>{op.name}</td>
+                      <td><img src={op.photo} alt="" style={{ maxWidth: "100px", maxHeight: "100px" }} /></td>
+                      <td>{op.price}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderModal;
--- a/lab5/src/components/screens/Search/Search.jsx
+++ b/lab5/src/components/screens/Search/Search.jsx
@ -0,0 +1,39 @@
+import { useContext, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import Card from "../Home/Card";
+import { ProductsContext } from './../../../contexts/productsContext';
+
+function Search() {
+  const [searchParams, _] = useSearchParams();
+  const term = searchParams.get("term");
+
+  const { getProductsBySearchTerm } = useContext(ProductsContext);
+  const [productsByTerm, setProductsByTerm] = useState([]);
+
+  useEffect(() => {
+    async function func() {
+      const response = await getProductsBySearchTerm(term);
+      setProductsByTerm(response);
+    }
+
+    func();
+  }, [term]);
+
+  console.log(productsByTerm);
+
+
+  return (
+    <>
+      <div className="d-flex justify-content-center align-items-center">
+        <h1 className="text-success font-weight-bold">Поиск по запросу: {term}</h1>
+      </div>
+      <div className="container">
+        <div className="row" id="catalog">
+          {productsByTerm.length !== 0 ? productsByTerm.map(p => <Card product={p} key={p.id} />) : <p>Таких нет..</p>}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Search;
--- a/lab5/src/contexts/Contexts.jsx
+++ b/lab5/src/contexts/Contexts.jsx
@ -0,0 +1,26 @@
+import BasketProvider from './basketContext';
+import CategoriesProvider from "./categoriesContext";
+import FavouritesProvider from "./favouritesContext";
+import OrdersProvider from "./ordersContext";
+import ProductsProvider from "./productsContext";
+import UserProvider from "./userContext";
+
+const Contexts = ({ children }) => {
+  return (
+    <UserProvider>
+      <ProductsProvider>
+        <CategoriesProvider>
+          <BasketProvider>
+            <OrdersProvider>
+              <FavouritesProvider>
+                {children}
+              </FavouritesProvider>
+            </OrdersProvider>
+          </BasketProvider>
+        </CategoriesProvider>
+      </ProductsProvider>
+    </UserProvider>
+  );
+};
+
+export default Contexts;
--- a/lab5/src/contexts/basketContext.jsx
+++ b/lab5/src/contexts/basketContext.jsx
@ -0,0 +1,16 @@
+import { createContext } from "react";
+import { useBasket } from "../hooks/useBasket";
+
+export const BasketContext = createContext(null);
+
+const BasketProvider = ({ children }) => {
+  const data = useBasket();
+
+  return (
+    <BasketContext.Provider value={data}>
+      {children}
+    </BasketContext.Provider>
+  );
+};
+
+export default BasketProvider;
--- a/lab5/src/contexts/categoriesContext.jsx
+++ b/lab5/src/contexts/categoriesContext.jsx
@ -0,0 +1,17 @@
+import { createContext } from "react";
+import { useCategories } from "../hooks/useCategories";
+
+export const CategoriesContext = createContext(null);
+
+const CategoriesProvider = ({ children }) => {
+  const data = useCategories();
+
+  return (
+    <CategoriesContext.Provider value={data}>
+      {children}
+    </CategoriesContext.Provider>
+  );
+};
+
+
+export default CategoriesProvider;
--- a/lab5/src/contexts/favouritesContext.jsx
+++ b/lab5/src/contexts/favouritesContext.jsx
@ -0,0 +1,16 @@
+import { createContext } from "react";
+import { useFavourites } from "../hooks/useFavourites";
+
+export const FavouritesContext = createContext(null);
+
+const FavouritesProvider = ({ children }) => {
+  const data = useFavourites();
+
+  return (
+    <FavouritesContext.Provider value={data}>
+      {children}
+    </FavouritesContext.Provider>
+  );
+};
+
+export default FavouritesProvider;
--- a/lab5/src/contexts/ordersContext.jsx
+++ b/lab5/src/contexts/ordersContext.jsx
@ -0,0 +1,17 @@
+import { createContext } from "react";
+import { useOrders } from "../hooks/useOrders";
+
+export const OrdersContext = createContext(null);
+
+const OrdersProvider = ({ children }) => {
+  const data = useOrders();
+
+  return (
+    <OrdersContext.Provider value={data}>
+      {children}
+    </OrdersContext.Provider>
+  );
+}
+
+
+export default OrdersProvider;
--- a/lab5/src/contexts/productsContext.jsx
+++ b/lab5/src/contexts/productsContext.jsx
@ -0,0 +1,22 @@
+import { createContext } from "react";
+import { useProducts } from "../hooks/useProducts";
+
+// Наш контекст (грубо говоря ключ к нашим значениям)
+// Т.е. мы знаем, что в ProductsContext ничего кроме логики с продуктами
+// лежать не будет
+export const ProductsContext = createContext(null);
+
+// Штука, в которую мы оборачиваем весь сайт
+// чтобы получить данные в любом компоненте
+const ProductsProvider = ({ children }) => {
+  const productsData = useProducts();
+
+  return (
+    // В value прокидываем словарь с данными, которые мы получили из хука useProducts ( return {products, ...} )
+    <ProductsContext.Provider value={productsData}>
+      {children}
+    </ProductsContext.Provider>
+  );
+};
+
+export default ProductsProvider;
--- a/lab5/src/contexts/userContext.jsx
+++ b/lab5/src/contexts/userContext.jsx
@ -0,0 +1,16 @@
+import { createContext } from "react";
+import { useUser } from "../hooks/useUser";
+
+export const UserContext = createContext(null);
+
+const UserProvider = ({ children }) => {
+  const userData = useUser();
+
+  return (
+    <UserContext.Provider value={userData}>
+      {children}
+    </UserContext.Provider>
+  );
+}
+
+export default UserProvider;
--- a/lab5/src/hooks/useBasket.js
+++ b/lab5/src/hooks/useBasket.js
@ -0,0 +1,95 @@
+import { useContext, useState } from 'react';
+
+import { ProductsContext } from "../contexts/productsContext";
+import { UserContext } from "../contexts/userContext";
+import BasketService from "../services/BasketService";
+
+export function useBasket() {
+  const [basketId, setBasketId] = useState(null);
+  const [basketProducts, setBasketProducts] = useState(null);
+  const { id } = useContext(UserContext);
+  const { getProductById } = useContext(ProductsContext);
+
+
+  async function fetchBasketAndProducts() {
+    if (!id) return;
+
+    const bId = await BasketService.getBasketId(id);
+    setBasketId(bId);
+
+    if (!bId) return;
+
+    const bProducts = await BasketService.getBasketProducts(bId);
+    setBasketProducts(bProducts);
+  }
+
+  function isProductInBasket(productId) {
+    if (!basketProducts || basketProducts.length == 0) return false;
+
+    const flag = !!basketProducts.find(bp => bp.productId == productId);
+    return flag;
+  }
+
+  async function addProductToBasket(productId) {
+    try {
+      const data = { basketId, productId };
+      const response = await BasketService.addProductToBasket(data);
+
+      if (!basketProducts || basketProducts.length == 0) setBasketProducts([response]);
+      else setBasketProducts([...basketProducts, response]);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function deleteProductFromBasket(productId) {
+    if (!basketProducts || basketProducts.length == 0) return;
+
+    try {
+      if (!confirm("Вы точно хотите удалить товар из корзины?")) return;
+
+      const productToDelete = basketProducts.find(bp => bp.productId == productId);
+      await BasketService.deleteBasketProduct(productToDelete.id);
+      // Убираю из состояния продуктов корзины конкретный продукт
+      setBasketProducts(basketProducts.filter(bp => bp.productId !== productId));
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function getBasketProductsWithTotalPrice() {
+    if (!basketProducts || basketProducts.length == 0) return [];
+
+    const arr = [];
+    let total = 0;
+
+    for (let i = 0; i < basketProducts.length; i++) {
+      const product = await getProductById(basketProducts[i].productId);
+      arr.push(product);
+      total += product.price;
+    }
+
+    return [arr, total];
+  }
+
+  async function clearBasketProducts() {
+    if (!basketProducts || basketProducts.length == 0) return;
+
+    for (let i = 0; i < basketProducts.length; i++) {
+      await BasketService.deleteBasketProduct(basketProducts[i].id);
+    }
+
+    setBasketProducts([]);
+  }
+
+  return {
+    basketId,
+    basketProducts,
+    fetchBasketAndProducts,
+    isProductInBasket,
+    addProductToBasket,
+    deleteProductFromBasket,
+    getBasketProductsWithTotalPrice,
+    clearBasketProducts
+  };
+}
--- a/lab5/src/hooks/useCategories.js
+++ b/lab5/src/hooks/useCategories.js
@ -0,0 +1,45 @@
+import { useState, } from 'react';
+
+import CategoryService from "../services/CategoryService";
+
+export function useCategories() {
+  const [categories, setCategories] = useState(null);
+
+
+  async function fetchCategories() {
+    try {
+      const response = await CategoryService.getAll();
+      setCategories(response);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function getCategoryById(id) {
+    try {
+      if (!categories || categories.length == 0) {
+        const response = await CategoryService.getById(id);
+        setCategories([response]);
+        return response;
+      }
+
+      const existingCategory = categories.find(category => category.id == id);
+      // Если он есть, то мы его возвращаем
+      if (existingCategory) return existingCategory;
+
+      // 3 случай. Продукта не оказалось в данных, к-ые уже загружены
+      const response = await CategoryService.getById(id);
+      setCategories([...categories, response]);
+      return response;
+    } catch (error) {
+      console.log(error);
+      return {};
+    }
+  }
+
+  return {
+    categories,
+    fetchCategories,
+    getCategoryById
+  };
+}
--- a/lab5/src/hooks/useFavourites.js
+++ b/lab5/src/hooks/useFavourites.js
@ -0,0 +1,60 @@
+import { useContext, useState } from 'react';
+
+import { UserContext } from "../contexts/userContext";
+import FavouritesService from "../services/FavouritesService";
+
+export function useFavourites() {
+  const [favourites, setFavourites] = useState(null);
+  const { id } = useContext(UserContext);
+
+  // Функции
+  async function fetchFavourites() {
+    if (favourites || !id) return;
+
+    try {
+      const response = await FavouritesService.getAll(id);
+      setFavourites(response);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  function isProductInFavourites(productId) {
+    if (!favourites || favourites.length === 0) return false;
+    const flag = !!favourites.find(favourite => favourite.productId === productId);
+    return flag;
+  }
+
+  async function addProductToFavourites(productId) {
+    try {
+      const data = { userId: id, productId };
+      const response = await FavouritesService.addProductToFavourites(data);
+
+      if (!favourites || favourites.length === 0) setFavourites([response]);
+      else setFavourites([...favourites, response]);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function deleteProductFromFavourites(productId) {
+    if (!favourites || favourites.length === 0) return;
+
+    try {
+      const productToDelete = favourites.find(favourite => favourite.productId === productId);
+      await FavouritesService.deleteFavouriteProduct(productToDelete.id);
+      setFavourites(favourites.filter(favourite => favourite.productId !== productId));
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  // Функции END
+
+  return {
+    favourites,
+    fetchFavourites,
+    isProductInFavourites,
+    addProductToFavourites,
+    deleteProductFromFavourites,
+  };
+}
--- a/lab5/src/hooks/useOrders.js
+++ b/lab5/src/hooks/useOrders.js
@ -0,0 +1,63 @@
+import { useContext, useState, } from 'react';
+
+import { BasketContext } from "../contexts/basketContext";
+import { ProductsContext } from "../contexts/productsContext";
+import { UserContext } from "../contexts/userContext";
+import OrderService from "../services/OrderService";
+import OrdersProductService from "../services/OrdersProductService";
+
+export function useOrders() {
+  const [orders, setOrders] = useState(null);
+  const { id } = useContext(UserContext);
+  const { clearBasketProducts } = useContext(BasketContext);
+  const { getProductById } = useContext(ProductsContext);
+
+
+  async function fetchOrders() {
+    if (!id) return;
+
+    try {
+      const response = await OrderService.getAll(id);
+      setOrders(response);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function createOrder(data, productsIds) {
+    const response = await OrderService.create({ ...data, userId: id });
+
+    const orderId = response.id;
+
+    for (let i = 0; i < productsIds.length; i++) {
+      await OrdersProductService.create(orderId, productsIds[i]);
+    }
+
+    console.log(orders, response);
+
+    setOrders([...(orders || []), response]);
+    await clearBasketProducts();
+    return orderId;
+  }
+
+  async function getOrderProducts(orderId) {
+    const response = await OrdersProductService.getByOrderId(orderId);
+    console.log("response:", response);
+    const products = [];
+
+    for (let index = 0; index < response.length; index++) {
+      const product = await getProductById(response[index].productId);
+      products.push(product);
+    }
+
+    return products;
+  }
+
+
+  return {
+    orders,
+    createOrder,
+    fetchOrders,
+    getOrderProducts
+  };
+}
--- a/lab5/src/hooks/useProducts.js
+++ b/lab5/src/hooks/useProducts.js
@ -0,0 +1,84 @@
+import { useState } from 'react';
+
+import ProductService from "../services/ProductService";
+
+export function useProducts() {
+  // State - состояния (от англ.) (= переменные)
+  const [products, setProducts] = useState(null);
+
+  async function fetchProducts() {
+    try {
+      const response = await ProductService.getAll();
+      setProducts(response);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function getProductById(id) {
+    try {
+      // 1 случай. Продуктов вообще нет
+      // !false = true
+      if (!products || products.length == 0) {
+        const response = await ProductService.getById(id);
+        // Создали массив продуктов потому раньше его либо не было,
+        // либо он был пустой
+        // и загрузили туда продукт
+        setProducts([response]);
+        return response;
+      }
+
+      // 2 случай. Продукты уже загружены, но не факт, что есть нужный нам продукт
+      const existingProduct = products.find(product => product.id == id);
+      // Если он есть, то мы его возвращаем
+      if (existingProduct) return existingProduct;
+
+      // 3 случай. Продукта не оказалось в данных, к-ые уже загружены
+      const response = await ProductService.getById(id);
+      setProducts([...products, response]);
+      return response;
+    } catch (error) {
+      console.log(error);
+      return {};
+    }
+  }
+
+  async function deleteProduct(id) {
+    if (!confirm("Вы действительно хотите удалить товар?")) return;
+
+    await ProductService.delete(id);
+    setProducts(products.filter(p => p.id !== id));
+  }
+
+  async function createProduct(data) {
+    const response = await ProductService.create(data);
+    setProducts([...(products || []), response]);
+  }
+
+  async function updateProduct(data) {
+    const response = await ProductService.update(data);
+    const prods = products.map(p => {
+      if (p.id == response.id) return response;
+      return p;
+    });
+
+    setProducts(prods);
+  }
+
+  async function getProductsBySearchTerm(searchTerm) {
+    if (searchTerm === "" || !products || products.length === 0) return [];
+
+    return await ProductService.getBySearchTerm(searchTerm);
+  }
+
+  // Возвращаем словарь с состоянием и нужными функциями
+  return {
+    products,
+    fetchProducts,
+    getProductById,
+    deleteProduct,
+    createProduct,
+    updateProduct,
+    getProductsBySearchTerm
+  };
+}
--- a/lab5/src/hooks/useUser.js
+++ b/lab5/src/hooks/useUser.js
@ -0,0 +1,55 @@
+import { useState, } from 'react';
+import UserService from "../services/UserService";
+import BasketService from "../services/BasketService";
+
+export function useUser() {
+  const [user, setUser] = useState(null);
+
+  async function authorization(data) {
+    try {
+      const response = await UserService.login(data);
+      setUser(response);
+      localStorage.setItem("user", JSON.stringify(response));
+    } catch (error) {
+      throw new Error(error);
+    }
+  }
+
+  async function reg(data) {
+    try {
+      const response = await UserService.registration({...data, "role": "user"});
+      await BasketService.createBasket(response.id);
+      setUser(response);
+      localStorage.setItem("user", JSON.stringify(response));
+    } catch (error) {
+      throw new Error(error);
+    }
+  }
+
+  function logout() {
+    setUser(null);
+    localStorage.removeItem("user");
+  }
+
+  function checkIsAuth() {
+    if (user) {
+      return;
+    }
+
+    const uuser = localStorage.getItem('user');
+    if (uuser) {
+      const t = JSON.parse(uuser);
+      setUser(t);
+    }
+  }
+
+  return {
+    id: user ? user.id : null,
+    isAdmin: Boolean(user && user.role == "admin"),
+    isAuth: user && user.id,
+    authorization,
+    reg,
+    logout,
+    checkIsAuth
+  };
+}
--- a/lab5/src/main.jsx
+++ b/lab5/src/main.jsx
@ -0,0 +1,15 @@
+// Гайд: как сдать лабу
+// 0, Открываем консоль
+// 1. npm i
+// 2. npm run dev (CTRL + C для остановки)
+// 3. Когда попросят линтер - npm run lint
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/lab5/src/services/BasketService.js
+++ b/lab5/src/services/BasketService.js
@ -0,0 +1,40 @@
+import $axios from "../axios";
+
+class BasketService {
+  #basketUrl = "/baskets";
+  #basketProductUrl = "/basket_products";
+
+  createBasket = async (userId) => {
+    await $axios.post(`${this.#basketUrl}`, { userId });
+  }
+
+  getBasketId = async (userId) => {
+    const response = await $axios.get(`${this.#basketUrl}?userId=${userId}`);
+    if (response.data.length == 0) return null;
+    return response.data[0].id;
+  }
+
+  getBasketProducts = async (basketId) => {
+    const response = await $axios.get(`${this.#basketProductUrl}?basketId=${basketId}`);
+    return response.data;
+  }
+
+  addProductToBasket = async (data) => {
+    try {
+      const response = await $axios.post(this.#basketProductUrl, data);
+      return response.data;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  deleteBasketProduct = async (id) => {
+    try {
+      await $axios.delete(`${this.#basketProductUrl}/${id}`);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}
+
+export default new BasketService();
--- a/lab5/src/services/CategoryService.js
+++ b/lab5/src/services/CategoryService.js
@ -0,0 +1,17 @@
+import $axios from '../axios';
+
+class CategoryService {
+  #path = "/categories";
+
+  getAll = async () => {
+    const response = await $axios.get(this.#path);
+    return response.data;
+  }
+
+  getById = async (id) => {
+    const response = await $axios.get(`${this.#path}/${id}`);
+    return response.data;
+  }
+}
+
+export default new CategoryService();
--- a/lab5/src/services/FavouritesService.js
+++ b/lab5/src/services/FavouritesService.js
@ -0,0 +1,29 @@
+import $axios from '../axios';
+
+class FavouritesService {
+  #path = "/favourites";
+
+  getAll = async (userId) => {
+    const response = await $axios.get(`${this.#path}?userId=${userId}`);
+    return response.data;
+  }
+
+  addProductToFavourites = async (data) => {
+    try {
+      const response = await $axios.post(this.#path, data);
+      return response.data;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  deleteFavouriteProduct = async (id) => {
+    try {
+      await $axios.delete(`${this.#path}/${id}`);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}
+
+export default new FavouritesService();
--- a/lab5/src/services/OrderService.js
+++ b/lab5/src/services/OrderService.js
@ -0,0 +1,17 @@
+import $axios from "../axios";
+
+class OrderService {
+  url = "/orders";
+
+  getAll = async (userId) => {
+    const response = await $axios.get(`${this.url}?userId=${userId}`);
+    return response.data;
+  }
+
+  create = async (data) => {
+    const response = await $axios.post(this.url, data);
+    return response.data;
+  }
+}
+
+export default new OrderService();
--- a/lab5/src/services/OrdersProductService.js
+++ b/lab5/src/services/OrdersProductService.js
@ -0,0 +1,16 @@
+import $axios from "../axios";
+
+class OrdersProductService {
+  url = "/order_products";
+
+  create = async (orderId, productId) => {
+    await $axios.post(this.url, { orderId, productId });
+  }
+
+  getByOrderId = async (orderId) => {
+    const response = await $axios.get(`${this.url}?orderId=${orderId}`);
+    return response.data;
+  }
+}
+
+export default new OrdersProductService();
--- a/lab5/src/services/ProductService.js
+++ b/lab5/src/services/ProductService.js
@ -0,0 +1,36 @@
+import $axios from '../axios';
+
+class ProductService {
+  #path = "/products";
+
+  getAll = async () => {
+    const response = await $axios.get(`${this.#path}?_limit=10`);
+    return response.data;
+  }
+
+  getById = async (id) => {
+    const response = await $axios.get(`${this.#path}/${id}`);
+    return response.data;
+  }
+
+  delete = async (id) => {
+    await $axios.delete(`${this.#path}/${id}`);
+  }
+
+  create = async (data) => {
+    const response = await $axios.post(this.#path, data);
+    return response.data;
+  }
+
+  update = async (data) => {
+    const response = await $axios.put(`${this.#path}/${data.id}`, data);
+    return response.data;
+  }
+
+  getBySearchTerm = async (term) => {
+    const response = await $axios.get(`${this.#path}?name_like=${term}`);
+    return response.data;
+  }
+}
+
+export default new ProductService();
--- a/lab5/src/services/UserService.js
+++ b/lab5/src/services/UserService.js
@ -0,0 +1,20 @@
+import $axios from "../axios";
+
+class UserService {
+  url = "/users";
+
+  registration = async (data) => {
+    const response = await $axios.post(this.url, data);
+    const user = response.data;
+    return user;
+  }
+
+  login = async (data) => {
+    const response = await $axios.get(`${this.url}?email=${data.email}`);
+    if (response.data.length == 0) throw new Error("User not found");
+
+    return response.data[0];
+  }
+}
+
+export default new UserService();
--- a/lab5/src/types/CategoryType.js
+++ b/lab5/src/types/CategoryType.js
@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const CategoryType = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+});
--- a/lab5/src/types/ProductType.js
+++ b/lab5/src/types/ProductType.js
@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export const ProductType = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+  photo: PropTypes.string.isRequired,
+  categoryId: PropTypes.number.isRequired,
+});
--- a/lab5/src/variables/variables.js
+++ b/lab5/src/variables/variables.js
@ -0,0 +1 @@
+export const serverPath = "http://localhost:8081";
--- a/lab5/vite.config.js
+++ b/lab5/vite.config.js
@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+});
--- a/отчеты/5
+++ b/отчеты/5
				`@ -0,0 +1 @@`
				`export const serverPath = "http://localhost:8081";`