Готовая лабораторная работа 5 с отчётом

2024-01-11 00:05:08 +04:00 · 2024-01-11 00:05:08 +04:00 · 4e554ba422
commit 4e554ba422
parent c489f9b4ed
83 changed files with 465 additions and 8388 deletions
--- a/Lab5/.eslintrc.cjs
+++ b/Lab5/.eslintrc.cjs
@ -1,24 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'airbnb-base',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    'indent': 'off',
-    'no-console': 'off',
-    'arrow-body-style': 'off',
-    'implicit-arrow-linebreak': 'off',
-  },
-}
--- a/Lab5/.gitignore
+++ b/Lab5/.gitignore
@ -1,24 +0,0 @@
-# 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/.vscode/cssconfig.json
+++ b/Lab5/.vscode/cssconfig.json
@ -0,0 +1,5 @@
+{
+    "globalCssFiles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.css"
+    ]
+}
--- a/Lab5/.vscode/launch.json
+++ b/Lab5/.vscode/launch.json
@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Edge",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/Lab5/README.md
+++ b/Lab5/README.md
@ -1,47 +0,0 @@
-### Окружение:
- [nodejs 20 LTS latest](https://nodejs.org/en/download/);
- [VSCode](https://code.visualstudio.com/download);
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) плагин для VSCode;
- [CSS Class Intellisense](https://marketplace.visualstudio.com/items?itemName=Tarrow.css-class-intellisense) плагин для автодополнения CSS-классов в HTML;
- для отладки необходимы бразузеры Chrome или Edge.
-
-Настройки плагина CSS Class Intellisense находятся в файле ./vscode/cssconfig.json
-
-### Команды
-
-#### Создание пустого проекта:
-
-```commandline
-npm create vite@latest ./ -- --template react 
-```
-
-#### Установка зависимостей:
-
-```commandline
-npm install
-```
-
-#### Запуск проекта в режиме разработки (development):
-
-```commandline
-npm run dev
-```
-
-#### Запуск проекта в продуктовом режиме (production):
-
-```commandline
-npm run prod
-```
-
-### Полезные ссылки
-
-1. Updating Objects in State - https://react.dev/learn/updating-objects-in-state
-2. Sharing State Between Components - https://react.dev/learn/sharing-state-between-components
-3. React Hot Toast - https://react-hot-toast.com
-4. Axios - https://axios-http.com
-5. Axios & Error handling like a boss - https://dev.to/mperon/axios-error-handling-like-a-boss-333d
-6. Separation of Concerns in React –How to Use Container and Presentational Components - https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/
-7. Separation of concerns in React and React Native - https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7
-8. React Bootstrap - https://react-bootstrap.netlify.app
-9. React Bootstrap Icons - https://github.com/ismamz/react-bootstrap-icons
-10. JSON Server - https://www.npmjs.com/package/json-server
--- a/Lab5/data.json
+++ b/Lab5/data.json
--- a/Lab5/index.html
+++ b/Lab5/index.html
@ -1,15 +0,0 @@
-<html lang="ru">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/src/assets/free-icon-home.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>My Website</title>
-</head>
-
-<body>
-  <div id="root" class="h-100 d-flex flex-column"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
-</html>
--- a/Lab5/jsconfig.json
+++ b/Lab5/jsconfig.json
@ -1,15 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "target": "ES2020",
-        "jsx": "react",
-        "strictNullChecks": true,
-        "strictFunctionTypes": true,
-        "sourceMap": true
-    },
-    "exclude": [
-        "node_modules",
-        "**/node_modules/*"
-    ]
-}
--- a/Lab5/json-server.json
+++ b/Lab5/json-server.json
@ -1,5 +0,0 @@
-{
-    "static": "./node_modules/json-server/public",
-    "port": 8081,
-    "watch": "true"
-}
--- a/Lab5/package-lock.json
+++ b/Lab5/package-lock.json
--- a/Lab5/package.json
+++ b/Lab5/package.json
@ -1,38 +0,0 @@
-{
-  "name": "lec4",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "rest": "json-server data.json",
-    "vite": "vite",
-    "dev": "npm-run-all --parallel rest vite",
-    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
-    "react-hot-toast": "^2.4.1",
-    "axios": "^1.6.1",
-    "bootstrap": "^5.3.2",
-    "react-bootstrap": "^2.9.1",
-    "react-bootstrap-icons": "^1.10.3",
-    "prop-types": "^15.8.1"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.15",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "json-server": "^0.17.4",
-    "npm-run-all": "^4.1.5",
-    "vite": "^4.4.5"
-  }
-}
--- a/Lab5/src/App.jsx
+++ b/Lab5/src/App.jsx
@ -4,7 +4,7 @@ import { Toaster } from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
 import { CartProvider } from './components/cart/CartContext.jsx';
 import { AdvertProvider } from './components/advert/CartAdvertContext.jsx';
-import { UserProvider } from './components/login/users/UserContext.jsx';
+import { UserProvider } from './components/users/UserContext.jsx';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';

--- a/Lab5/src/components/advert/CartAdvert.css
+++ b/Lab5/src/components/advert/CartAdvert.css
@ -1,240 +0,0 @@
-.cartadvert-image {
-    height: 500px;
-}
-
-.card{
-    padding:0 !important;
-}
-
-.carousel{
-    padding:0 !important;
-}
-
-.cart-item {
-    height: auto;
-}
-
-.cart-text{
-    color: White;
-    font-size: 32px;
-}
-
-.textlinkcart{
-    color: white;
-}
-
-.textus5{
-    color: Black;
-    font-size: 42px;
-}
-
-.textus4{
-    color: Black;
-    font-size: 38px;
-}
-
-.textus3{
-    color: Black;
-    font-size: 32px;
-}
-
-.textus33{
-    color: Black;
-    font-size: 24px;
-}
-
-@media(max-width: 1200px) {
-    .textus5{
-        color: Black;
-        font-size: 38px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 34px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 28px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 20px;
-    }
-}
-
-@media(max-width: 900px) {
-    .textus5{
-        color: Black;
-        font-size: 32px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 30px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 24px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 16px;
-    }
-}
-
-
-@media(max-width: 700px) {
-    .cartadvert-image {
-        height: 420px;
-    }
-
-    .textus5{
-        color: Black;
-        font-size: 26px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 22px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 20px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 14px;
-    }
-}
-
-
-@media(max-width: 600px) {
-    .textus5{
-        color: Black;
-        font-size: 20px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 18px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 14px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 14px;
-    }
-}
-
-
-@media(max-width: 550px) {
-    .cartadvert-image {
-        height: 380px;
-    }
-
-    .textus5{
-        color: Black;
-        font-size: 20px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 18px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 14px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 14px;
-    }
-}
-
-@media(max-width: 480px) {
-    .cartadvert-image {
-        height: 320px;
-    }
-
-    .buttord1{
-        height: 40px;
-        font-size: 12px;
-    }
-
-    .textus5{
-        color: Black;
-        font-size: 16px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 15px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 12px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 12px;
-    }
-}
-
-@media(max-width: 384px) {
-    .buttback{
-        width: 80px;
-        height: 60px;
-        font-size: 10px;
-    }
-
-    .cartadvert-image {
-        height: 240px;
-    }
-
-    .textus5{
-        color: Black;
-        font-size: 12px;
-    }
-    
-    .textus4{
-        color: Black;
-        font-size: 10px;
-    }
-    
-    .textus3{
-        color: Black;
-        font-size: 8px;
-    }
-    
-    .textus33{
-        color: Black;
-        font-size: 8px;
-    }
-}
-
-@media(max-width: 320px) {
-    .cartadvert-image {
-        height: 160px;
-    }
-}
-
-@media(max-width:290px) {
-    .cartadvert-image{
-        display: none;;
-    }
-}
--- a/Lab5/src/components/advert/CartAdvert.jsx
+++ b/Lab5/src/components/advert/CartAdvert.jsx
@ -1,61 +0,0 @@
-import { Button, Card } from 'react-bootstrap';
-import { Link, useNavigate } from 'react-router-dom';
-import { XLg } from 'react-bootstrap-icons';
-import imgPlaceholder from '../../assets/200.png';
-import './CartAdvert.css';
-import useCart from './CartAdvertHook';
-
-const CartAdvert = () => {
-    const {
-        cartAdvert,
-        clearAdvertCart,
-    } = useCart();
-
-    const ForwardGoOrder = useNavigate();
-
-    const GoOrder = () => {
-        ForwardGoOrder('/pageOrder');
-    };
-
-    const GoBack = () => {
-        clearAdvertCart();
-        ForwardGoOrder('/pageMyBulletin');
-    };
-
-    return (
-        <div className='d-flex flex-column align-items-center'>
-            <div className='mb-2 col-12 col-md-8 col-lg-6 d-flex align-items-center'>
-                <strong className='flex-fill col-3 cart-text'> Объявление </strong>
-
-                <Button className='w-25 buttback' variant='danger' onClick={() => GoBack() } type='submit'>
-                    <XLg /> <Link to="/pageMyBulletin" className='textlinkcart'> Вернуться назад </Link>
-                </Button>
-            </div>
-            {
-                cartAdvert.map((cartItem) =>
-                    <Card key={cartItem.id} className='mb-2 w-100'>
-                        <Card.Body className='p-2 d-flex'>
-                            <div className='cart-item flex-fill'>
-                                <img className='cartadvert-image w-100' src={cartItem.image || imgPlaceholder} alt="Cart Image" />
-                            </div>
-
-                            <div className='cart-item mt-2 mt-sm-0 d-flex flex-column align-items-center'>
-                                <div className='col ps-4 pe-4'>
-                                <p className='textus4'> {cartItem.type.name} </p>
-                                    <p className='mt-2 textus5'> Описание объявления</p>
-                                    <p className='textus3'> {cartItem.description} </p>
-                                    <p className='textus3'> Цена:  {cartItem.price} рублей</p>
-                                    <p className='textus3'> Номер телефона: +7(900)-785-84-56 </p>
-                                    <Button className='buttord1' onSubmit={GoOrder} variant="success" onClick={() => clearAdvertCart()} type="submit">
-                                        <Link to="/OrderPage" className='textlinkcart'> Оформить заказ </Link>
-                                    </Button>
-                                </div>
-                            </div>
-                        </Card.Body>
-                    </Card>)
-            }
-        </div>
-    );
-};
-
-export default CartAdvert;
--- a/Lab5/src/components/advert/CartAdvertContext.jsx
+++ b/Lab5/src/components/advert/CartAdvertContext.jsx
@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import {
-    createContext,
-    useEffect,
-    useReducer,
-} from 'react';
-import { cartReducer, loadCart, saveCart } from './CartAdvertReducer';
-
-const AdvertContext = createContext(null);
-
-export const AdvertProvider = ({ children }) => {
-    const [cartAdvert, dispatch] = useReducer(cartReducer, [], loadCart);
-
-    useEffect(() => {
-        saveCart(cartAdvert || []);
-    }, [cartAdvert]);
-
-    return (
-        <AdvertContext.Provider value={{ cartAdvert, dispatch }}>
-            {children}
-        </AdvertContext.Provider>
-    );
-};
-
-AdvertProvider.propTypes = {
-    children: PropTypes.node,
-};
-
-export default AdvertContext;
--- a/Lab5/src/components/advert/CartAdvertHook.js
+++ b/Lab5/src/components/advert/CartAdvertHook.js
@ -1,26 +0,0 @@
-import { useContext } from 'react';
-import CartContext from './CartAdvertContext.jsx';
-import { cartAdd, cartClear, cartRemove } from './CartAdvertReducer';
-
-const useAdvertCart = () => {
-    const { cartAdvert, dispatch } = useContext(CartContext);
-
-    const cartSum = () => {
-        return parseFloat(
-            cartAdvert?.reduce((sum, cartItem) => {
-                return sum + (cartItem.price * cartItem.count);
-            }, 0)
-            ?? 0,
-        ).toFixed(2);
-    };
-
-    return {
-        cartAdvert,
-        getCartSum: () => cartSum(),
-        addToAdvertCart: (item) => dispatch(cartAdd(item)),
-        removeAdvertFromCart: (item) => dispatch(cartRemove(item)),
-        clearAdvertCart: () => dispatch(cartClear()),
-    };
-};
-
-export default useAdvertCart;
--- a/Lab5/src/components/advert/CartAdvertReducer.js
+++ b/Lab5/src/components/advert/CartAdvertReducer.js
@ -1,71 +0,0 @@
-const setCartCount = (cartAdvert, item) => {
-    return cartAdvert.map((cartItem) => {
-        if (cartItem.id === item.id) {
-            return { ...cartItem, count: cartItem.count };
-        }
-        return cartItem;
-    });
-};
-
-const addToCart = (cartAdvert, item) => {
-    const existsItem = cartAdvert.find((cartItem) => cartItem.id === item.id);
-    if (existsItem !== undefined) {
-        return setCartCount(cartAdvert, item, 1);
-    }
-    return [...cartAdvert, { ...item, count: 1 }];
-};
-
-const removeFromCart = (cartAdvert, item) => {
-    const existsItem = cartAdvert.find((cartItem) => cartItem.id === item.id);
-    if (existsItem !== undefined && existsItem.count > 1) {
-        return setCartCount(cartAdvert, item, -1);
-    }
-    return cartAdvert.filter((cartItem) => cartItem.id !== item.id);
-};
-
-const CART_KEY = 'localAdvertCart';
-const CART_ADD = 'cart/add';
-const CART_REMOVE = 'cart/remove';
-const CART_CLEAR = 'cart/clear';
-
-export const saveCart = (cartAdvert) => {
-    localStorage.setItem(CART_KEY, JSON.stringify(cartAdvert));
-};
-
-export const loadCart = (initialValue = []) => {
-    const cartDataNew = localStorage.getItem(CART_KEY);
-    if (cartDataNew) {
-        return JSON.parse(cartDataNew);
-    }
-    return initialValue;
-};
-
-export const cartReducer = (cartAdvert, action) => {
-    const { item } = action;
-    switch (action.type) {
-        case CART_ADD: {
-            return addToCart(cartAdvert, item);
-        }
-        case CART_REMOVE: {
-            return removeFromCart(cartAdvert, item);
-        }
-        case CART_CLEAR: {
-            return [];
-        }
-        default: {
-            throw Error(`Unknown action: ${action.type}`);
-        }
-    }
-};
-
-export const cartAdd = (item) => ({
-    type: CART_ADD, item,
-});
-
-export const cartRemove = (item) => ({
-    type: CART_REMOVE, item,
-});
-
-export const cartClear = () => ({
-    type: CART_CLEAR,
-});
--- a/Lab5/src/components/api/ApiService.js
+++ b/Lab5/src/components/api/ApiService.js
@ -28,6 +28,18 @@ class ApiService {
    async delete(id) {
        return ApiClient.delete(`${this.url}/${id}`);
    }
+
+    async getByHandle(name) {
+        return ApiClient.get(`${this.url}?name=${name}`);
+    }
+
+    async getByEmail(email) {
+        return ApiClient.get(`${this.url}?email=${email}`);
+    }
+
+    async getAllForUser(userId) {
+        return ApiClient.get(`${this.url}?userId=${userId}`);
+    }
 }

 export default ApiService;
--- a/Lab5/src/components/banner/Banner.css
+++ b/Lab5/src/components/banner/Banner.css
@ -1,25 +0,0 @@
-#banner {
-    margin: 2px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
-
-#banner img {
-    border: 1px solid #3c3c3f;
-    border-radius: 5px;
-}
-
-#banner img.banner-show {
-    width: 100%;
-    opacity: 1;
-    transition: opacity 1s, visibility 0s;
-}
-
-#banner img.banner-hide {
-    height: 0;
-    width: 0;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 1s, visibility 0s 1s;
-}
--- a/Lab5/src/components/banner/Banner.jsx
+++ b/Lab5/src/components/banner/Banner.jsx
@ -1,17 +0,0 @@
-import './Banner.css';
-import useBannerHook from './BannerHook';
-
-const Banner = () => {
-    const { banners, getBannerClass } = useBannerHook();
-
-    return (
-        <div id="banner" >
-            {
-                banners.map((banner, index) =>
-                    <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
-            }
-        </div >
-    );
-};
-
-export default Banner;
--- a/Lab5/src/components/banner/BannerHook.js
+++ b/Lab5/src/components/banner/BannerHook.js
@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-import banner1 from '../../assets/Image3.png';
-import banner2 from '../../assets/Image4.png';
-import banner3 from '../../assets/Image5.png';
-import './Banner.css';
-
-const useBannerHook = () => {
-    const [currentBanner, setCurrentBanner] = useState(0);
-    const banners = [banner1, banner2, banner3];
-
-    const getBannerClass = (index) => {
-        return currentBanner === index ? 'banner-show' : 'banner-hide';
-    };
-
-    useEffect(() => {
-        const bannerInterval = setInterval(
-            () => {
-                console.info('Banner changed');
-                let current = currentBanner + 1;
-                if (current === banners.length) {
-                    current = 0;
-                }
-                setCurrentBanner(current);
-            },
-            5000,
-        );
-        return () => clearInterval(bannerInterval);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return {
-        banners,
-        getBannerClass,
-    };
-};
-
-export default useBannerHook;
--- a/Lab5/src/components/cart/Cart.jsx
+++ b/Lab5/src/components/cart/Cart.jsx
@ -1,7 +1,6 @@
 import { Button, ButtonGroup, Card } from 'react-bootstrap';
 import { XLg } from 'react-bootstrap-icons';
 import imgPlaceholder from '../../assets/200.png';
-import { GetUserId } from '../login/users/UserReducer';
 import useCart from './CartHook';
 import './Cart.css';

@ -12,9 +11,6 @@ const Cart = () => {
        clearCart,
    } = useCart();

-    const id = GetUserId();
-    console.log(id);
-
    return (
        <div className='d-flex flex-column align-items-center'>
            <div className='mb-2 col-12 col-md-8 col-lg-6 d-flex align-items-center'>
--- a/Lab5/src/components/favourites/hooks/AddLinesHook.js
+++ b/Lab5/src/components/favourites/hooks/AddLinesHook.js
@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react';
-import FavouritesLinesApi from '../../types/service/FavoritesApi';
-
-const useAddLines = (typeFilter) => {
-    const [linesRefresh, setLinesRefresh] = useState(false);
-    const [lines, setLines] = useState([]);
-    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
-
-    const getLinesfavour = async () => {
-        let expand = '?_expand=type';
-        if (typeFilter) {
-            expand = `${expand}&typeId=${typeFilter}`;
-        }
-        const data = await FavouritesLinesApi.getAll(expand);
-        setLines(data ?? []);
-    };
-
-    useEffect(() => {
-        getLinesfavour();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [linesRefresh, typeFilter]);
-
-    return {
-        lines,
-        handleLinesChange,
-    };
-};
-
-export default useAddLines;
--- a/Lab5/src/components/favourites/hooks/LinesItemFavorites.js
+++ b/Lab5/src/components/favourites/hooks/LinesItemFavorites.js
@ -1,35 +0,0 @@
-import { useEffect, useState } from 'react';
-import LinesApiService from '../../types/service/FavoritesApi';
-
-const useLinesFavorites = (id) => {
-    const emptyItem = {
-        id: '',
-        typeId: '',
-        price: '0',
-        count: '1',
-        description: '',
-        image: '',
-    };
-    const [item, setItem] = useState({ ...emptyItem });
-
-    const getItem = async (itemId = undefined) => {
-        if (itemId && itemId > 0) {
-            const data = await LinesApiService.get(itemId);
-            setItem(data);
-        } else {
-            setItem({ ...emptyItem });
-        }
-    };
-
-    useEffect(() => {
-        getItem(id);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
-
-    return {
-        item,
-        setItem,
-    };
-};
-
-export default useLinesFavorites;
--- a/Lab5/src/components/favourites/hooks/LinesItemFavoritesHook.js
+++ b/Lab5/src/components/favourites/hooks/LinesItemFavoritesHook.js
@ -1,67 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import LinesApiService from '../../types/service/FavoritesApi';
-import useLinesItem from './LinesItemFavorites';
-
-const useLinesItemOrder = (id, linesChangeHandle) => {
-    const { item, setItem } = useLinesItem(id);
-
-    const [validated, setValidated] = useState(false);
-
-    const resetValidity = () => {
-        setValidated(false);
-    };
-
-    const getLineObject = (formData) => {
-        const typeId = parseInt(formData.typeId, 10);
-        const price = parseFloat(formData.price).toFixed(2);
-        const count = parseInt(formData.count, 10);
-        const description = String(formData.description, 30);
-        const image = formData.image.startsWith('data:image') ? formData.image : '';
-        return {
-            typeId: typeId.toString(),
-            price: price.toString(),
-            count: count.toString(),
-            description: description.toString(),
-            image,
-        };
-    };
-
-    const handleChange = (event) => {
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-    };
-
-    const handleSubmit = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        const body = getLineObject(item);
-        if (form.checkValidity()) {
-            if (id === undefined) {
-                await LinesApiService.create(body);
-            } else {
-                await LinesApiService.update(id, body);
-            }
-            if (linesChangeHandle) linesChangeHandle();
-            toast.success('Элемент успешно сохранен', { id: 'user' });
-            return true;
-        }
-        setValidated(true);
-        return false;
-    };
-
-    return {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    };
-};
-
-export default useLinesItemOrder;
--- a/Lab5/src/components/footer/Footer.css
+++ b/Lab5/src/components/footer/Footer.css
@ -1,7 +0,0 @@
-.my-footer {
-    background-color: #636363;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    height: 64px;
-    color: #fff;
-}
--- a/Lab5/src/components/footer/Footer.jsx
+++ b/Lab5/src/components/footer/Footer.jsx
@ -1,15 +0,0 @@
-import './Footer.css';
-
-const Footer = () => {
-    const year = new Date().getFullYear();
-
-    return (
-        <footer className="my-footer mt-auto fixed bottom-0 w-100">
-            <div className="copywriter p-2">
-                &copy; {year} UlRent Белянин Никита ПИбд-21 | Все права защищены ;)
-            </div>
-        </footer>
-    );
-};
-
-export default Footer;
--- a/Lab5/src/components/lines/form/LinesItemForm.jsx
+++ b/Lab5/src/components/lines/form/LinesItemForm.jsx
@ -15,6 +15,7 @@ const LinesItemForm = ({ item, handleChange }) => {
                    src={item.image || imgPlaceholder} />
            </div>
            <Select values={types} name='typeId' label='Квартиры' value={item.typeId} onChange={handleChange} required />
+            <Input name='title' label='Текст' value={item.title} onChange={handleChange} type='text' required />
            <Input name='price' label='Цена' value={item.price} onChange={handleChange} type='number' min='1000.0' step='0.50' required />
            <Input name='description' label='Текст' value={item.description} onChange={handleChange} type='text' required />
            <Input name='image' label='Изображение' onChange={handleChange} type='file' accept='image/*' />
--- a/Lab5/src/components/lines/formOrder/LinesFormOrder.jsx
+++ b/Lab5/src/components/lines/formOrder/LinesFormOrder.jsx
@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import { Button, Form } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
-import useLinesItemForm from '../hooks/LinesItemOrderHook';
-import LinesItemForm from './LinesItemFormOrder.jsx';
-import './LinesItemFormOrder.css';
-
-const LinesForm = ({ id }) => {
-    const navigate = useNavigate();
-
-    const {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-    } = useLinesItemForm(id);
-
-    const onBack = () => {
-        navigate('/pageMyBulletin');
-    };
-
-    const onSubmit = async (event) => {
-        if (await handleSubmit(event)) {
-            onBack();
-        }
-    };
-
-    return (
-        <>
-            <Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
-                <LinesItemForm item={item} handleChange={handleChange} />
-                <Form.Group className='row justify-content-center m-0 mt-3'>
-                    <Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
-                        Назад
-                    </Button>
-                    <Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
-                        Сохранить
-                    </Button>
-                </Form.Group>
-            </Form>
-        </>
-    );
-};
-
-LinesForm.propTypes = {
-    id: PropTypes.string,
-};
-
-export default LinesForm;
--- a/Lab5/src/components/lines/formOrder/LinesItemFormOrder.css
+++ b/Lab5/src/components/lines/formOrder/LinesItemFormOrder.css
@ -1,3 +0,0 @@
-#image-preview {
-    width: 200px;
-}
--- a/Lab5/src/components/lines/formOrder/LinesItemFormOrder.jsx
+++ b/Lab5/src/components/lines/formOrder/LinesItemFormOrder.jsx
@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-import Input from '../../input/Input.jsx';
-import './LinesItemFormOrder.css';
-
-const LinesItemForm = ({ item, handleChange }) => {
-    return (
-        <>
-        <div className='w-50 col-md-8 offset-md-3'>
-            <Input name='descriptionName' label='Имя' value={item.descriptionName} onChange={handleChange} type='text' required />
-            <Input name='descriptionSurname' label='Фамилия' value={item.descriptionSurname} onChange={handleChange} type='text' required />
-            <Input name='descriptiondate' label='Дата' value={item.descriptiondate} onChange={handleChange} type='date' required />
-            <Input name='descriptionNumberCard' label='Номер карты' value={item.descriptionNumberCard} onChange={handleChange} type='text' required />
-            <Input name='descriptionCVC' label='CVC' value={item.descriptionCVC} onChange={handleChange} type='text' required />
-        </div>
-        </>
-    );
-};
-
-LinesItemForm.propTypes = {
-    item: PropTypes.object,
-    handleChange: PropTypes.func,
-};
-
-export default LinesItemForm;
--- a/Lab5/src/components/lines/hooks/LinesDeleteModalHook.js
+++ b/Lab5/src/components/lines/hooks/LinesDeleteModalHook.js
@ -1,34 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import useModal from '../../modal/ModalHook';
-import LinesApiService from '../service/LinesApiService';
-
-const useLinesDeleteModal = (linesChangeHandle) => {
-    const { isModalShow, showModal, hideModal } = useModal();
-    const [currentId, setCurrentId] = useState(0);
-
-    const showModalDialog = (id) => {
-        showModal();
-        setCurrentId(id);
-    };
-
-    const onClose = () => {
-        hideModal();
-    };
-
-    const onDelete = async () => {
-        await LinesApiService.delete(currentId);
-        linesChangeHandle();
-        toast.success('Элемент успешно удален', { id: 'LinesTable' });
-        onClose();
-    };
-
-    return {
-        isDeleteModalShow: isModalShow,
-        showDeleteModal: showModalDialog,
-        handleDeleteConfirm: onDelete,
-        handleDeleteCancel: onClose,
-    };
-};
-
-export default useLinesDeleteModal;
--- a/Lab5/src/components/lines/hooks/LinesFilterHook.js
+++ b/Lab5/src/components/lines/hooks/LinesFilterHook.js
@ -1,28 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import useTypes from '../../types/hooks/TypesHook';
-
-const useTypeFilter = () => {
-    const filterName = 'type';
-
-    const [searchParams, setSearchParams] = useSearchParams();
-
-    const { types } = useTypes();
-
-    const handleFilterChange = (event) => {
-        const type = event.target.value;
-        if (type) {
-            searchParams.set(filterName, event.target.value);
-        } else {
-            searchParams.delete(filterName);
-        }
-        setSearchParams(searchParams);
-    };
-
-    return {
-        types,
-        currentFilter: searchParams.get(filterName) || '',
-        handleFilterChange,
-    };
-};
-
-export default useTypeFilter;
--- a/Lab5/src/components/lines/hooks/LinesFormModalHook.js
+++ b/Lab5/src/components/lines/hooks/LinesFormModalHook.js
@ -1,45 +0,0 @@
-import { useState } from 'react';
-import useModal from '../../modal/ModalHook';
-import useLinesItemForm from './LinesItemFormHook';
-
-const useLinesFormModal = (linesChangeHandle) => {
-    const { isModalShow, showModal, hideModal } = useModal();
-    const [currentId, setCurrentId] = useState(0);
-
-    const {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    } = useLinesItemForm(currentId, linesChangeHandle);
-
-    const showModalDialog = (id) => {
-        setCurrentId(id);
-        resetValidity();
-        showModal();
-    };
-
-    const onClose = () => {
-        setCurrentId(-1);
-        hideModal();
-    };
-
-    const onSubmit = async (event) => {
-        if (await handleSubmit(event)) {
-            onClose();
-        }
-    };
-
-    return {
-        isFormModalShow: isModalShow,
-        isFormValidated: validated,
-        showFormModal: showModalDialog,
-        currentItem: item,
-        handleItemChange: handleChange,
-        handleFormSubmit: onSubmit,
-        handleFormClose: onClose,
-    };
-};
-
-export default useLinesFormModal;
--- a/Lab5/src/components/lines/hooks/LinesHook.js
+++ b/Lab5/src/components/lines/hooks/LinesHook.js
@ -26,4 +26,25 @@ const useLines = (typeFilter) => {
    };
 };

+export const useHome = (homeFilter) => {
+    const [homesRefresh] = useState(false);
+    const [home, setHome] = useState([]);
+
+    const getHome = async () => {
+        let expand = '?_expand=home';
+        if (homeFilter) {
+            expand = `${expand}&id=${homeFilter}`;
+        }
+        const data = await LinesApiService.get(homeFilter, expand);
+        setHome(data ?? []);
+    };
+
+    useEffect(() => {
+        getHome();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [homesRefresh, homeFilter]);
+
+    return home;
+};
+
 export default useLines;
--- a/Lab5/src/components/lines/hooks/LinesItemFormHook.js
+++ b/Lab5/src/components/lines/hooks/LinesItemFormHook.js
@ -1,83 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import getBase64FromFile from '../../utils/Base64';
-import LinesApiService from '../service/LinesApiService';
-import useLinesItem from './LinesItemHook';
-
-const useLinesItemForm = (id, linesChangeHandle) => {
-    const { item, setItem } = useLinesItem(id);
-
-    const [validated, setValidated] = useState(false);
-
-    const resetValidity = () => {
-        setValidated(false);
-    };
-
-    const getLineObject = (formData) => {
-        const typeId = parseInt(formData.typeId, 10);
-        const price = parseFloat(formData.price).toFixed(2);
-        const count = parseInt(formData.count, 10);
-        const sum = parseFloat(price * count).toFixed(2);
-        const description = String(formData.description, 30);
-        const image = formData.image.startsWith('data:image') ? formData.image : '';
-        return {
-            typeId: typeId.toString(),
-            price: price.toString(),
-            count: count.toString(),
-            sum: sum.toString(),
-            description: description.toString(),
-            image,
-        };
-    };
-
-    const handleImageChange = async (event) => {
-        const { files } = event.target;
-        const file = await getBase64FromFile(files.item(0));
-        setItem({
-            ...item,
-            image: file,
-        });
-    };
-
-    const handleChange = (event) => {
-        if (event.target.type === 'file') {
-            handleImageChange(event);
-            return;
-        }
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-    };
-
-    const handleSubmit = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        const body = getLineObject(item);
-        if (form.checkValidity()) {
-            if (id === undefined) {
-                await LinesApiService.create(body);
-            } else {
-                await LinesApiService.update(id, body);
-            }
-            if (linesChangeHandle) linesChangeHandle();
-            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
-            return true;
-        }
-        setValidated(true);
-        return false;
-    };
-
-    return {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    };
-};
-
-export default useLinesItemForm;
--- a/Lab5/src/components/lines/hooks/LinesItemHook.js
+++ b/Lab5/src/components/lines/hooks/LinesItemHook.js
@ -5,6 +5,7 @@ const useLinesItem = (id) => {
    const emptyItem = {
        id: '',
        typeId: '',
+        title: '',
        price: '0',
        count: '1',
        description: '',
--- a/Lab5/src/components/lines/hooks/LinesItemOrder.js
+++ b/Lab5/src/components/lines/hooks/LinesItemOrder.js
@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react';
-import LinesApiService from '../order/LinesApiOrder';
-
-const useLinesOrder = (id) => {
-    const emptyItem = {
-        id: '',
-        descriptionName: '',
-        descriptionSurname: '',
-        typeId: '',
-        descriptionNumberCard: '',
-    };
-    const [item, setItem] = useState({ ...emptyItem });
-
-    const getItem = async (itemId = undefined) => {
-        if (itemId && itemId > 0) {
-            const data = await LinesApiService.get(itemId);
-            setItem(data);
-        } else {
-            setItem({ ...emptyItem });
-        }
-    };
-
-    useEffect(() => {
-        getItem(id);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
-
-    return {
-        item,
-        setItem,
-    };
-};
-
-export default useLinesOrder;
--- a/Lab5/src/components/lines/hooks/LinesItemOrderHook.js
+++ b/Lab5/src/components/lines/hooks/LinesItemOrderHook.js
@ -1,67 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import LinesApiService from '../order/LinesApiOrder';
-import useLinesItem from './LinesItemOrder';
-
-const useLinesItemOrder = (id, linesChangeHandle) => {
-    const { item, setItem } = useLinesItem(id);
-
-    const [validated, setValidated] = useState(false);
-
-    const resetValidity = () => {
-        setValidated(false);
-    };
-
-    const getLineObject = (formData) => {
-        const descriptionName = String(formData.descriptionName, 10);
-        const descriptionSurname = String(formData.descriptionSurname, 10);
-        const descriptiondate = String(formData.descriptiondate, 20);
-        const descriptionNumberCard = String(formData.descriptionNumberCard, 30);
-        const descriptionCVC = String(formData.descriptionCVC, 30);
-        return {
-            descriptionName: descriptionName.toString(),
-            descriptionSurname: descriptionSurname.toString(),
-            descriptiondate: descriptiondate.toString(),
-            descriptionNumberCard: descriptionNumberCard.toString(),
-            descriptionCVC: descriptionCVC.toString(),
-        };
-    };
-
-    const handleChange = (event) => {
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-    };
-
-    const handleSubmit = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        const body = getLineObject(item);
-        if (form.checkValidity()) {
-            if (id === undefined) {
-                await LinesApiService.create(body);
-            } else {
-                await LinesApiService.update(id, body);
-            }
-            if (linesChangeHandle) linesChangeHandle();
-            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
-            return true;
-        }
-        setValidated(true);
-        return false;
-    };
-
-    return {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    };
-};
-
-export default useLinesItemOrder;
--- a/Lab5/src/components/lines/order/LinesApiOrder.js
+++ b/Lab5/src/components/lines/order/LinesApiOrder.js
@ -1,5 +0,0 @@
-import ApiService from '../../api/ApiService';
-
-const LinesApiService = new ApiService('customer');
-
-export default LinesApiService;
--- a/Lab5/src/components/lines/service/LinesApiService.js
+++ b/Lab5/src/components/lines/service/LinesApiService.js
@ -1,5 +0,0 @@
-import ApiService from '../../api/ApiService';
-
-const LinesApiService = new ApiService('lines');
-
-export default LinesApiService;
--- a/Lab5/src/components/lines/table/Lines.jsx
+++ b/Lab5/src/components/lines/table/Lines.jsx
@ -1,64 +0,0 @@
-import { Button, ButtonGroup } from 'react-bootstrap';
-import { Link, useNavigate } from 'react-router-dom';
-import Select from '../../input/Select.jsx';
-import ModalConfirm from '../../modal/ModalConfirm.jsx';
-import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
-import useTypeFilter from '../hooks/LinesFilterHook';
-import useLines from '../hooks/LinesHook';
-import LinesTable from './LinesTable.jsx';
-import LinesTableRow from './LinesTableRow.jsx';
-
-const Lines = () => {
-    const { types, currentFilter, handleFilterChange } = useTypeFilter();
-
-    const { lines, handleLinesChange } = useLines(currentFilter);
-
-    const {
-        isDeleteModalShow,
-        showDeleteModal,
-        handleDeleteConfirm,
-        handleDeleteCancel,
-    } = useLinesDeleteModal(handleLinesChange);
-
-    const navigate = useNavigate();
-
-    const showEditPage = (id) => {
-        navigate(`/page-edit/${id}`);
-    };
-
-    return (
-        <>
-          <div className="TitleMyBulletin">
-                <p> Администратор </p>
-            </div>
-
-            <ButtonGroup className='ms-5'>
-                <Button as={Link} to='/page-edit' variant='success'>
-                    Добавить товар (страница)
-                </Button>
-            </ButtonGroup>
-
-            <Button type="button" className="btn1 btn-info me-5 ms-5 mt-5 mb-5" >
-                <Link to='/pageMyBulletin' className='textlinkButMy mt-4'> Лента объявлений </Link>
-            </Button>
-
-            <Select className='ms-5 mt-2' values={types} label='Фильтр по объявлениям'
-                value={currentFilter} onChange={handleFilterChange} />
-            <LinesTable>
-                {
-                    lines.map((line, index) =>
-                        <LinesTableRow key={line.id}
-                            index={index} line={line}
-                            onDelete={() => showDeleteModal(line.id)}
-                            onEditInPage={() => showEditPage(line.id)}
-                        />)
-                }
-            </LinesTable>
-            <ModalConfirm show={isDeleteModalShow}
-                onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
-                title='Удаление' message='Удалить элемент?' />
-        </>
-    );
-};
-
-export default Lines;
--- a/Lab5/src/components/lines/table/LinesTable.jsx
+++ b/Lab5/src/components/lines/table/LinesTable.jsx
@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import { Container, Row } from 'react-bootstrap';
-
-const LinesTable = ({ children }) => {
-    return (
-        <Container fluid className='container-fluid mt-5 mb-5'>
-            <div className='mt-2'> <Row> {children} </Row> </div>
-        </Container>
-    );
-};
-
-LinesTable.propTypes = {
-    children: PropTypes.node,
-};
-
-export default LinesTable;
--- a/Lab5/src/components/lines/table/LinesTableRow.jsx
+++ b/Lab5/src/components/lines/table/LinesTableRow.jsx
@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Button, Row, Col } from 'react-bootstrap';
-import { PencilSquare, Trash3 } from 'react-bootstrap-icons';
-
-const LinesTableRow = ({
-    line, onDelete, onEditInPage,
-}) => {
-    const handleAnchorClick = (event, action) => {
-        event.preventDefault();
-        action();
-    };
-
-    return (
-        <div className="col pb-5">
-            <div className="card mx-auto">
-                <img src={line.image} alt='image'></img>
-                <div className="card-body">
-                    <h5 className="card-title"> {line.type.name} </h5>
-                    <p className="card-text"> {line.description} </p>
-                    <Row className='row'>
-                    <Button type="button" className="btn1">
-                        <Link to='/page5' className='textlinkBut mt-4'> {parseFloat(line.price).toFixed(2)} </Link>
-                    </Button>
-                    </Row>
-                    <Row className='mx-auto text-center mt-3'>
-                    <Col> <a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><PencilSquare /></a> </Col>
-                    <Col> <a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a> </Col>
-                    </Row>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-LinesTableRow.propTypes = {
-    index: PropTypes.number,
-    line: PropTypes.object,
-    onDelete: PropTypes.func,
-    onEditInPage: PropTypes.func,
-};
-
-export default LinesTableRow;
--- a/Lab5/src/components/lines/tableuser/Lines.jsx
+++ b/Lab5/src/components/lines/tableuser/Lines.jsx
@ -1,56 +0,0 @@
-import { Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-import Select from '../../input/Select.jsx';
-import useTypeFilter from '../hooks/LinesFilterHook';
-import useLines from '../hooks/LinesHook';
-import LinesTable from './LinesTable.jsx';
-import LinesTableRow from './LinesTableRow.jsx';
-import useCart from '../../cart/CartHook';
-import { GetUserId } from '../../login/users/UserReducer';
-import useAdvertCart from '../../advert/CartAdvertHook';
-
-const Lines = () => {
-    const { types, currentFilter, handleFilterChange } = useTypeFilter();
-
-    const { lines } = useLines(currentFilter);
-
-    const { addToCart } = useCart();
-
-    const { addToAdvertCart, clearAdvertCart } = useAdvertCart();
-
-    const id = GetUserId();
-    console.log(id);
-
-    // const id = localStorage.getItem('UserId');
-
-    //  const data = await LinesApiService.getUser(id);
-    // const data = await LinesApiService.get(itemId);
-
-    return (
-        <>
-            <div className="TitleMyBulletin">
-                <p>Лента Объявлений</p>
-            </div>
-
-            <Button type="button" className="btn1 btn-info me-5 ms-5 mt-2 mb-1" >
-                <Link to='/page1' className='textlinkButMy mt-4'> Администрация </Link>
-            </Button>
-
-            <Select className='ms-4 mt-2' values={types} label='Фильтр по объявлениям'
-                value={currentFilter} onChange={handleFilterChange} />
-            <LinesTable>
-                {
-                    lines.map((line, index) =>
-                        <LinesTableRow key={line.id}
-                            index={index} line={line}
-                            onAddAdvertCart={() => addToAdvertCart(line)}
-                            clearCartAdvert={() => clearAdvertCart(line)}
-                            onAddCart={() => addToCart(line)}
-                        />)
-                }
-            </LinesTable>
-        </>
-    );
-};
-
-export default Lines;
--- a/Lab5/src/components/lines/tableuser/LinesTable.jsx
+++ b/Lab5/src/components/lines/tableuser/LinesTable.jsx
@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import { Container, Row } from 'react-bootstrap';
-
-const LinesTable = ({ children }) => {
-    return (
-        <Container fluid className='container-fluid mt-5 mb-5'>
-            <div className='mt-2'> <Row> {children} </Row> </div>
-        </Container>
-    );
-};
-
-LinesTable.propTypes = {
-    children: PropTypes.node,
-};
-
-export default LinesTable;
--- a/Lab5/src/components/lines/tableuser/LinesTableRow.jsx
+++ b/Lab5/src/components/lines/tableuser/LinesTableRow.jsx
@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import { Link, useNavigate } from 'react-router-dom';
-import { Button, Row, Col } from 'react-bootstrap';
-
-const LinesTableRow = ({
-    line, onAddCart, onAddAdvertCart, clearCartAdvert,
-}) => {
-    const handleAnchorClick = (event, action) => {
-        event.preventDefault();
-        action();
-    };
-
-    const Go = useNavigate();
-
-    const GoNext = () => {
-        Go('/page5');
-    };
-
-    const handleCart = (eventcart, addcart, actioncart) => {
-        GoNext();
-        clearCartAdvert();
-        onAddAdvertCart();
-
-        eventcart.preventDefault();
-        actioncart();
-    };
-
-    return (
-        <div className="col pb-5">
-            <div className="card mx-auto">
-                <img src={line.image} alt='image'></img>
-                <div className="card-body">
-                    <h5 className="card-title"> {line.type.name} </h5>
-                    <p className="card-text"> {(line.description)} </p>
-                    <Row className='row'>
-                    <Button type="button" className="btn1" onClick={(eventcart) => handleCart(eventcart, clearCartAdvert, onAddAdvertCart, GoNext) }>
-                        <Link to='/page5' className='textlinkBut mt-4'> {parseFloat(line.price).toFixed(2)} </Link>
-                    </Button>
-                        <Col className='text-center mt-3'> <a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}> <i className="fa fa-home" aria-hidden="true"> Добавить в избранное </i> </a> </Col>
-                    </Row>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-LinesTableRow.propTypes = {
-    id: PropTypes.string,
-    index: PropTypes.number,
-    line: PropTypes.object,
-    onAddCart: PropTypes.func,
-    onAddAdvertCart: PropTypes.func,
-    clearCartAdvert: PropTypes.func,
-};
-
-export default LinesTableRow;
--- a/Lab5/src/components/login/form/LoginForm.jsx
+++ b/Lab5/src/components/login/form/LoginForm.jsx
@ -1,55 +0,0 @@
-/* eslint-disable import/extensions */
-/* eslint-disable import/no-unresolved */
-import { Button, Form, Nav } from 'react-bootstrap';
-import { useNavigate, Link } from 'react-router-dom';
-import useLinesItemForm from '../hooks/LoginFormHook';
-import LinesItemForm from './LoginItemForm';
-import useUser from '../users/UserCardHook';
-
-const LoginForm = () => {
-    const navigate = useNavigate();
-
-    const {
-        SetUserId,
-    } = useUser();
-
-    const {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-    } = useLinesItemForm();
-
-    const onBack = () => {
-        navigate('/pageMyBulletin');
-    };
-
-    const SetLogin = () => {
-        SetUserId();
-    };
-
-    const onSubmit = async (event) => {
-        if (await handleSubmit(event)) {
-            onBack();
-        }
-    };
-
-    return (
-        <>
-                <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={onSubmit}>
-                        <Form.Group className="mb-2" controlId="lastname">
-                            <LinesItemForm item={item} handleChange={handleChange} />
-                        </Form.Group>
-
-                <Nav.Link as={Link} to ="/SignIn">Нет аккаунта? Зарегистрироваться</Nav.Link>
-                    <div className="d-grid gap-2 pt-5 mx-auto w-100">
-                        <Button className="w-50 btnLog btn btn-light mx-auto" variant="primary" type="submit" onClick={() => SetLogin()}>
-                            <Link to="/page1" className='textlink'> Войти </Link>
-                        </Button>
-                    </div>
-            </Form>
-        </>
-    );
-};
-
-export default LoginForm;
--- a/Lab5/src/components/login/form/LoginItemForm.css
+++ b/Lab5/src/components/login/form/LoginItemForm.css
--- a/Lab5/src/components/login/form/LoginItemForm.jsx
+++ b/Lab5/src/components/login/form/LoginItemForm.jsx
@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import Input from '../../input/Input.jsx';
-
-const LinesItemForm = ({ item, handleChange }) => {
-       return (
-        <>
-         <Input name='Email' label='Введите ваш логин' value={item.Email} onChange={handleChange}
-                type='Email' required />
-         <Input name='password' label='Введите пароль' value={item.password} onChange={handleChange} type='password' required />
-        </>
-    );
-};
-
-LinesItemForm.propTypes = {
-    item: PropTypes.object,
-    handleChange: PropTypes.func,
-};
-
-export default LinesItemForm;
--- a/Lab5/src/components/login/hooks/LoginFormHook.js
+++ b/Lab5/src/components/login/hooks/LoginFormHook.js
@ -1,71 +0,0 @@
-import { useState } from 'react';
-import useLinesItem from './LoginItemHook';
-import useLines from './UsersHook';
-import { SetUserId } from '../users/UserReducer';
-
-const useLinesItemForm = (id) => {
-    const { item, setItem } = useLinesItem(id);
-    const { users } = useLines();
-    const [validated, setValidated] = useState(false);
-
-    const resetValidity = () => {
-        setValidated(false);
-    };
-
-    const getLineObject = (formData) => {
-        const Email = formData.Email.toString();
-        const password = formData.password.toString();
-        return {
-            Email: Email.toString(),
-            password: password.toString(),
-        };
-    };
-
-    const handleChange = (event) => {
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-
-        localStorage.setItem('Email', event.target.value);
-    };
-
-    const handleSubmit = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        let userId = null;
-        const body = getLineObject(item);
-        users.map((line) => {
-        if ((line.Email === body.Email) && (line.password === body.password)) {
-            SetUserId(line.id);
-            userId = true;
-            return null;
-        }
-        return null;
-    });
-        if (form.checkValidity()) {
-            if (userId === true) {
-                return true;
-            // eslint-disable-next-line no-else-return
-            } else {
-                console.log('we dont have');
-                return false;
-            }
-        }
-        setValidated(true);
-        return false;
-    };
-
-    return {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    };
-};
-
-export default useLinesItemForm;
--- a/Lab5/src/components/login/hooks/LoginItemHook.js
+++ b/Lab5/src/components/login/hooks/LoginItemHook.js
@ -1,17 +0,0 @@
-import { useState } from 'react';
-
-const useLinesItem = () => {
-    const emptyItem = {
-        id: '',
-        Email: '',
-        password: '',
-    };
-    const [item, setItem] = useState({ ...emptyItem });
-
-    return {
-        item,
-        setItem,
-    };
-};
-
-export default useLinesItem;
--- a/Lab5/src/components/login/hooks/UsersHook.js
+++ b/Lab5/src/components/login/hooks/UsersHook.js
@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-import LinesApiService from '../../sign/LinesApiSign';
-
-const useLines = (typeFilter) => {
-    const [linesRefresh, setLinesRefresh] = useState(false);
-    const [users, setLines] = useState([]);
-    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
-
-    const getLines = async () => {
-        const data = await LinesApiService.getAll();
-        setLines(data ?? []);
-    };
-
-    useEffect(() => {
-        getLines();
-    }, [linesRefresh, typeFilter]);
-
-    return {
-        users,
-        handleLinesChange,
-    };
-};
-
-export default useLines;
--- a/Lab5/src/components/login/users/UserCardHook.js
+++ b/Lab5/src/components/login/users/UserCardHook.js
@ -1,16 +0,0 @@
-import { useContext } from 'react';
-import UserUseContext from './UserContext.jsx';
-import { userAdd, userRemove } from './UserReducer';
-
-const useUser = () => {
-    const { User, dispatch } = useContext(UserUseContext);
-
-    return {
-        User,
-        SetUserId: (user) => dispatch(userAdd(user)),
-        ExitUsedId: () => dispatch(userRemove()),
-        GetUserId: User?.id || -1,
-    };
-};
-
-export default useUser;
--- a/Lab5/src/components/login/users/UserContext.jsx
+++ b/Lab5/src/components/login/users/UserContext.jsx
@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import {
-    createContext,
-    useEffect,
-    useReducer,
-} from 'react';
-import { cartReducer, loadUser, saveUser } from './UserReducer';
-
-export const UserContext = createContext(null);
-
-export const UserProvider = ({ children }) => {
-    const [User, dispatch] = useReducer(cartReducer, null, loadUser);
-
-    useEffect(() => {
-        saveUser(User || []);
-    }, [User]);
-
-    return (
-        <UserContext.Provider value={{ User, dispatch }}>
-            {children}
-        </UserContext.Provider>
-    );
-};
-
-UserProvider.propTypes = {
-    children: PropTypes.node,
-};
-
-export default UserContext;
--- a/Lab5/src/components/login/users/UserReducer.js
+++ b/Lab5/src/components/login/users/UserReducer.js
@ -1,64 +0,0 @@
-const USER_KEY = 'localUser';
-const USER_ADD = 'user/add';
-const USER_REMOVE = 'user/remove';
-const USER_VIEW = 'user/view';
-
-const SetUserId = (user) => {
-    return localStorage.setItem(USER_KEY, user);
-};
-
-export const GetUserId = () => {
-    const usid = localStorage.getItem(USER_KEY);
-    return usid;
-};
-
-const ExitUsedId = () => {
-    const UserId = -1;
-    localStorage.setItem(USER_KEY, UserId);
-    // localStorage.getItem(USER_KEY);
-    return localStorage.getItem(USER_KEY, UserId);
-};
-
-export { SetUserId, ExitUsedId };
-
-export const saveUser = () => {
-    return SetUserId;
-};
-
-export const loadUser = (initialValue = -1) => {
-    const userDataNew = localStorage.getItem(USER_KEY);
-    if (userDataNew) {
-        return GetUserId;
-    }
-    return initialValue;
-};
-
-export const cartReducer = (user, action) => {
-    const { item } = action;
-    switch (action.type) {
-        case USER_ADD: {
-            return SetUserId(user, item);
-        }
-        case USER_REMOVE: {
-            return ExitUsedId(user, item);
-        }
-        case USER_VIEW: {
-            return loadUser();
-        }
-        default: {
-            throw Error(`Unknown action: ${action.type}`);
-        }
-    }
-};
-
-export const userAdd = (user, item) => ({
-    type: USER_ADD, user, item,
-});
-
-export const userRemove = (item) => ({
-    type: USER_REMOVE, item,
-});
-
-export const userViews = (item) => ({
-    type: USER_VIEW, item,
-});
--- a/Lab5/src/components/modal/Modal.css
+++ b/Lab5/src/components/modal/Modal.css
@ -1,3 +0,0 @@
-.modal-title {
-    font-size: 1.2rem;
-}
--- a/Lab5/src/components/modal/ModalConfirm.jsx
+++ b/Lab5/src/components/modal/ModalConfirm.jsx
@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import { Button, Modal } from 'react-bootstrap';
-import { createPortal } from 'react-dom';
-import './Modal.css';
-
-const ModalConfirm = ({
-    show, title, message, onConfirm, onClose,
-}) => {
-    return createPortal(
-        <Modal show={show} backdrop='static' onHide={() => onClose()}>
-            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
-                <Modal.Title>{title}</Modal.Title>
-            </Modal.Header>
-
-            <Modal.Body>
-                {message}
-            </Modal.Body>
-
-            <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
-                <Button variant='secondary' className='col-5 m-0 me-2'
-                    onClick={() => onClose()}>
-                    Нет
-                </Button>
-                <Button variant='primary' className='col-5 m-0 ms-2'
-                    onClick={() => onConfirm()}>
-                    Да
-                </Button>
-            </Modal.Footer>
-        </Modal>,
-        document.body,
-    );
-};
-
-ModalConfirm.propTypes = {
-    show: PropTypes.bool,
-    title: PropTypes.string,
-    message: PropTypes.string,
-    onConfirm: PropTypes.func,
-    onClose: PropTypes.func,
-};
-
-export default ModalConfirm;
--- a/Lab5/src/components/modal/ModalForm.jsx
+++ b/Lab5/src/components/modal/ModalForm.jsx
@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import { Button, Form, Modal } from 'react-bootstrap';
-import { createPortal } from 'react-dom';
-import './Modal.css';
-
-const ModalForm = ({
-    show, title, validated, onSubmit, onClose, children,
-}) => {
-    return createPortal(
-        <Modal show={show} backdrop='static' onHide={() => onClose()}>
-            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
-                <Modal.Title>{title}</Modal.Title>
-            </Modal.Header>
-            <Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
-                <Modal.Body>
-                    {children}
-                </Modal.Body>
-
-                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
-                    <Button variant='secondary' className='col-5 m-0 me-2'
-                        onClick={() => onClose()}>
-                        Отмена
-                    </Button>
-                    <Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
-                        Сохранить
-                    </Button>
-                </Modal.Footer>
-            </Form>
-        </Modal>,
-        document.body,
-    );
-};
-
-ModalForm.propTypes = {
-    show: PropTypes.bool,
-    title: PropTypes.string,
-    validated: PropTypes.bool,
-    onSubmit: PropTypes.func,
-    onClose: PropTypes.func,
-    children: PropTypes.node,
-};
-
-export default ModalForm;
--- a/Lab5/src/components/modal/ModalHook.js
+++ b/Lab5/src/components/modal/ModalHook.js
@ -1,21 +0,0 @@
-import { useState } from 'react';
-
-const useModal = () => {
-    const [showModal, setShowModal] = useState(false);
-
-    const showModalDialog = () => {
-        setShowModal(true);
-    };
-
-    const hideModalDialog = () => {
-        setShowModal(false);
-    };
-
-    return {
-        isModalShow: showModal,
-        showModal: showModalDialog,
-        hideModal: hideModalDialog,
-    };
-};
-
-export default useModal;
--- a/Lab5/src/components/navigation/Navigation.css
+++ b/Lab5/src/components/navigation/Navigation.css
@ -1,77 +0,0 @@
-.navbar{
-    background-color: #85DADA !important;
-}
-
-.my-navbar {
-    background-color: #85DADA !important;
-}
-
-.my-navbar .link a:hover {
-    text-decoration: underline !important;
-}
-
-.my-navbar .logo {
-    width: 20px;
-    height: 20px;
-}
-
-.logo{
-    width: 100px;
-    height: 80px;
-}
-
-.main-navbar{
-    font-size: 24px;
-    justify-content: end;
-}
-
-.Name{
-    color: #ffffff;
-    font-size: 24px;
-    text-decoration: none;
-}
-
-
-@media (max-width: 600px) { 
-    .logo{
-        width: 80px;
-        height: 60px;
-    }
-    .Name{
-        font-size: 22px;
-    }
- }
-
-
- @media (max-width: 360px){
-    .Name{
-        font-size: 20px;
-    }
-
-    .logo{
-        width: 60px;
-        height: 50px;
-    }
-}
-
-@media (max-width: 300px){
-    .logo{
-        width: 50px;
-        height: 50px;
-    }
-}
-
-@media (max-width: 270px){
-    .Name{
-        font-size: 14px;
-    }
-
-    .logo{
-        width: 50px;
-        height: 40px;
-    }
-
-    .copywriter{
-        font-size: 14px;
-    }
-}
--- a/Lab5/src/components/navigation/Navigation.jsx
+++ b/Lab5/src/components/navigation/Navigation.jsx
@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import {
- Container, Nav, Navbar, NavbarCollapse, NavbarToggle,
-} from 'react-bootstrap';
-import { Link, useLocation } from 'react-router-dom';
-import Logo from '../../assets/Image1.png';
-import { ExitUsedId } from '../login/users/UserReducer';
-import './Navigation.css';
-
-const Navigation = ({ routes }) => {
-    const location = useLocation();
-    const indexPageLink = routes.filter((route) => route.index === false).shift();
-    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
-
-    const Exit = () => {
-        ExitUsedId(-1);
-    };
-
-    return (
-        <header>
-            <Navbar expand='md' bg='dark' data-bs-theme='dark' className='navbar navbar-expand-md navbar-dark'>
-                <Container fluid>
-                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
-                            <img src={Logo} className="logo me-5" alt="логотип" />
-                    </Navbar.Brand>
-                    <Navbar className='Name' as={Link} to={indexPageLink?.path ?? '/'}>
-                        <div className="Name"> UlRent </div>
-                    </Navbar>
-                    <NavbarToggle aria-controls='main-navbar' />
-                    <NavbarCollapse className="justify-content-end me-5" id='main-navbar '>
-                        <Nav className='main-navbar' activeKey={location.pathname}>
-                            {
-                                pages.map((page) =>
-                                    <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
-                                        {page.title}
-                                    </Nav.Link>)
-                            }
-                            <Nav.Link as={Link} to ="/logIn" aria-current="page">
-                                <img src="src/assets/exit.png" alt="home" width ="40" height ="40" onClick={Exit}/>
-                            </Nav.Link>
-                        </Nav>
-                    </NavbarCollapse>
-                </Container>
-            </Navbar >
-        </header>
-    );
-};
-
-Navigation.propTypes = {
-    routes: PropTypes.array,
-};
-
-export default Navigation;
--- a/Lab5/src/components/registration/formSign/LinesFormSign.jsx
+++ b/Lab5/src/components/registration/formSign/LinesFormSign.jsx
@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import { Button, Form } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
-import useLinesItemForm from '../hooks/LinesItemSignHook';
-import LinesItemForm from './LinesItemFormSign.jsx';
-import './LinesItemFormSign.css';
-
-const LinesForm = ({ id }) => {
-    const navigate = useNavigate();
-
-    const {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-    } = useLinesItemForm(id);
-
-    const onBack = () => {
-        navigate(-1);
-    };
-
-    const onSubmit = async (event) => {
-        if (await handleSubmit(event)) {
-            onBack();
-        }
-    };
-
-    return (
-        <>
-            <Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
-                <LinesItemForm item={item} handleChange={handleChange} />
-                <Form.Group className='row justify-content-center m-0 mt-3'>
-                    <Button className='col-2 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
-                        Войти
-                    </Button>
-                </Form.Group>
-            </Form>
-        </>
-    );
-};
-
-LinesForm.propTypes = {
-    id: PropTypes.string,
-};
-
-export default LinesForm;
--- a/Lab5/src/components/registration/formSign/LinesItemFormSign.css
+++ b/Lab5/src/components/registration/formSign/LinesItemFormSign.css
@ -1,3 +0,0 @@
-#image-preview {
-    width: 200px;
-}
--- a/Lab5/src/components/registration/formSign/LinesItemFormSign.jsx
+++ b/Lab5/src/components/registration/formSign/LinesItemFormSign.jsx
@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-import Input from '../../input/Input.jsx';
-import './LinesItemFormSign.css';
-
-const LinesItemForm = ({ item, handleChange }) => {
-    return (
-        <>
-        <div className='w-50 col-md-8 offset-md-3'>
-            <Input name='Name' label='Как пользователям к вам обращаться' placeholder='Ваше имя и фамилия' value={item.Name} onChange={handleChange} type='text' required />
-            <Input name='Email' label='Ваш Логин' placeholder='Электронная почта' value={item.Email} onChange={handleChange} type='email' required />
-            <Input name='NumberPhone' label='Номер телефона' placeholder='Только мобильный телефон' value={item.NumberPhone} onChange={handleChange} type='text' minLength='11' maxLength='11' required />
-            <Input name='password' label='Пароль' placeholder='от 6 до 16 символов' value={item.password} onChange={handleChange} type='text' required />
-        </div>
-        </>
-    );
-};
-
-LinesItemForm.propTypes = {
-    item: PropTypes.object,
-    handleChange: PropTypes.func,
-};
-
-export default LinesItemForm;
--- a/Lab5/src/components/registration/hooks/LinesItemSign.js
+++ b/Lab5/src/components/registration/hooks/LinesItemSign.js
@ -1,35 +0,0 @@
-import { useEffect, useState } from 'react';
-import LinesApiService from '../../sign/LinesApiSign';
-
-const useLinesOrder = (id) => {
-    const emptyItem = {
-        id: '',
-        Name: '',
-        Email: '',
-        typeId: '',
-        NumberPhone: '',
-        password: '',
-    };
-    const [item, setItem] = useState({ ...emptyItem });
-
-    const getItem = async (itemId = undefined) => {
-        if (itemId && itemId > 0) {
-            const data = await LinesApiService.get(itemId);
-            setItem(data);
-        } else {
-            setItem({ ...emptyItem });
-        }
-    };
-
-    useEffect(() => {
-        getItem(id);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
-
-    return {
-        item,
-        setItem,
-    };
-};
-
-export default useLinesOrder;
--- a/Lab5/src/components/registration/hooks/LinesItemSignHook.js
+++ b/Lab5/src/components/registration/hooks/LinesItemSignHook.js
@ -1,65 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import LinesApiService from '../../sign/LinesApiSign';
-import useLinesItem from './LinesItemSign';
-
-const useLinesItemOrder = (id, linesChangeHandle) => {
-    const { item, setItem } = useLinesItem(id);
-
-    const [validated, setValidated] = useState(false);
-
-    const resetValidity = () => {
-        setValidated(false);
-    };
-
-    const getLineObject = (formData) => {
-        const Name = String(formData.Name, 30);
-        const Email = String(formData.Email, 30);
-        const NumberPhone = String(formData.NumberPhone, 30);
-        const password = String(formData.password, 30);
-        return {
-            Name: Name.toString(),
-            Email: Email.toString(),
-            NumberPhone: NumberPhone.toString(),
-            password: password.toString(),
-        };
-    };
-
-    const handleChange = (event) => {
-        const inputName = event.target.name;
-        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
-        setItem({
-            ...item,
-            [inputName]: inputValue,
-        });
-    };
-
-    const handleSubmit = async (event) => {
-        const form = event.currentTarget;
-        event.preventDefault();
-        event.stopPropagation();
-        const body = getLineObject(item);
-        if (form.checkValidity()) {
-            if (id === undefined) {
-                await LinesApiService.create(body);
-            } else {
-                await LinesApiService.update(id, body);
-            }
-            if (linesChangeHandle) linesChangeHandle();
-            toast.success('Пользователь успешно добавлен', { id: 'user' });
-            return true;
-        }
-        setValidated(true);
-        return false;
-    };
-
-    return {
-        item,
-        validated,
-        handleSubmit,
-        handleChange,
-        resetValidity,
-    };
-};
-
-export default useLinesItemOrder;
--- a/Lab5/src/components/sign/LinesApiSign.js
+++ b/Lab5/src/components/sign/LinesApiSign.js
@ -1,5 +1,5 @@
 import ApiService from '../api/ApiService';

-const LinesApiService = new ApiService('user');
+const LinesApiService = new ApiService('users');

 export default LinesApiService;
--- a/Lab5/src/components/types/hooks/AdvertTypeHook.js
+++ b/Lab5/src/components/types/hooks/AdvertTypeHook.js
@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-import TypesApiService from '../../lines/service/LinesApiService';
-
-const useTypes = () => {
-    const [types, setTypes] = useState([]);
-
-    const getTypes = async () => {
-        const data = await TypesApiService.get();
-        setTypes(data ?? []);
-    };
-
-    useEffect(() => {
-        getTypes();
-    }, []);
-
-    return {
-        types,
-    };
-};
-
-export default useTypes;
--- a/Lab5/src/components/types/hooks/TypesHook.js
+++ b/Lab5/src/components/types/hooks/TypesHook.js
@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-import TypesApiService from '../service/TypesApiService';
-
-const useTypes = () => {
-    const [types, setTypes] = useState([]);
-
-    const getTypes = async () => {
-        const data = await TypesApiService.getAll();
-        setTypes(data ?? []);
-    };
-
-    useEffect(() => {
-        getTypes();
-    }, []);
-
-    return {
-        types,
-    };
-};
-
-export default useTypes;
--- a/Lab5/src/components/types/service/FavoritesApi.js
+++ b/Lab5/src/components/types/service/FavoritesApi.js
@ -1,5 +0,0 @@
-import ApiService from '../../api/ApiService';
-
-const FavouritesLinesApi = new ApiService('favourites');
-
-export default FavouritesLinesApi;
--- a/Lab5/src/components/types/service/TypesApiService.js
+++ b/Lab5/src/components/types/service/TypesApiService.js
@ -1,5 +0,0 @@
-import ApiService from '../../api/ApiService';
-
-const TypesApiService = new ApiService('types');
-
-export default TypesApiService;
--- a/Lab5/src/components/utils/Base64.js
+++ b/Lab5/src/components/utils/Base64.js
@ -1,15 +0,0 @@
-const getBase64FromFile = async (file) => {
-    const reader = new FileReader();
-    return new Promise((resolve, reject) => {
-        reader.onloadend = () => {
-            const fileContent = reader.result;
-            resolve(fileContent);
-        };
-        reader.onerror = () => {
-            reject(new Error('Oops, something went wrong with the file reader.'));
-        };
-        reader.readAsDataURL(file);
-    });
-};
-
-export default getBase64FromFile;
--- a/Lab5/src/components/utils/UserID.js
+++ b/Lab5/src/components/utils/UserID.js
@ -1,34 +0,0 @@
-// let UserId;
-
-// const SetUserId = (id) => {
-//     UserId = id;
-//     localStorage.setItem('UserId', UserId);
-// };
-
-// const GetUserId = () => {
-//     const usid = localStorage.getItem('UserId');
-//     return usid;
-// };
-
-// const ExitUsedId = () => {
-//     UserId = -1;
-//     localStorage.setItem('UserId', UserId);
-//     localStorage.getItem('UserId');
-//     return localStorage.getItem('UserId', UserId);
-// };
-
-// export { SetUserId, GetUserId, ExitUsedId };
-
-// export const saveLogin = () => {
-//     localStorage.setItem('UserId', UserId);
-//     // console.log(UserId);
-// };
-
-// export const getLogin = () => {
-//     localStorage.getItem('UserId', UserId);
-// };
-
-// //     // const data = await LinesApiService.getUser();
-// //     // console.log(UserId);
-// //     // console.log(data[0]);
-// //     // console.log(localStorage.getItem('UserId'));
--- a/Lab5/src/main.jsx
+++ b/Lab5/src/main.jsx
@ -13,9 +13,12 @@ import Page4 from './pages/Page4.jsx';
 import Page5 from './pages/Page5.jsx';
 import PageMyBulletin from './pages/PageMyBulletin.jsx';
 import PageEdit from './pages/PageEdit.jsx';
-import LogIn from './pages/LogIn.jsx';
 import SignIn from './pages/SignIn.jsx';
 import OrderPage from './pages/OrderPage.jsx';
+import Searching from './pages/Search.jsx';
+import Account from './pages/Account.jsx';
+import LogIn from './pages/LogIn.jsx';
+import Logout from './pages/Logout.jsx';

 const routes = [
  {
@ -44,7 +47,7 @@ const routes = [
    title: 'Контакты',
  },
  {
-    path: '/page5',
+    path: '/page5/:id?',
    element: <Page5 />,
  },
  {
@ -55,6 +58,10 @@ const routes = [
    path: '/page-edit/:id?',
    element: <PageEdit />,
  },
+  {
+    path: '/search',
+    element: <Searching />,
+  },
  {
    path: '/logIn',
    element: <LogIn />,
@ -67,6 +74,14 @@ const routes = [
    path: '/orderPage',
    element: <OrderPage />,
  },
+  {
+    path: '/account',
+    element: <Account />,
+  },
+  {
+    path: '/logout',
+    element: <Logout />,
+  },
 ];

 const router = createBrowserRouter([
--- a/Lab5/src/pages/LogIn.css
+++ b/Lab5/src/pages/LogIn.css
@ -8,10 +8,31 @@
    color: red;
 }

-@media (max-width: 550px) { 
+.imgg1{
+    max-width: 500px;
+    max-height: 400px;
+}
+
+.cardlog{ 
+    width: 400px;
+}
+
+@media (max-width: 850px) {
+    .imgg1{
+        max-height: 350px;
+    }
+}
+
+@media (max-width: 670px) { 
    .imgg1{
        display: none;
    }
+    .imglog{
+        display: none;
+    }
+    .card{
+        max-width: 400px;
+    }
 }

@media (max-width: 500px) { 
@ -19,3 +40,27 @@
        width: 100%;
    }
 }
+
+@media (max-width: 330px) { 
+    .card{
+        max-width: 200px;
+    }
+    
+    .textlog{
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 200px) { 
+    .card{
+        max-width: 150px;
+    }
+    
+    .TitleLogin{
+        font-size: 10px;
+    }
+
+    .textlog{
+        font-size: 7px;
+    }
+}
--- a/Lab5/src/pages/LogIn.jsx
+++ b/Lab5/src/pages/LogIn.jsx
@ -1,37 +1,114 @@
-import PropTypes from 'prop-types';
-import { Container, Row } from 'react-bootstrap';
-import LoginForm from '../components/login/form/LoginForm.jsx';
+import {
+  Container, Row, Card, Form, Button,
+} from 'react-bootstrap';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import useUser from '../components/users/userHook';
+import useSubmit from '../components/users/loginHook';
 import Image12 from '../assets/Image12.png';
 import './LogIn.css';

 const LogIn = () => {
-        return (
-            <Container fluid className='container-fluid wrapper'>
-                <div className="TitleLogin">
-                <p>Войти в профиль</p>
-                </div>
+  const [validated, setValidated] = useState(false);
+  const { userLogin } = useUser();
+  const { onSubmit } = useSubmit();
+  const navigate = useNavigate();

-                <Row>
-                    <div className='col-7'>
-                    <div className="row justify-content-center">
-                        <LoginForm />
-                    </div>
-                    </div>
+  const handleSubmit = async (event) => {
+    const form = event.currentTarget;
+    if (form.checkValidity() === false) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      event.preventDefault();
+      setValidated(true);

-                    <div className="col">
-                        <div className="col-md-10 offset">
-                        <img className="imgg1 w-100 h-100" src={Image12} alt="banner" />
-                        </div>
-                    </div>
-                </Row>
+      const formData = {
+        name: form.elements.formName.value,
+        password: form.elements.formPassword.value,
+      };

-            </Container>
-        );
-};
+      const result = await onSubmit(formData);

-LogIn.propTypes = {
-    index: PropTypes.number,
-    line: PropTypes.object,
+      if (result === 1) {
+        // eslint-disable-next-line no-alert
+        alert('Пользователя с таким логином не существует');
+      } else if (result === 2) {
+        // eslint-disable-next-line no-alert
+        alert('Введен неверный пароль');
+      } else if (result === 3) {
+        userLogin(formData);
+        navigate('/PageMyBulletin');
+      }
+    }
+  };
+
+  return (
+    <Container fluid className='container-fluid wrapper'>
+      <div className="TitleLogin">
+        <p>Войти в профиль</p>
+      </div>
+
+      <Row className='mt-4 mb-4'>
+        <div className='col-md-6 m-0 mx-auto text-center'>
+          <div className="row justify-content-center">
+            <Card className='cardlog' style={{ borderRadius: '25px', borderColor: 'gold' }}>
+              <Card.Body className="p-5">
+                <h2 className="text-uppercase text-center mb-5 textlog">Войти</h2>
+
+                <Form noValidate validated={validated} onSubmit={handleSubmit}>
+                  <Form.Group className="mb-4 textlog">
+                    <Form.Control type="text" id="formName" required />
+                    <Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
+                    <Form.Label htmlFor="formName">Имя</Form.Label>
+                  </Form.Group>
+
+                  <Form.Group className="mb-4 textlog">
+                    <Form.Control type="password" id="formPassword" size="lg" required />
+                    <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+                    <Form.Label htmlFor="formPassword">Пароль</Form.Label>
+                  </Form.Group>
+
+                  <Form.Group className="mb-2 textlog" controlId="formRememberMe">
+                    <Form.Check type="checkbox" label="Запомнить меня" />
+                  </Form.Group>
+
+                  <p className="text-center text-muted mb-0 textlog">
+                      <i> Забыли пароль?{' '} </i>
+                    <Link to='/PasswordRecovery' className="fw-bold text-body" style={{ color: 'black', textDecoration: 'none' }}>
+                      <u>Восстановление пароля</u>
+                    </Link>
+                  </p>
+
+                  <div className="d-flex justify-content-center textlog">
+                    <Button to='/pageMyBulletin' type="submit" className="btn-block btn-warning text-body mb-0">
+                      Вход
+                    </Button>
+                  </div>
+
+                  <p className="text-center text-muted mb-0 textlog">
+                      <i> У вас нет аккаунта?{' '} </i>
+                    <Link to='/SignIn' className="fw-bold text-body" style={{ color: 'black', textDecoration: 'none' }}>
+                      <u>Регистрация</u>
+                    </Link>
+                  </p>
+                </Form>
+              </Card.Body>
+            </Card>
+          </div>
+        </div>
+
+        <div className="col">
+          <div className="col-md-10 offset justify-content-center mt-5">
+            <img className="imgg1 imglog w-100 h-100" src={Image12} alt="banner" />
+          </div>
+        </div>
+      </Row>
+
+    </Container>
+  );
 };

 export default LogIn;
--- a/Lab5/src/pages/Page5.css
+++ b/Lab5/src/pages/Page5.css
@ -8,13 +8,47 @@

 .textus1{
   font-size: 28px;
-   color: white;
+   color: black;
+}
+
+.textus5{
+    color: Black;
+    font-size: 42px;
+}
+
+.textus4{
+    color: Black;
+    font-size: 38px;
+}
+
+.textus33{
+    color: Black;
+    font-size: 24px;
 }

@media(max-width: 1200px) {
    .textus1{
        font-size: 24px;
     }
+     .textus5{
+        color: Black;
+        font-size: 38px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 34px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 28px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 20px;
+    }
 }

@media(max-width: 1100px) {
@ -33,6 +67,70 @@
    .textus1{
        font-size: 14px;
     }
+
+     .textus5{
+        color: Black;
+        font-size: 32px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 30px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 24px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 16px;
+    }
+}
+
+@media(max-width: 700px) {
+    .textus5{
+        color: Black;
+        font-size: 26px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 22px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 20px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 14px;
+    }
+}
+
+@media(max-width: 600px) {
+    .textus5{
+        color: Black;
+        font-size: 20px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 18px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 14px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 14px;
+    }
 }

@media(max-width: 500px) {
@ -40,8 +138,24 @@
        font-size: 32px;
    }

-    .card-img-top1{
-        display: none;
+    .textus5{
+        color: Black;
+        font-size: 20px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 18px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 14px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 14px;
    }
 }

@ -50,8 +164,24 @@
        font-size: 32px;
    }

-    .card-img-top1{
-        display: table;
+    .textus5{
+        color: Black;
+        font-size: 16px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 15px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 12px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 12px;
    }
 }

@ -59,6 +189,26 @@
    .textus1{
        font-size: 28px;
    }
+
+    .textus5{
+        color: Black;
+        font-size: 12px;
+    }
+    
+    .textus4{
+        color: Black;
+        font-size: 10px;
+    }
+    
+    .textus3{
+        color: Black;
+        font-size: 8px;
+    }
+    
+    .textus33{
+        color: Black;
+        font-size: 8px;
+    }
 }

@media(max-width: 270px) {
--- a/Lab5/src/pages/Page5.jsx
+++ b/Lab5/src/pages/Page5.jsx
@ -1,43 +1,94 @@
 import PropTypes from 'prop-types';
-import { Container } from 'react-bootstrap';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import {
+    Container, Row, Image, Card, Button,
+} from 'react-bootstrap';
+import { ArrowLeft } from 'react-bootstrap-icons';
 import Carousel from 'react-bootstrap/Carousel';
-import CartAdvert from '../components/advert/CartAdvert.jsx';
+import useHomeItem from '../components/lines/hooks/SelectHomePage';
+// import CartAdvert from '../components/advert/CartAdvert.jsx';
 import Image6 from '../assets/Image6.jpg';
 import Image7 from '../assets/Image7.jpg';
 import Image9 from '../assets/Image9.jpg';
 import './Page5.css';

 const Page5 = () => {
+    const { id } = useParams();
+    const { item } = useHomeItem(id);
+    let itemname = 'подгрузка)';
+    if (item.type) {
+        itemname = item.type.name;
+    }
+
+    const ForwardGoOrder = useNavigate();
+
+    const GoOrder = () => {
+        ForwardGoOrder('/pageOrder');
+    };
+
+    const GoBack = () => {
+        ForwardGoOrder('/pageMyBulletin');
+    };
+
    return (
        <>
-            <Container fluid></Container>
-            <article>
-            <div className="row mb-5 mx-auto w-100">
-                <CartAdvert/>
+            <div className='mb-1 align-items-center text-center'>
+                <strong className='flex-fill cart-text text-center me-5'> Объявление </strong>
+                <Button className='buttback text-end ms-5' variant='danger' type='submit' onClick={() => GoBack()}>
+                    <ArrowLeft /> <Link to="/pageMyBulletin" className='textlinkcart'> Вернуться назад </Link>
+                </Button>
            </div>

-            <div className="row margo me-4 ms-4 mt-5 mb-3 mx-auto">
-            <Carousel data-bs-theme="dark">
-                <Carousel.Item>
-                    <img className="d-block w-100" src={Image7} alt="First slide"/>
-                <Carousel.Caption>
-                    <div className='slide1'> <h5>First slide label</h5> </div>
-                </Carousel.Caption>
-                </Carousel.Item>
-                <Carousel.Item>
-                    <img className="d-block w-100" src={Image9} alt="Second slide"/>
-                <Carousel.Caption>
-                    <div className='slide1'> <h5>Second slide label</h5> </div>
-                </Carousel.Caption>
-                </Carousel.Item>
-                <Carousel.Item>
-                    <img className="d-block w-100" src={Image6} alt="Third slide"/>
-                <Carousel.Caption>
-                    <div className='slide1'> <h5>Third slide label</h5> </div>
-                </Carousel.Caption>
-                </Carousel.Item>
-            </Carousel>
-            </div>
+            <Container fluid>
+                <Row className='m-5'>
+                    <Image src={item.image}
+                        className='rounded mx-auto d-block img-fluid' id="carPageCar" />
+                    <div className='p-2'>
+                        <Card className='w-100'>
+                            <Card.Body>
+                                <Card.Title id='lutiText'>{itemname} {item.model}</Card.Title>
+                                <Card.Text className='textus1'> Описание объявления</Card.Text>
+                                <Card.Text id='lutiText'>
+                                    {item.description}
+                                </Card.Text>
+                                <Card.Text className='textus33 me-5' id='lutiText'>
+                                    Цена: {item.price}₽
+                                </Card.Text>
+                                <Card.Text id='lutiText' className='textus3'>
+                                    Номер телефона: +7(900)-785-84-56
+                                </Card.Text>
+                                    <Button className='buttord1' onSubmit={GoOrder} variant="success" type="submit">
+                                        <Link to="/OrderPage" className='textlinkcart'> Оформить заказ </Link>
+                                    </Button>
+                            </Card.Body>
+                        </Card>
+                    </div>
+                </Row>
+            </Container>
+
+            <article>
+                <div className="row margo me-4 ms-4 mt-5 mb-3 mx-auto">
+                    <Carousel data-bs-theme="dark">
+                        <Carousel.Item>
+                            <img className="d-block w-100" src={Image7} alt="First slide" />
+                            <Carousel.Caption>
+                                <div className='slide1'> <h5>First slide label</h5> </div>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                        <Carousel.Item>
+                            <img className="d-block w-100" src={Image9} alt="Second slide" />
+                            <Carousel.Caption>
+                                <div className='slide1'> <h5>Second slide label</h5> </div>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                        <Carousel.Item>
+                            <img className="d-block w-100" src={Image6} alt="Third slide" />
+                            <Carousel.Caption>
+                                <div className='slide1'> <h5>Third slide label</h5> </div>
+                            </Carousel.Caption>
+                        </Carousel.Item>
+                    </Carousel>
+                </div>
            </article>
        </>
    );
--- a/Lab5/src/pages/PageMain.jsx
+++ b/Lab5/src/pages/PageMain.jsx
@ -2,7 +2,6 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Container, Row, Button } from 'react-bootstrap';
 import Banner from '../components/banner/Banner.jsx';
 import Image1 from '../assets/Image2.png';
-import { GetUserId } from '../components/login/users/UserReducer';
 import './PageMain.css';

 const PageMain = () => {
@ -16,9 +15,6 @@ const PageMain = () => {
        ForwardGo('/LogIn');
    };

-    const id = GetUserId();
-    console.log(id);
-
    const image = [Image1];
    return (
        <>
--- a/Lab5/vite.config.js
+++ b/Lab5/vite.config.js
@ -1,13 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    sourcemap: true,
-    chunkSizeWarningLimit: 1024,
-    emptyOutDir: true,
-  },
-});
--- a/Lab5/Лабораторная
+++ b/Lab5/Лабораторная