lab5_code

.eslintrc.cjs

@@ -22,3 +22,4 @@ module.exports = {
     'implicit-arrow-linebreak': 'off',
   },
 }
+

README.md

@@ -1,9 +1,14 @@
-#### Окружение:
-- nodejs 18;
-- VSCode;
-- ESLint плагин для VSCode;
+### Окружение:
+- [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
@@ -16,14 +21,24 @@ npm create vite@latest ./ -- --template react
 npm install
 ```
 
-#### Запуск проекта:
+#### Запуск проекта в режиме разработки (development):
 
 ```commandline
 npm run dev
 ```
 
-#### Сборка проекта:
+#### Запуск проекта в продуктовом режиме (production):
 
 ```commandline
-npm run build
-```
+npm run prod
+```
+
+### Полезные ссылки
+
+1. Global Object - https://developer.mozilla.org/en-US/docs/Glossary/Global_object
+2. Global Scope - https://developer.mozilla.org/en-US/docs/Glossary/Global_scope
+3. localStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
+4. JavaScript Execution Context – How JS Works Behind The Scenes - https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/
+5. Extracting State Logic into a Reducer - https://react.dev/learn/extracting-state-logic-into-a-reducer
+6. Passing Data Deeply with Context - https://react.dev/learn/passing-data-deeply-with-context
+7. Scaling Up with Reducer and Context - https://react.dev/learn/scaling-up-with-reducer-and-context

jsconfig.json

@@ -5,7 +5,8 @@
         "target": "ES2020",
         "jsx": "react",
         "strictNullChecks": true,
-        "strictFunctionTypes": true
+        "strictFunctionTypes": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",

json-server.json

@@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}

package.json

@@ -4,15 +4,18 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "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",
@@ -20,13 +23,16 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@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"
   }
-}
+}

src/App.jsx

@@ -1,19 +1,24 @@
 import PropTypes from 'prop-types';
 import { Container } from 'react-bootstrap';
+import { Toaster } from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
-import './App.css';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
+import { SearchProvider } from './components/navigation/SearchContext.jsx';
+import { CartProvider } from './components/cart/CartContext.jsx';
 
 const App = ({ routes }) => {
   return (
-    <>
-      <Navigation routes={routes}></Navigation>
-      <Container className="d-flex flex-column justify-content-center flex-grow-1" as="main" fluid="md">
-        <Outlet />
-      </Container>
-      <Footer />
-    </>
+    <CartProvider>
+      <SearchProvider>
+        <Navigation routes={routes}></Navigation>
+        <Container className="d-flex flex-column flex-grow-1" as="main" fluid="md">
+          <Outlet />
+        </Container>
+        <Footer />
+        <Toaster position='top-center' reverseOrder={true} />
+      </SearchProvider>
+    </CartProvider>
   );
 };
 

src/components/api/ApiClient.js

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+    constructor(message = '') {
+        super(message);
+        this.name = 'HttpError';
+        Object.setPrototypeOf(this, new.target.prototype);
+        toast.error(message, { id: 'HttpError' });
+    }
+}
+
+function responseHandler(response) {
+    if (response.status === 200 || response.status === 201) {
+        const data = response?.data;
+        if (!data) {
+            throw new HttpError('API Error. No data!');
+        }
+        return data;
+    }
+    throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+    if (error === null) {
+        throw new Error('Unrecoverable error!! Error is null!');
+    }
+    toast.error(error.message, { id: 'AxiosError' });
+    return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+    baseURL: 'http://localhost:8081/',
+    timeout: '3000',
+    headers: {
+        Accept: 'application/json',
+    },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);

src/components/api/ApiService.js

@@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+
+    async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiService;

src/components/cart/Cart.jsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import Trash from '../../assets/icons/trash.png';
+import Item from '../cartItem/CartItem.jsx';
+import useCart from './CartHook';
+
+const Cart = () => {
+    const {
+        cart,
+        getCartSum,
+        clearCart,
+        numMorph,
+    } = useCart();
+
+    const handleOrder = async () => {
+      clearCart();
+      toast.success('Заказ оформлен!');
+    };
+
+    const [linesText, setLinesText] = useState('');
+
+    useEffect(() => {
+        setLinesText(numMorph(cart.length, 'товар', 'товара', 'товаров'));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [cart.length]);
+
+    return (
+        <div className="row gy-3 mb-1">
+        <div className="col-12 mb-3 mb-sm-4 mt-0 px-0">
+          <div
+            className="block d-flex justify-content-center lh-1"
+            id="cart-title"
+          >
+            Моя корзина
+          </div>
+        </div>
+        <div className="col-8 px-0">
+          <div
+            className="block d-flex align-items-end lh-1"
+            id="cart-items-num-text"
+          >
+            В корзине {cart.length} {linesText}:
+          </div>
+        </div>
+        <div className="col-4 d-flex justify-content-end px-0">
+          <div className="block align-self-end">
+            <button className="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0" onClick={() => clearCart()}>
+              <img
+                src={Trash}
+                className="trash-icon me-sm-2"
+                alt="trash"
+                width="24"
+                height="24"
+              />
+              Удалить все
+            </button>
+          </div>
+        </div>
+        {cart.map((cartItem) => (
+            <Item
+            key = {cartItem.id}
+            info={{
+              cartItem,
+              trash: Trash,
+            }}
+            />
+        ))}
+        <div className="col-12 pt-3 border-top border-black px-0">
+          <div
+            className="block d-flex justify-content-end align-items-end lh-1"
+            id="cart-final-price"
+          >
+            <span className="me-4" id="cart-final-price-text">
+              Итого:
+            </span>
+            <span id="cart-final-price-value"> {`${parseInt(getCartSum(), 10)} р.`} </span>
+          </div>
+        </div>
+        <div className="col-12 px-0">
+          <div className="block d-flex justify-content-end">
+            {
+              cart.length === 0 && (
+              <button className="btn rounded-5" id="cart-btn-checkout" disabled>
+                 Перейти к оформлению
+              </button>)
+            }
+            {
+              cart.length > 0 && (
+              <button className="btn rounded-5" id="cart-btn-checkout" onClick={() => handleOrder()}>
+                 Перейти к оформлению
+              </button>)
+            }
+          </div>
+        </div>
+      </div>
+    );
+};
+
+export default Cart;

src/components/cart/CartContext.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import {
+    createContext,
+    useEffect,
+    useReducer,
+} from 'react';
+import { cartReducer, loadCart, saveCart } from './CartReducer';
+
+const CartContext = createContext(null);
+
+export const CartProvider = ({ children }) => {
+    const [cart, dispatch] = useReducer(cartReducer, [], loadCart);
+
+    useEffect(() => {
+        saveCart(cart || []);
+    }, [cart]);
+
+    return (
+        <CartContext.Provider value={{ cart, dispatch }}>
+            {children}
+        </CartContext.Provider>
+    );
+};
+
+CartProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default CartContext;

src/components/cart/CartHook.js

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import CartContext from './CartContext.jsx';
+import { cartAdd, cartClear, cartRemove } from './CartReducer';
+
+const useCart = () => {
+    const { cart, dispatch } = useContext(CartContext);
+
+    const cartSum = () => {
+        return parseFloat(
+            cart?.reduce((sum, cartItem) => {
+                return sum + (cartItem.price * cartItem.count);
+            }, 0)
+            ?? 0,
+        ).toFixed(2);
+    };
+
+    const numMorph = (n, f1, f2, f5) => {
+        const n1 = Math.abs(n) % 100;
+
+        if (n1 >= 11 && n1 <= 19) return f5;
+
+        const n2 = n % 10;
+        if (n2 === 1) return f1;
+        if (n2 > 1 && n2 < 5) return f2;
+        return f5;
+    };
+
+    const isPresent = (id) => {
+        return cart.some((book) => book.id === id);
+    };
+
+    return {
+        cart,
+        getCartSum: () => cartSum(),
+        addToCart: (item) => dispatch(cartAdd(item)),
+        removeFromCart: (item, instant) => dispatch(cartRemove(item, instant)),
+        clearCart: () => dispatch(cartClear()),
+        numMorph,
+        isPresent,
+    };
+};
+
+export default useCart;

src/components/cart/CartReducer.js

@@ -0,0 +1,74 @@
+const setCartCount = (cart, item, value) => {
+    return cart.map((cartItem) => {
+        if (cartItem.id === item.id) {
+            return { ...cartItem, count: cartItem.count + value };
+        }
+        return cartItem;
+    });
+};
+
+const addToCart = (cart, item) => {
+    const existsItem = cart.find((cartItem) => cartItem.id === item.id);
+    if (existsItem !== undefined) {
+        return setCartCount(cart, item, 1);
+    }
+    return [...cart, { ...item, count: 1 }];
+};
+
+const removeFromCart = (cart, item, instant) => {
+    if (instant) {
+        return cart.filter((cartItem) => cartItem.id !== item.id);
+    }
+    const existsItem = cart.find((cartItem) => cartItem.id === item.id);
+    if (existsItem !== undefined && existsItem.count > 1) {
+        return setCartCount(cart, item, -1);
+    }
+    return cart.filter((cartItem) => cartItem.id !== item.id);
+};
+
+const CART_KEY = 'localCart';
+const CART_ADD = 'cart/add';
+const CART_REMOVE = 'cart/remove';
+const CART_CLEAR = 'cart/clear';
+
+export const saveCart = (cart) => {
+    localStorage.setItem(CART_KEY, JSON.stringify(cart));
+};
+
+export const loadCart = (initialValue = []) => {
+    const cartData = localStorage.getItem(CART_KEY);
+    if (cartData) {
+        return JSON.parse(cartData);
+    }
+    return initialValue;
+};
+
+export const cartReducer = (cart, action) => {
+    const { item, instant } = action;
+    switch (action.type) {
+        case CART_ADD: {
+            return addToCart(cart, item);
+        }
+        case CART_REMOVE: {
+            return removeFromCart(cart, item, instant);
+        }
+        case CART_CLEAR: {
+            return [];
+        }
+        default: {
+            throw Error(`Unknown action: ${action.type}`);
+        }
+    }
+};
+
+export const cartAdd = (item) => ({
+    type: CART_ADD, item,
+});
+
+export const cartRemove = (item, instant) => ({
+    type: CART_REMOVE, item, instant,
+});
+
+export const cartClear = () => ({
+    type: CART_CLEAR,
+});

src/components/cartItem/CartItem.jsx

@@ -1,12 +1,19 @@
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Desktop from './cartItemDesktop/CartItemDesktop.jsx';
 import Mobile from './cartItemMobile/CartItemMobile.jsx';
 
 const CartItem = ({ info }) => {
+    const [count, setCount] = useState(info.cartItem.count);
+
+    useEffect(() => {
+      setCount(info.cartItem.count);
+    }, [info.cartItem.count]);
+
     return (
       <>
-        <Desktop info={info} />
-        <Mobile info={info} />
+        <Desktop info={info} count={count}/>
+        <Mobile info={info} count={count}/>
       </>
     );
 };

src/components/cartItem/cartItemDesktop/CartItemDesktop.jsx

@@ -1,55 +1,83 @@
 import PropTypes from 'prop-types';
+import useCart from '../../cart/CartHook';
+import imgPlaceholder from '../../../assets/icons/placeholder_400_600.png';
+
+const CartItemDesktop = ({ info, count }) => {
+  const {
+    addToCart,
+    removeFromCart,
+  } = useCart();
+
+  const price = `${parseInt(info.cartItem.price, 10)} р.`;
+  const countPrice = `${parseInt(info.cartItem.price * info.cartItem.count, 10)} р.`;
 
-const CartItemDesktop = ({ info }) => {
   return (
     <>
-      <div className="col-2 border-top border-black pt-3 d-sm-none">
+      <div className="col-1 border-top border-black pt-3 d-none d-sm-block">
         <div className="block">
           <img
-            src={info.cover}
+            src={info.cartItem.image || imgPlaceholder}
             className="cart-book-cover me-3"
-            alt="cart-book-cover"
+            alt="cart-book-cover-1"
             width="88"
             height="138"
           />
         </div>
       </div>
-      <div className="col-10 pt-3 border-top border-black d-sm-none">
-        <div className="block ms-4">
-          <p className="cart-book-description-title mb-2">{info.title}</p>
-          <p className="cart-book-description-author mb-2">{info.author}</p>
-          <p className="cart-price mb-2">{info.price}</p>
-          <div className="d-flex align-items-center">
-            <button
-              type="button"
-              className="button-minus border border-end-0 rounded-start bg-white"
-            >
-              –
-            </button>
-            <label className="cart-input-label d-flex">
+      <div className="col-6 pt-3 border-top border-black d-none d-sm-block">
+        <div className="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
+          <p className="cart-book-description-title mb-2">{info.cartItem.title}</p>
+          <p className="cart-book-description-author">{info.cartItem.author}</p>
+        </div>
+      </div>
+      <div className="col-3 pt-2 border-top border-black d-none d-sm-block">
+        <div className="block d-flex align-items-start justify-content-end">
+          <button
+            type="button"
+            className="button-minus border border-end-0 rounded-start bg-white"
+            onClick={() => removeFromCart(info.cartItem, false)}
+          >
+            –
+          </button>
+          <label className="cart-input-label">
               <input
+                readOnly
                 type="tel"
-                className="cart-input h-100 w-100 border text-center"
+                className="cart-input h-100 w-100 border text-center p-0"
                 placeholder="1"
+                value={count}
               />
-            </label>
-            <button
-              type="button"
-              className="button-plus border border-start-0 rounded-end bg-white"
-            >
-              +
-            </button>
-            <div className="flex-grow-1"></div>
-            <button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
-              <img
-                src={info.trash}
-                className="trash-icon"
-                alt="trash"
-                width="24"
-                height="24"
-              />
-            </button>
-          </div>
+          </label>
+          <button
+            type="button"
+            className="button-plus border border-start-0 rounded-end bg-white"
+            onClick={() => addToCart(info.cartItem)}
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <div className="col-2 pt-3 border-top border-black d-none d-sm-block">
+        <div className="block d-flex flex-column align-items-end h-100">
+          <p className="cart-price">{price}</p>
+          <p className="cart-price-count text-secondary mt-3">
+            {parseInt(info.cartItem.price, 10)}
+            {' * '}
+            {info.cartItem.count}
+            {' = '}
+            {countPrice}
+          </p>
+          <div className="flex-grow-1"></div>
+          <button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0" onClick={() => removeFromCart(info.cartItem, true)}>
+            <img
+              src={info.trash}
+              className="trash-icon me-2"
+              alt="trash"
+              width="24"
+              height="24"
+            />
+            Удалить
+          </button>
         </div>
       </div>
     </>
@@ -58,6 +86,7 @@ const CartItemDesktop = ({ info }) => {
 
 CartItemDesktop.propTypes = {
   info: PropTypes.object,
+  count: PropTypes.number,
 };
 
 export default CartItemDesktop;

src/components/cartItem/cartItemMobile/CartItemMobile.jsx

@@ -1,62 +1,77 @@
 import PropTypes from 'prop-types';
+import useCart from '../../cart/CartHook';
+import imgPlaceholder from '../../../assets/icons/placeholder_400_600.png';
+
+const CartItemMobile = ({ info, count }) => {
+  const {
+    addToCart,
+    removeFromCart,
+  } = useCart();
+
+  const price = `${parseInt(info.cartItem.price, 10)} р.`;
+  const countPrice = `${parseInt(info.cartItem.price * info.cartItem.count, 10)} р.`;
 
-const CartItemMobile = ({ info }) => {
   return (
     <>
-      <div className="col-1 border-top border-black pt-3 d-none d-sm-block">
+      <div className="col-2 border-top border-black pt-3 d-sm-none">
         <div className="block">
           <img
-            src={info.cover}
+            src={info.cartItem.image || imgPlaceholder}
             className="cart-book-cover me-3"
-            alt="cart-book-cover-1"
+            alt="cart-book-cover"
             width="88"
             height="138"
           />
         </div>
       </div>
-      <div className="col-6 pt-3 border-top border-black d-none d-sm-block">
-        <div className="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
-          <p className="cart-book-description-title mb-2">{info.title}</p>
-          <p className="cart-book-description-author">{info.author}</p>
-        </div>
-      </div>
-      <div className="col-3 pt-2 border-top border-black d-none d-sm-block">
-        <div className="block d-flex align-items-start justify-content-end">
-          <button
-            type="button"
-            className="button-minus border border-end-0 rounded-start bg-white"
-          >
-            –
-          </button>
-          <label className="cart-input-label">
-            <input
-              type="tel"
-              className="cart-input h-100 w-100 border text-center"
-              placeholder="1"
-            />
-          </label>
-          <button
-            type="button"
-            className="button-plus border border-start-0 rounded-end bg-white"
-          >
-            +
-          </button>
-        </div>
-      </div>
-      <div className="col-2 pt-3 border-top border-black d-none d-sm-block">
-        <div className="block d-flex flex-column align-items-end h-100">
-          <p className="cart-price">{info.price}</p>
-          <div className="flex-grow-1"></div>
-          <button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
-            <img
-              src={info.trash}
-              className="trash-icon me-2"
-              alt="trash"
-              width="24"
-              height="24"
-            />
-            Удалить
-          </button>
+      <div className="col-10 pt-3 border-top border-black d-sm-none">
+        <div className="block ms-4">
+          <p className="cart-book-description-title mb-2">{info.cartItem.title}</p>
+          <p className="cart-book-description-author mb-2">{info.cartItem.author}</p>
+          <div className="d-flex mb-2">
+            <p className="cart-price me-3">{price}</p>
+            <p className="cart-price-count text-secondary text-center lh-sm mt-1" id="mobile-price-count">
+            {parseInt(info.cartItem.price, 10)}
+            {' * '}
+            {info.cartItem.count}
+            {' = '}
+            {countPrice}
+            </p>
+          </div>
+          <div className="d-flex align-items-center">
+            <button
+              type="button"
+              className="button-minus border border-end-0 rounded-start bg-white"
+              onClick={() => removeFromCart(info.cartItem, false)}
+            >
+              –
+            </button>
+            <label className="cart-input-label d-flex">
+              <input
+                readOnly
+                type="tel"
+                className="cart-input h-100 w-100 border text-center"
+                value={count}
+              />
+            </label>
+            <button
+              type="button"
+              className="button-plus border border-start-0 rounded-end bg-white"
+              onClick={() => addToCart(info.cartItem)}
+            >
+              +
+            </button>
+            <div className="flex-grow-1"></div>
+            <button className="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0" onClick={() => removeFromCart(info.cartItem, true)}>
+              <img
+                src={info.trash}
+                className="trash-icon"
+                alt="trash"
+                width="24"
+                height="24"
+              />
+            </button>
+          </div>
         </div>
       </div>
     </>
@@ -65,6 +80,7 @@ const CartItemMobile = ({ info }) => {
 
 CartItemMobile.propTypes = {
   info: PropTypes.object,
+  count: PropTypes.number,
 };
 
 export default CartItemMobile;

src/components/cartItems/hooks/CartItemsHook.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import CartItemsApiService from '../service/CartItemsApiService';
+
+const useCartItems = (userFilter) => {
+    const [cartItems, setCartItems] = useState([]);
+
+    const getCartItems = async () => {
+        let expand = '';
+        if (userFilter) {
+            expand = `?userId=${userFilter}`;
+        }
+        const data = await CartItemsApiService.getAll(expand);
+        setCartItems(data ?? []);
+    };
+
+    useEffect(() => {
+        getCartItems();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userFilter]);
+
+    return {
+        cartItems,
+        setCartItems,
+    };
+};
+
+export default useCartItems;

src/components/cartItems/service/CartItemsApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const CartItemsApiService = new ApiService('cart-items');
+
+export default CartItemsApiService;

src/components/catalog/Catalog.jsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import Book from '../catalogBook/CatalogBook.jsx';
+import useCategoryFilter from '../lines/hooks/LinesFilterHook';
+import useLines from '../lines/hooks/LinesHook';
+import useCategoriesItem from '../categories/hooks/CategoriesItemHook';
+import usePagination from '../pagination/hooks/PaginationHook';
+import Select from '../sortSelect/SortSelect.jsx';
+import Pagination from '../pagination/Pagination.jsx';
+import useUser from '../users/hooks/UserHook';
+
+const Catalog = ({ id }) => {
+  const { categories } = useCategoryFilter();
+  const { item } = useCategoriesItem(id);
+
+  const { lines } = useLines(id);
+  const [sortedLines, setSortedLines] = useState(lines);
+
+  const {
+  items, numbers, prevPage, changeCPage, nextPage, currPage,
+  } = usePagination(sortedLines, 8);
+
+  const idUser = parseInt(localStorage.getItem('CurrentUser'), 10) || -1;
+  const currUser = useUser(idUser).user;
+
+  useEffect(() => {
+    const mainElement = document.querySelector('main');
+
+    if (mainElement) {
+      mainElement.classList.add('my-0');
+    }
+
+    return () => {
+      if (mainElement) {
+        mainElement.classList.remove('my-0');
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div className="row gy-3 flex-grow-1">
+        <div
+          className="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0"
+          id="catalog-categories"
+        >
+          <div className="block d-flex flex-column justify-content-center p-2 h-100">
+            <p className="mb-4 mt-2" id="catalog-categories-title">
+              Категории
+            </p>
+            <ul
+              className="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1"
+              id="catalog-categories-list"
+            >
+              {categories.map((category) => (
+                <li
+                  className={
+                    category.name === item.name ? 'active-category' : ''
+                  }
+                  key={category.id}
+                >
+                  <Link to={`/pageCatalog/${category.id}`}>
+                    {category.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-3">
+          <div className="row gy-3">
+            <div className="col-12 mb-3 mb-lg-5 px-0 d-md-none">
+              <div
+                className="block d-flex lh-1"
+                id="catalog-section-navigation"
+              >
+                <Link
+                  to="/pageCatalogMobile"
+                  className="me-2 text-decoration-none"
+                >
+                  Каталог
+                </Link>
+                <span className="text-secondary me-2"> {'>'} </span>
+                <Link
+                  to={`/pageCatalog/${id}`}
+                  className="text-decoration-none"
+                >
+                  {item.name}
+                </Link>
+              </div>
+            </div>
+            <div className="col-12 mb-3 mb-lg-5 px-0">
+              <div
+                className="block d-flex justify-content-center lh-1"
+                id="catalog-title"
+              >
+                <div>{item.name}</div>
+              </div>
+            </div>
+            <div className="col-12 mb-3 mb-lg-5 gx-0">
+              <div className="block">
+                <Select
+                  setLines={setSortedLines}
+                  initialLines={lines}
+                  storageName='sortType'
+                />
+              </div>
+            </div>
+            {items.map((line) => (
+              <Book
+                key={line.id}
+                description={{
+                  id: line.id,
+                  cover: line.image,
+                  price: `${parseInt(line.price, 10)} ₽`,
+                  title: line.title,
+                  author: line.author,
+                  destination: `/pageProductСard/${line.id}`,
+                }}
+              />
+            ))}
+          </div>
+          {
+             currUser.id !== '' && currUser.isAdmin && (
+                  <Link to="/pageAdmin" className="text-dark fw-bolder mt-5 text-decoration-none">
+                      Админ.
+                  </Link>
+            )
+          }
+          <div className="d-flex flex-grow-1"></div>
+          <nav className="block mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0 table-responsive">
+            <Pagination
+              numbers={numbers}
+              prevPage={prevPage}
+              changeCPage={changeCPage}
+              nextPage={nextPage}
+              currPage={currPage}
+            />
+          </nav>
+        </div>
+      </div>
+    </>
+  );
+};
+
+Catalog.propTypes = {
+  id: PropTypes.string,
+};
+
+export default Catalog;

src/components/catalogBook/CatalogBook.jsx

@@ -1,31 +1,48 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import imgPlaceholder from '../../assets/icons/placeholder_400_600.png';
+import useLinesItem from '../lines/hooks/LinesItemHook';
+import useCart from '../cart/CartHook';
 
 const CatalogBook = ({ description }) => {
+  const { item } = useLinesItem(description.id);
+  const { addToCart, isPresent } = useCart();
+
     return (
       <div className="col-sm-6 col-md-4 col-lg-3 mt-4">
         <div className="block d-flex flex-column h-100">
             <div className="d-flex justify-content-center mb-4">
                 <Link to={description.destination}>
-                  <img src={description.cover} className="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245" />
+                  <img src={description.cover || imgPlaceholder} className="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245" />
                 </Link>
             </div>
             <div className="catalog-book-description d-flex flex-column align-items-start">
                 <p className="catalog-price mb-3">
-                  {description.price}
+                  {description.price || ''}
                 </p>
                 <p className="catalog-book-title mb-3">
-                  {description.title}
+                  {description.title || ''}
                 </p>
                 <p className="catalog-author mb-3">
-                  {description.author}
+                  {description.author || ''}
                 </p>
             </div>
             <div className="flex-grow-1"></div>
             <div className="catalog-btn-checkout-div d-flex justify-content-start">
-                <button className="catalog-bth-checkout btn rounded-5 px-3">
-                    В корзину
-                </button>
+                {
+                  isPresent(description.id) && (
+                    <button className="catalog-bth-checkout btn rounded-5 px-3 btn-info" disabled>
+                       Уже в корзине
+                    </button>
+                  )
+                }
+                {
+                  !isPresent(description.id) && (
+                    <button className="catalog-bth-checkout btn rounded-5 px-3" onClick={() => addToCart(item)}>
+                      В корзину
+                    </button>
+                  )
+                }
             </div>
         </div>
       </div>

src/components/catalogSelect/CatalogSelect.jsx

@@ -1,15 +0,0 @@
-import Form from 'react-bootstrap/Form';
-
-const CatalogSelect = () => {
-  return (
-    <Form.Select aria-label="catalogSelect" className="border-black" id="catalog-select">
-      <option>Сначала популярные</option>
-      <option value="1">Сначала дешевые</option>
-      <option value="2">Сначала дорогие</option>
-      <option value="3">Сначала со скидкой</option>
-      <option value="4">Сначала новые</option>
-    </Form.Select>
-  );
-};
-
-export default CatalogSelect;

src/components/categories/hooks/CategoriesHook.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import CategoriesApiService from '../service/CategoriesApiService';
+
+const useCategories = () => {
+    const [categories, setCategories] = useState([]);
+
+    const getCategories = async () => {
+        const data = await CategoriesApiService.getAll();
+        setCategories(data ?? []);
+    };
+
+    useEffect(() => {
+        getCategories();
+    }, []);
+
+    return {
+        categories,
+    };
+};
+
+export default useCategories;

src/components/categories/hooks/CategoriesItemHook.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import CategoriesApiService from '../service/CategoriesApiService';
+
+const useCategoriesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        name: '',
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await CategoriesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+    };
+};
+
+export default useCategoriesItem;

src/components/categories/service/CategoriesApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const CategoriesApiService = new ApiService('categories');
+
+export default CategoriesApiService;

src/components/input/Input.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Input = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+Input.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Input;

src/components/input/Select.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Select = ({
+    values, name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((сategory) =>
+                    <option key={сategory.id} value={сategory.id}>{сategory.name}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+Select.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Select;

src/components/input/TextArea.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const TextArea = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control as="textarea" rows="3" name={name || ''} value={value || ''}
+            onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+TextArea.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default TextArea;

src/components/lines/form/LinesForm.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import useLinesItemForm from '../hooks/LinesItemFormHook';
+import LinesItemForm from './LinesItemForm.jsx';
+
+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 (
+        <>
+            <div className="row justify-content-center">
+                <Form className='col-lg-8 col-xl-7 col-xxl-6' noValidate validated={validated} onSubmit={onSubmit}>
+                    <LinesItemForm item={item} handleChange={handleChange} />
+                    <Form.Group className='text-center mb-5 d-flex flex-column'>
+                        <Button className='edit-btn w-25 rounded-5' type='submit' variant='primary'>
+                            Сохранить
+                        </Button>
+                        <Button className='edit-btn w-25 mt-4' variant='secondary' onClick={() => onBack()}>
+                            Назад
+                        </Button>
+                    </Form.Group>
+                </Form>
+            </div>
+        </>
+    );
+};
+
+LinesForm.propTypes = {
+    id: PropTypes.string,
+};
+
+export default LinesForm;

src/components/lines/form/LinesItemForm.jsx

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from '../../../assets/icons/placeholder_400_600.png';
+import Input from '../../input/Input.jsx';
+import Select from '../../input/Select.jsx';
+import TextArea from '../../input/TextArea.jsx';
+import useCategories from '../../categories/hooks/CategoriesHook';
+
+const LinesItemForm = ({ item, handleChange }) => {
+    const { categories } = useCategories();
+
+    return (
+        <>
+            <div className='text-center'>
+                <img id='image-preview' className='mb-4' alt='placeholder'
+                    src={item.image || imgPlaceholder} width={400} height={600} />
+            </div>
+            <Select values={categories} name='categoryId' label='Категории' value={item.categoryId} onChange={handleChange}
+                className='mb-4' required />
+            <Input name='title' label='Название книги' value={item.title} onChange={handleChange}
+               className='mb-4' type='text' required />
+            <Input name='author' label='Автор' value={item.author} onChange={handleChange}
+               className='mb-4' type='text' required />
+            <Input name='price' label='Цена' value={item.price} onChange={handleChange}
+               className='mb-4' type='number' min='100.0' step='0.50' required />
+            <Input name='count' label='Количество' value={item.count} onChange={handleChange}
+               className='mb-4' type='number' min='1' step='1' required />
+            <TextArea name='description' label='Описание книги' value={item.description}
+            onChange={handleChange} className='mb-4' />
+            <TextArea name='annotation' label='Аннотация' value={item.annotation}
+            onChange={handleChange} className='mb-4' />
+            <p className="mb-3">
+                Xарактеристики:
+            </p>
+            <div className="mb-4 border border-1 border-secondary p-2">
+                <Input name='bookIdCode' label='ID книги' value={item.bookIdCode} onChange={handleChange}
+                    className='mb-3' type='number' required />
+                <Input name='publisher' label='Издательство' value={item.publisher} onChange={handleChange}
+                    className='mb-3' type='text' />
+                <Input name='series' label='Серия' value={item.series} onChange={handleChange}
+                    className='mb-3' type='text' />
+                <Input name='publicationYear' label='Год издания' value={item.publicationYear} onChange={handleChange}
+                    className='mb-3' type='number' required />
+                <Input name='pagesNum' label='Количество страниц' value={item.pagesNum} onChange={handleChange}
+                    className='mb-3' type='number' />
+                <Input name='size' label='Размер' value={item.size} onChange={handleChange}
+                    className='mb-3' type='text' />
+                <Input name='coverType' label='Тип обложки' value={item.coverType} onChange={handleChange}
+                    className='mb-3' type='text' />
+                <Input name='circulation' label='Тираж' value={item.circulation} onChange={handleChange}
+                    className='mb-3' type='number' />
+                <Input name='weight' label='Вес, г' value={item.weight} onChange={handleChange}
+                    type='number' />
+            </div>
+            <Input name='image' label='Обложка книги' onChange={handleChange}
+               className='mb-4' type='file' accept='image/*' />
+        </>
+    );
+};
+
+LinesItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default LinesItemForm;

src/components/lines/hooks/LinesDeleteModalHook.js

@@ -0,0 +1,34 @@
+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;

src/components/lines/hooks/LinesFilterHook.js

@@ -0,0 +1,28 @@
+import { useSearchParams } from 'react-router-dom';
+import useСategories from '../../categories/hooks/CategoriesHook';
+
+const useCategoryFilter = () => {
+    const filterName = 'category';
+
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const { categories } = useСategories();
+
+    const handleFilterChange = (event) => {
+        const category = event.target.value;
+        if (category) {
+            searchParams.set(filterName, event.target.value);
+        } else {
+            searchParams.delete(filterName);
+        }
+        setSearchParams(searchParams);
+    };
+
+    return {
+        categories,
+        currentFilter: searchParams.get(filterName) || '',
+        handleFilterChange,
+    };
+};
+
+export default useCategoryFilter;

src/components/lines/hooks/LinesHook.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLines = (categoryFilter) => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        let expand = '?_expand=category';
+        if (categoryFilter) {
+            expand = `${expand}&categoryId=${categoryFilter}`;
+        }
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [linesRefresh, categoryFilter]);
+
+    return {
+        lines,
+        setLines,
+        handleLinesChange,
+    };
+};
+
+export default useLines;

src/components/lines/hooks/LinesItemFormHook.js

@@ -0,0 +1,107 @@
+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 categoryId = parseInt(formData.categoryId, 10);
+        const { title } = formData;
+        const { author } = formData;
+        const price = parseFloat(formData.price).toFixed(2);
+        const count = parseInt(formData.count, 10);
+        const sum = parseFloat(price * count).toFixed(2);
+        const { description } = formData;
+        const { annotation } = formData;
+        const bookIdCode = parseInt(formData.bookIdCode, 10);
+        const { publisher } = formData;
+        const { series } = formData;
+        const publicationYear = parseInt(formData.publicationYear, 10);
+        const pagesNum = parseInt(formData.pagesNum, 10);
+        const { size } = formData;
+        const { coverType } = formData;
+        const circulation = parseInt(formData.circulation, 10);
+        const weight = parseInt(formData.weight, 10);
+        const image = formData.image.startsWith('data:image') ? formData.image : '';
+        return {
+            categoryId: categoryId.toString(),
+            title: title.toString(),
+            author: author.toString(),
+            price: price.toString(),
+            count: count.toString(),
+            sum: sum.toString(),
+            description: description.toString(),
+            annotation: annotation.toString(),
+            bookIdCode: bookIdCode.toString(),
+            publisher: publisher.toString(),
+            series: series.toString(),
+            publicationYear: publicationYear.toString(),
+            pagesNum: pagesNum.toString(),
+            size: size.toString(),
+            coverType: coverType.toString(),
+            circulation: circulation.toString(),
+            weight: weight.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;

src/components/lines/hooks/LinesItemHook.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        categoryId: '',
+        title: '',
+        author: '',
+        price: '0',
+        count: '0',
+        description: '',
+        annotation: '',
+        bookIdCode: '',
+        publisher: '',
+        series: '',
+        publicationYear: '',
+        pagesNum: '',
+        size: '',
+        coverType: '',
+        circulation: '',
+        weight: '',
+        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 useLinesItem;

src/components/lines/service/LinesApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const LinesApiService = new ApiService('lines');
+
+export default LinesApiService;

src/components/lines/table/Lines.jsx

@@ -0,0 +1,62 @@
+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 useCategoryFilter from '../hooks/LinesFilterHook';
+import useLines from '../hooks/LinesHook';
+import LinesTable from './LinesTable.jsx';
+import LinesTableRow from './LinesTableRow.jsx';
+
+const Lines = () => {
+    const { categories, currentFilter, handleFilterChange } = useCategoryFilter();
+
+    const { lines, handleLinesChange } = useLines(currentFilter);
+
+    const {
+        isDeleteModalShow,
+        showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const navigate = useNavigate();
+
+    const showEditPage = (id) => {
+        navigate(`/pageAddItem/${id}`);
+    };
+
+    return (
+        <>
+            <div className="row gy-3">
+                <div className="col-12 px-0">
+                    <div className="block d-flex justify-content-center fs-2 fw-bold" id="admin-title">
+                    Панель администратора
+                    </div>
+                </div>
+                <Select className='сol-12 mb-4' values={categories} 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>
+                <div className="col-12 px-0 mb-2">
+                    <div className="block mb-4">
+                        <Link to="/pageAddItem" className="btn btn-primary">Добавить товар</Link>
+                    </div>
+                </div>
+                <ModalConfirm show={isDeleteModalShow}
+                onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
+                title='Удаление' message='Удалить элемент?' />
+            </div>
+        </>
+    );
+};
+
+export default Lines;

src/components/lines/table/LinesTable.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+const LinesTable = ({ children }) => {
+    return (
+        <div className="col-12 px-0">
+            <div className="block table-responsive">
+                <table className="table table-hover table-bordered align-middle">
+                    <thead>
+                    <tr>
+                        <th scope='col'>№</th>
+                        <th scope='col'>Название книги</th>
+                        <th scope='col'>Автор</th>
+                        <th scope='col'>Цена</th>
+                        <th scope='col'>Количество</th>
+                        <th scope='col'>Сумма</th>
+                        <th scope='col'>Категория каталога</th>
+                        <th scope='col'></th>
+                        <th scope='col'></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        {children}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+LinesTable.propTypes = {
+    children: PropTypes.node,
+};
+
+export default LinesTable;

src/components/lines/table/LinesTableRow.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+const LinesTableRow = ({
+    index, line, onDelete, onEditInPage,
+}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <tr>
+            <th scope="row">{index + 1}</th>
+            <td>{line.title}</td>
+            <td>{line.author}</td>
+            <td>{parseFloat(line.price).toFixed(2)}</td>
+            <td>{line.count}</td>
+            <td>{parseFloat(line.sum).toFixed(2)}</td>
+            <td>{line.category.name}</td>
+            <td>
+                <a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}>
+                    <button className='btn btn-primary w-100'>
+                        Редактировать
+                    </button>
+                 </a>
+            </td>
+            <td>
+                <a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}>
+                    <button className='btn btn-primary w-100'>
+                        Удалить
+                    </button>
+                </a>
+            </td>
+        </tr>
+    );
+};
+
+LinesTableRow.propTypes = {
+    index: PropTypes.number,
+    line: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEditInPage: PropTypes.func,
+};
+
+export default LinesTableRow;

src/components/login/hooks/LoginFormHook.js

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import useUsers from '../../users/hooks/UsersHook';
+import useUser from '../../users/hooks/UserHook';
+import { saveCart } from '../../cart/CartReducer';
+import CartItemsApiService from '../../cartItems/service/CartItemsApiService';
+
+const useLoginForm = () => {
+  const { user, setUser } = useUser();
+  const { users } = useUsers();
+  const [validated, setValidated] = useState(false);
+
+  const navigate = useNavigate();
+
+  const resetValidity = () => {
+      setValidated(false);
+  };
+
+  const getUserObject = (formData) => {
+      const { email } = formData;
+      const { password } = formData;
+
+      return {
+          email: email.toString(),
+          password: password.toString(),
+          isAdmin: false,
+      };
+  };
+
+  const handleChange = (event) => {
+      const inputName = event.target.name;
+      const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+      setUser({
+          ...user,
+          [inputName]: inputValue,
+      });
+  };
+
+  const handleSubmit = async (event) => {
+      const form = event.currentTarget;
+      event.preventDefault();
+      event.stopPropagation();
+      const body = getUserObject(user);
+      if (form.checkValidity()) {
+          const foundUser = users.find((tempUser) =>
+          tempUser.email === body.email && tempUser.password === body.password);
+          if (foundUser) {
+            localStorage.setItem('CurrentUser', foundUser.id);
+            localStorage.removeItem('localCart');
+            const cartItems = await CartItemsApiService.getAll();
+            const item = cartItems.find((cartItem) =>
+            parseInt(cartItem.userId, 10) === foundUser.id);
+            if (item) {
+                await CartItemsApiService.delete(item.id);
+                const cart = JSON.parse(item.cart);
+                saveCart(cart);
+            }
+            toast.success('Вы успешно вошли в аккаунт!');
+            navigate('/', { replace: true });
+            window.location.reload();
+            return true;
+          }
+      }
+      toast.error('Пользователя с такими данными не существует!');
+      setValidated(true);
+      return false;
+  };
+
+  return {
+      user,
+      validated,
+      handleSubmit,
+      handleChange,
+      resetValidity,
+  };
+};
+
+export default useLoginForm;

src/components/mainPageRow/MainPageRow.jsx

@@ -13,17 +13,20 @@ const MainPageRow = ({ title, books }) => {
           </div>
         </div>
         {
-          books.map((book) =>
-          <Book
-            key = {book.id}
-            description = {{
-              cover: book.cover,
-              price: book.price,
-              title: book.title,
-              author: book.author,
-              destination: book.destination,
-            }}
-          />)
+          books.map((book) => {
+            return book.id ? (
+              <Book
+                key={book.id}
+                description={{
+                  cover: book.image,
+                  price: `${parseInt(book.price, 10)} ₽`,
+                  title: book.title,
+                  author: book.author,
+                  destination: `/pageProductСard/${book.id}`,
+                }}
+              />
+            ) : null;
+          })
         }
     </div>
     );

src/components/mainPageRow/mainPageBook/MainPageBook.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import imgPlaceholder from '../../../assets/icons/placeholder_400_600.png';
 
 const MainPageBook = ({ description }) => {
     return (
@@ -7,18 +8,18 @@ const MainPageBook = ({ description }) => {
         <div className="block d-flex flex-column">
             <div className="d-flex justify-content-center">
               <Link to={description.destination}>
-                <img src={description.cover} className="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152" />
+                <img src={description.cover || imgPlaceholder} className="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152" />
               </Link>
             </div>
             <div className="d-flex flex-column align-items-center align-items-md-start">
                 <p className="main-page-price">
-                  {description.price}
+                  {description.price || ''}
                 </p>
                 <p className="main-page-book-title">
-                  {description.title}
+                  {description.title || ''}
                 </p>
                 <p className="main-page-author">
-                  {description.author}
+                  {description.author || ''}
                 </p>
             </div>
         </div>

src/components/modal/ModalConfirm.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+
+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;

src/components/modal/ModalHook.js

@@ -0,0 +1,21 @@
+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;

src/components/navigation/Navigation.jsx

@@ -1,59 +1,150 @@
 import PropTypes from 'prop-types';
+import { useContext } from 'react';
 import { Container, Navbar } from 'react-bootstrap';
-import { Link, NavLink } from 'react-router-dom';
+import {
+ Link, NavLink, useNavigate, useLocation,
+} from 'react-router-dom';
 import Cart from '../../assets/icons/card.png';
 import Logo from '../../assets/icons/logo.png';
+import SearchContext from './SearchContext.jsx';
+import useUser from '../users/hooks/UserHook';
+import useCart from '../cart/CartHook';
+import CartItemsApiService from '../cartItems/service/CartItemsApiService';
 
 const Navigation = ({ routes }) => {
     const indexPageLink = routes.filter((route) => route.index === false).shift();
 
+    const id = parseInt(localStorage.getItem('CurrentUser'), 10) || -1;
+    const currUser = useUser(id).user;
+
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const { cart } = useCart();
+
+    const { searchValue, updateSearchValue } = useContext(SearchContext);
+
+    const handleSearchKeyDown = (event) => {
+        if (event.key === 'Enter' && event.target.value.trim() !== '') {
+          navigate('/pageSearch', { replace: false });
+        }
+        console.log(cart);
+    };
+
+    const handleLogOut = async () => {
+      const userId = localStorage.getItem('CurrentUser').toString();
+
+      await CartItemsApiService.create({
+        userId,
+        cart: JSON.stringify(cart),
+      });
+
+      localStorage.removeItem('localCart');
+      localStorage.removeItem('CurrentUser');
+
+      navigate('/', { replace: false });
+      window.location.reload();
+    };
+
     return (
-        <header className = "w-100 position-sticky top-0 z-3">
-            <Navbar expand="lg" bg="white" data-bs-theme="white" className="my-nav">
-                <Container fluid="md">
-                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/' } className="me-lg-5 d-flex align-items-center" id="logo">
-                        <img src={Logo} alt="logo" className="me-2" />
-                        Читай-комната
-                    </Navbar.Brand>
-                    <Navbar.Toggle aria-controls='main-navbar' />
-                    <Navbar.Collapse id='main-navbar'>
-                        <ul className="navbar-nav align-items-lg-center justify-content-lg-start w-100">
-                            <li className="header-link nav-item ms-lg-2 me-lg-3">
-                                <NavLink to="/" className="nav-link">Главная</NavLink>
-                            </li>
-                            <li className="header-link nav-item me-lg-3">
-                                <NavLink to="/pageCatalog" className="nav-link">Каталог</NavLink>
-                            </li>
-                            <li className="header-link nav-item me-lg-5" id="header-contacts">
-                                <NavLink to="/pageContacts" className="nav-link">Контакты</NavLink>
-                            </li>
-                            <div className="flex-grow-1 me-lg-4" id="header-search">
-                                <input className="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar" />
-                            </div>
-                            <li className="nav-item">
-                                <NavLink to="/pageLogin" className="nav-link">Вход</NavLink>
-                            </li>
-                            <p className="d-none d-lg-block">
-                                /
-                            </p>
-                            <li className="nav-item me-lg-3">
-                                <NavLink to="/pageRegistration" className="nav-link">Регистрация</NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <NavLink to="/pageCart" className="nav-link">
-                                    <img src={Cart} alt="cart" width="30" height="35" id="cart-icon" />
-                                </NavLink>
-                            </li>
-                        </ul>
-                    </Navbar.Collapse>
-                </Container>
-            </Navbar >
-        </header>
+      <header className="w-100 position-sticky top-0 z-3">
+        <Navbar expand="lg" bg="white" data-bs-theme="white" className="my-nav">
+          <Container fluid="md">
+            <Navbar.Brand
+              as={Link}
+              to={indexPageLink?.path ?? '/'}
+              className="me-lg-5 d-flex align-items-center"
+              id="logo"
+            >
+              <img src={Logo} alt="logo" className="me-2" />
+              Читай-комната
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="main-navbar" />
+            <Navbar.Collapse id="main-navbar">
+              <ul className="navbar-nav align-items-lg-center justify-content-lg-start w-100">
+                <li className="header-link nav-item ms-lg-2 me-lg-3">
+                  <NavLink to="/" className="nav-link">
+                    Главная
+                  </NavLink>
+                </li>
+                <li className="header-link nav-item me-lg-3">
+                  <NavLink to="/pageCatalog/8" className="nav-link">
+                    Каталог
+                  </NavLink>
+                </li>
+                <li
+                  className="header-link nav-item me-lg-5"
+                  id="header-contacts"
+                >
+                  <NavLink to="/pageContacts" className="nav-link">
+                    Контакты
+                  </NavLink>
+                </li>
+                <div className="flex-grow-1 me-lg-4" id="header-search">
+                  <input
+                    className="form-control h-25"
+                    type="search"
+                    placeholder="Я ищу..."
+                    aria-label="Search"
+                    id="search-bar"
+                    value={searchValue}
+                    onChange={(e) => updateSearchValue(e.target.value)}
+                    onKeyDown={handleSearchKeyDown}
+                  />
+                </div>
+                {
+                  currUser.id !== '' && (
+                    <>
+                      <p className="header-part">{currUser.name}</p>
+                      <p className="header-part d-none d-lg-block">&nbsp;/&nbsp;</p>
+                      <button className="header-part astext text-white text-start me-lg-3" onClick={() => handleLogOut()}>Выйти</button>
+                    </>
+                  )
+                }
+                {
+                  currUser.id === '' && (
+                    <>
+                      <li className="nav-item">
+                      <NavLink to="/pageLogin" className="nav-link">
+                        Вход
+                      </NavLink>
+                      </li>
+                      <p className="d-none d-lg-block">/</p>
+                      <li className="nav-item me-lg-3">
+                      <NavLink to="/pageRegistration" className="nav-link">
+                        Регистрация
+                      </NavLink>
+                      </li>
+                    </>
+                  )
+                }
+                <li className="nav-item position-relative">
+                  <NavLink to="/pageCart" className={`nav-link ${location.pathname === '/pageCart' ? 'active-icon' : ''}`}>
+                    <img
+                      src={Cart}
+                      alt="cart"
+                      width={`${location.pathname === '/pageCart' ? '35' : '30'}`}
+                      height={`${location.pathname === '/pageCart' ? '40' : '35'}`}
+                      id="cart-icon"
+                    />
+                  </NavLink>
+                  {
+                    cart.length > 0 && (
+                      <span className="position-absolute" id="cart-link-count">{cart.length}</span>
+                    )
+                  }
+                </li>
+              </ul>
+            </Navbar.Collapse>
+          </Container>
+        </Navbar>
+      </header>
     );
 };
 
 Navigation.propTypes = {
     routes: PropTypes.array,
+    children: PropTypes.any,
 };
 
 export default Navigation;

src/components/navigation/SearchContext.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { createContext, useState } from 'react';
+
+const SearchContext = createContext();
+
+export const SearchProvider = ({ children }) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const updateSearchValue = (newSearchValue) => {
+    setSearchValue(newSearchValue);
+  };
+
+  return (
+    <SearchContext.Provider value={{ searchValue, updateSearchValue }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+SearchProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SearchContext;

src/components/pagination/Pagination.jsx

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const Pagination = ({
+    numbers, prevPage, changeCPage, nextPage, currPage,
+}) => {
+    const numbersPart = numbers.slice(0, 8);
+
+    return (
+      <ul className="pagination" id="catalog-page-navigation">
+        <li className="page-item">
+            <Link className="page-link" to="#" aria-label="Previous" onClick={prevPage}>
+              <span aria-hidden="true">&laquo;</span>
+            </Link>
+        </li>
+        {
+          numbers.length === 0 ? (
+            <li className={`page-item ${currPage === 1 ? 'active' : ''}`}>
+                <Link className="page-link" to="#" onClick={() => changeCPage(1)}>{1}</Link>
+            </li>
+          )
+          : numbersPart.map((number, index) => (
+            <li className={`page-item ${currPage === number ? 'active' : ''}`} key={index}>
+                <Link className="page-link" to="#" onClick={() => changeCPage(number)}>{number}</Link>
+            </li>
+          ))
+        }
+        {
+           numbers.length === 9 && (
+            <li className={`page-item ${currPage === 9 ? 'active' : ''}`}>
+                <Link className="page-link" to="#" onClick={() => changeCPage(9)}>{9}</Link>
+            </li>
+          )
+        }
+        {
+           numbers.length > 9 && (
+            <>
+             {currPage > 8 && currPage !== numbers.length && (
+                <li className="page-item active">
+                  <Link className="page-link" to="#" onClick={() => changeCPage(currPage)}>{currPage}</Link>
+                </li>
+              )}
+              <li className="page-item">
+                <span className="page-link text-dark">...</span>
+              </li>
+              <li className={`page-item ${currPage === numbers.length ? 'active' : ''}`}>
+                  <Link className="page-link" to="#" onClick={() => changeCPage(numbers.length)}>{numbers.length}</Link>
+              </li>
+            </>
+          )
+        }
+        <li className="page-item">
+            <Link className="page-link" to="#" aria-label="Previous" onClick={nextPage}>
+              <span aria-hidden="true">&raquo;</span>
+            </Link>
+        </li>
+      </ul>
+    );
+};
+
+Pagination.propTypes = {
+    numbers: PropTypes.array,
+    prevPage: PropTypes.func,
+    changeCPage: PropTypes.func,
+    nextPage: PropTypes.func,
+    currPage: PropTypes.number,
+};
+
+export default Pagination;

src/components/pagination/hooks/PaginationHook.js

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+const usePagination = (lines, linesPerPage) => {
+  const [currPage, setCurrPage] = useState(1);
+  const itemsPerPage = linesPerPage || 8;
+  const lastIndex = currPage * itemsPerPage;
+  const firstIndex = lastIndex - itemsPerPage;
+  const items = lines.slice(firstIndex, lastIndex);
+  const numPages = Math.ceil(lines.length / itemsPerPage);
+  const numbers = [...Array(numPages + 1).keys()].slice(1);
+
+  const prevPage = () => {
+    if (currPage !== 1) {
+      setCurrPage(currPage - 1);
+    }
+  };
+
+  const changeCPage = (num) => {
+    setCurrPage(num);
+  };
+
+  const nextPage = () => {
+    if (currPage !== numPages) {
+      setCurrPage(currPage + 1);
+    }
+  };
+
+    return {
+        items,
+        numbers,
+        prevPage,
+        changeCPage,
+        nextPage,
+        currPage,
+    };
+};
+
+export default usePagination;

src/components/productCard/ProductCard.jsx

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from '../../assets/icons/placeholder_400_600.png';
+import useLinesItem from '../lines/hooks/LinesItemFormHook';
+import Check from '../../assets/icons/check.png';
+import useCart from '../cart/CartHook';
+
+const ProductCard = ({ id }) => {
+  const { item } = useLinesItem(id);
+  const price = `${parseInt(item.price, 10)} ₽`;
+  const { addToCart, isPresent } = useCart();
+
+  return (
+    <>
+      <div className="row gy-3">
+        <div className="col-md-6 col-lg-3 mt-0 px-0">
+          <div className="block d-flex justify-content-center justify-content-md-start">
+            <img src={item.image || imgPlaceholder} className="img-fluid" alt="book-cover-product-card" width="270" height="416" />
+          </div>
+        </div>
+        <div className="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
+          <div className="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
+            <p className="mb-2" id="product-card-book-name">
+              {item.title || 'Точных данных о названии нет'}
+            </p>
+            <p className="mb-4" id="product-card-author">
+              {item.author || 'Точных данных о авторе нет'}
+            </p>
+            <dl className="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
+              <dt className="col-md-6 mt-0">ID товара</dt>
+              <dd className="col-md-6 mt-0">{item.bookIdCode || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Издательство</dt>
+              <dd className="col-md-6">{item.publisher || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Серия</dt>
+              <dd className="col-md-6">{item.series || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Год издания</dt>
+              <dd className="col-md-6">{item.publicationYear || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Количество страниц</dt>
+              <dd className="col-md-6">{item.pagesNum !== 'NaN' ? item.pagesNum : 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Размер</dt>
+              <dd className="col-md-6">{item.size || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Тип обложки</dt>
+              <dd className="col-md-6">{item.coverType || 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Тираж</dt>
+              <dd className="col-md-6">{item.circulation !== 'NaN' ? item.circulation : 'Точных данных нет'}</dd>
+
+              <dt className="col-md-6">Вес, г</dt>
+              <dd className="col-md-6">{item.weight !== 'NaN' ? item.weight : 'Точных данных нет'}</dd>
+            </dl>
+          </div>
+        </div>
+        <div className="col-lg-4 mt-0 px-0 d-none d-lg-block">
+          <div className="block d-flex flex-column align-items-center align-items-lg-end">
+            <div className="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
+              <div className="d-flex align-items-center mb-3">
+                <img src={Check} className="me-4" alt="check" width="24" height="24" />
+                <p id="product-card-text-available">
+                  В наличии
+                </p>
+              </div>
+              <p className="mb-3" id="product-card-price">
+                {price || 'Точных данных о цене нет'}
+              </p>
+              <div>
+                {
+                  isPresent(item.id) && (
+                    <button type="button" className="btn btn-success rounded-1 p-3" id="product-card-button-add" disabled>
+                      Товар уже в корзине
+                    </button>
+                  )
+                }
+                {
+                  !isPresent(item.id) && (
+                    <button type="button" className="btn rounded-1 p-3" id="product-card-button-add" onClick={() => addToCart(item)}>
+                      Добавить в корзину
+                    </button>
+                  )
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {item.description && item.description.trim() !== '' && (
+        <div className="row mt-4 mt-md-0 mb-4">
+        <div className="col px-0">
+          <div className="block">
+            <p className="product-card-book-description-h mb-2">
+              О товаре
+            </p>
+            <p className="product-card-book-description-text">
+              {item.description}
+            </p>
+          </div>
+        </div>
+      </div>
+      )
+      }
+
+      <div className="row gy-3">
+        {item.annotation && item.annotation.trim() !== '' && (
+            <div className="col-12 px-0 mb-4 mb-lg-0">
+              <div className="block">
+                <p className="product-card-book-description-h mb-2">
+                  Аннотация
+                </p>
+                <p className="product-card-book-description-text">
+                  {item.annotation}
+                </p>
+              </div>
+          </div>
+          )
+        }
+        <div className="col px-0 d-lg-none">
+          <div className="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
+            <div className="d-flex align-items-center mb-3">
+              <img src={Check} className="me-4" alt="check" width="24" height="24" />
+              <p id="product-card-text-available">
+                В наличии
+              </p>
+            </div>
+            <p className="mb-3" id="product-card-price">
+              {price || 'Точных данных о цене нет'}
+            </p>
+            <div>
+                {
+                  isPresent(item.id) && (
+                    <button type="button" className="btn btn-success rounded-1 p-3" id="product-card-button-add" disabled>
+                      Товар уже в корзине
+                    </button>
+                  )
+                }
+                {
+                  !isPresent(item.id) && (
+                    <button type="button" className="btn rounded-1 p-3" id="product-card-button-add" onClick={() => addToCart(item)}>
+                      Добавить в корзину
+                    </button>
+                  )
+                }
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+ProductCard.propTypes = {
+  id: PropTypes.string,
+};
+
+export default ProductCard;

src/components/registration/hooks/RegistrationFormHook.js

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import useUsers from '../../users/hooks/UsersHook';
+import useRegistrationItem from './RegistrationItemHook';
+import UsersApiService from '../../users/service/UsersApiService';
+
+const useRegistrationForm = () => {
+  const { registrationItem, setRegistrationItem } = useRegistrationItem();
+  const { users } = useUsers();
+  const [validated, setValidated] = useState(false);
+
+  const navigate = useNavigate();
+
+  const resetValidity = () => {
+      setValidated(false);
+  };
+
+  const getRegistrationObject = (formData) => {
+      const { name } = formData;
+      const { email } = formData;
+      const { password } = formData;
+
+      return {
+          name: name.toString(),
+          email: email.toString(),
+          password: password.toString(),
+          isAdmin: false,
+      };
+  };
+
+  const handleChange = (event) => {
+      const inputName = event.target.name;
+      const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+      setRegistrationItem({
+          ...registrationItem,
+          [inputName]: inputValue,
+      });
+  };
+
+  const handleSubmit = async (event) => {
+      const form = event.currentTarget;
+      event.preventDefault();
+      event.stopPropagation();
+      const body = getRegistrationObject(registrationItem);
+      let foundEmail; let foundName;
+      if (form.checkValidity()) {
+          foundEmail = users.find((tempUser) =>
+          tempUser.email === body.email);
+          foundName = users.find((tempUser) =>
+          tempUser.name === body.name);
+          if (!foundEmail && !foundName) {
+            await UsersApiService.create(body);
+            toast.success('Регистрация прошла успешно!');
+            localStorage.setItem('CurrentUser', users.length + 1);
+            navigate('/', { replace: true });
+            return true;
+          }
+      }
+      if (foundEmail && foundName) {
+        toast.error('Пользователь с такой электронной почтой и никнеймом уже зарегистрирован!');
+      }
+      if (foundEmail && !foundName) {
+        toast.error('Пользователь с такой электронной почтой уже зарегистрирован!');
+      }
+      if (!foundEmail && foundName) {
+        toast.error('Пользователь с таким никнеймом уже зарегистрирован!');
+      }
+      setValidated(true);
+      return false;
+  };
+
+  return {
+      registrationItem,
+      validated,
+      handleSubmit,
+      handleChange,
+      resetValidity,
+  };
+};
+
+export default useRegistrationForm;

src/components/registration/hooks/RegistrationItemHook.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+const useRegistrationItem = () => {
+  const emptyRegistrationItem = {
+    id: '',
+    name: '',
+    email: '',
+    password: '',
+    isAdmin: false,
+  };
+
+  const [registrationItem, setRegistrationItem] = useState({ ...emptyRegistrationItem });
+
+  return {
+    registrationItem,
+    setRegistrationItem,
+  };
+};
+
+export default useRegistrationItem;

src/components/search/hooks/SearchHook.js

@@ -0,0 +1,32 @@
+import { useState, useEffect, useContext } from 'react';
+import SearchContext from '../../navigation/SearchContext.jsx';
+
+const useSearch = (lines) => {
+  const { searchValue } = useContext(SearchContext);
+  const [filteredLines, setFilteredLines] = useState(lines);
+
+  const getFilteredLines = (searchText, listOfBooks) => {
+    if (!searchText) {
+      return listOfBooks;
+    }
+    return listOfBooks.filter(({ title, author }) =>
+      title.toLowerCase().includes(searchText.toLowerCase())
+      || author.toLowerCase().includes(searchText.toLowerCase()));
+  };
+
+  useEffect(() => {
+    const Debounce = setTimeout(() => {
+      const filteredBooks = getFilteredLines(searchValue, lines);
+      setFilteredLines(filteredBooks);
+    }, 300);
+
+    return () => clearTimeout(Debounce);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue, lines]);
+
+  return {
+    filteredLines,
+  };
+};
+
+export default useSearch;

src/components/sortSelect/SortSelect.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+import useSort from './hooks/SortHook';
+
+const SortSelect = ({
+  setLines, initialLines, storageName,
+}) => {
+    const { sortType, setSortType } = useSort(setLines, initialLines, storageName);
+
+    return (
+      <Form.Select
+        value={sortType}
+        aria-label="catalogSelect"
+        className="border-black"
+        id="catalog-select"
+        onChange={(event) => setSortType(event.target.value)}
+      >
+        <option value="new">Сначала новые</option>
+        <option value="cheap">Сначала дешевые</option>
+        <option value="expensive">Сначала дорогие</option>
+      </Form.Select>
+    );
+};
+
+SortSelect.propTypes = {
+  setLines: PropTypes.func,
+  initialLines: PropTypes.array,
+  storageName: PropTypes.string,
+};
+
+export default SortSelect;

src/components/sortSelect/hooks/SortHook.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+const useSort = (setLines, initialLines, storageName) => {
+    const [sortType, setSortType] = useState(localStorage.getItem(storageName) || 'new');
+
+    const sortArray = (type) => {
+      const types = {
+        cheap: 'price',
+        expensive: 'price',
+        new: 'publicationYear',
+      };
+      const sortProperty = types[type];
+      const sorted = [...initialLines].sort((a, b) => {
+        if (type === 'cheap') {
+          return a[sortProperty] - b[sortProperty];
+        }
+        return b[sortProperty] - a[sortProperty];
+      });
+      setLines(sorted);
+    };
+
+    useEffect(() => {
+       if (sortType) {
+        sortArray(sortType);
+        localStorage.setItem(storageName, sortType);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortType, initialLines]);
+
+    return {
+        sortType,
+        setSortType,
+    };
+};
+
+export default useSort;

src/components/users/hooks/UserHook.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import UsersApiService from '../service/UsersApiService';
+
+const useUser = (id) => {
+    const emptyUser = {
+        id: '',
+        name: '',
+        email: '',
+        password: '',
+        isAdmin: false,
+    };
+    const [user, setUser] = useState({ ...emptyUser });
+
+    const getUser = async (userId = undefined) => {
+        if (userId && userId > 0) {
+            const data = await UsersApiService.get(userId);
+            setUser(data);
+        } else {
+            setUser({ ...emptyUser });
+        }
+    };
+
+    useEffect(() => {
+        getUser(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        user,
+        setUser,
+    };
+};
+
+export default useUser;

src/components/users/hooks/UsersHook.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import UsersApiService from '../service/UsersApiService';
+
+const useUsers = () => {
+    const [usersRefresh, setUsersRefresh] = useState(false);
+    const [users, setUsers] = useState([]);
+    const handleUsersChange = () => setUsersRefresh(!usersRefresh);
+
+    const getUsers = async () => {
+        const data = await UsersApiService.getAll();
+        setUsers(data ?? []);
+    };
+
+    useEffect(() => {
+      getUsers();
+    }, [usersRefresh]);
+
+    return {
+        users,
+        handleUsersChange,
+    };
+};
+
+export default useUsers;

src/components/users/service/UsersApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const UsersApiService = new ApiService('users');
+
+export default UsersApiService;

src/components/utils/Base64.js

@@ -0,0 +1,15 @@
+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;

src/index.css

@@ -34,7 +34,7 @@ body {
     font-weight: 800;
   }
   
-  .nav-link {
+  .nav-link, .header-part {
     font-size: 16px; 
     font-weight: 600;
   }
@@ -273,6 +273,11 @@ body {
     font-size: 18px;
     font-weight: 700;
   }
+
+  .cart-price-count {
+    font-size: 15px;
+    font-weight: 600;
+  }
   
   #cart-final-price {
     font-weight: 700;
@@ -447,7 +452,34 @@ body {
     font-size: 19px; 
     font-weight: 900;
   }
-  
+
+  .astext {
+    background:none;
+    border:none;
+    margin:0;
+    padding:0;
+    cursor: pointer;
+  }
+
+  #cart-link-count {
+    padding: 1px 4px;
+    font-weight: 700;
+    font-size: 12px;
+    box-shadow: 0 0 0 2px #fff;
+    top: 5px;
+    left: 29px;
+    background: linear-gradient(0deg, #177bc2 0%, #2e8db5 100%);
+    border-radius: 50px;
+    align-items: center;
+    color: #fff;
+    display: inline-flex;
+    height: 13px;
+    justify-content: center;
+    line-height: 13px;
+    min-width: 16px;
+    text-align: center;
+  }
+
   @media (min-width: 992px) and (max-width: 1200px) {
     #logo {
       margin-right: 25px !important;
@@ -538,11 +570,15 @@ body {
     #admin-title {
       font-size: 18px !important;
     }
+
+    .edit-btn {
+      width: 50% !important;
+    }
   }
   
   @media (max-width: 510px) {
     #login-input-email, #login-input-password,
-    #login-btn, #password-help, #login-admin {
+    #login-btn, #password-help, #login-admin, .errmsg {
       font-size: 12px;
     }
   
@@ -577,6 +613,10 @@ body {
     .cart-input {
       font-size: 14px;
     }
+
+    .cart-price-count {
+      font-size: 12px;
+    }
     
     .button-minus, .button-plus {
       font-size: 16px;
@@ -636,7 +676,7 @@ body {
     }
   
     #reg-input-name, #reg-input-email,
-    #login-input-email, #login-input-password {
+    #login-input-email, #login-input-password, .errmsg {
       font-size: 14px;
     }
   
@@ -686,6 +726,10 @@ body {
   }
   
   @media (max-width: 335px) {
+    #mobile-price-count {
+      display: none;
+    }
+
     #cart-title {
       font-size: 24px;
     }
@@ -721,6 +765,10 @@ body {
     .cart-price {
       font-size: 9px;
     }
+
+    .cart-price-count {
+      font-size: 8px;
+    }
   
     .trash-icon {
       width: 16px;
@@ -841,6 +889,10 @@ body {
       width: 155px;
       height: 235px;
     }
+
+    .edit-btn {
+      width: 75% !important;
+    }
   }
   
   @media (max-width: 204px) {

src/main.jsx

@@ -15,6 +15,7 @@ import PageLogin from './pages/PageLogin.jsx';
 import PageRegistration from './pages/PageRegistration.jsx';
 import PageAdmin from './pages/PageAdmin.jsx';
 import PageAddItem from './pages/PageAddItem.jsx';
+import PageSearch from './pages/PageSearch.jsx';
 
 const routes = [
   {
@@ -24,7 +25,7 @@ const routes = [
     title: 'Главная страница',
   },
   {
-    path: '/pageProductСard',
+    path: '/pageProductСard/:id',
     element: <PageProductСard />,
     title: 'Карточка товара',
   },
@@ -34,7 +35,7 @@ const routes = [
     title: 'Контакты',
   },
   {
-    path: '/pageCatalog',
+    path: '/pageCatalog/:id',
     element: <PageCatalog />,
     title: 'Каталог',
   },
@@ -64,10 +65,15 @@ const routes = [
     title: 'Панель администратора',
   },
   {
-    path: '/pageAddItem',
+    path: '/pageAddItem/:id?',
     element: <PageAddItem />,
     title: 'Панель администратора',
   },
+  {
+    path: '/pageSearch',
+    element: <PageSearch />,
+    title: 'Результаты поиска',
+  },
 ];
 
 const router = createBrowserRouter([

src/pages/ErrorPage.jsx

@@ -1,17 +1,18 @@
 import { Alert, Button, Container } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useRouteError } from 'react-router-dom';
 
 const ErrorPage = () => {
     const navigate = useNavigate();
+    const error = useRouteError();
 
     return (
-        <Container fluid className="p-2 row justify-content-center">
-            <Container className='col-md-6'>
-                <Alert variant="danger">
-                    Страница не найдена
-                </Alert>
-                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
-            </Container>
+        <Container fluid className='m-0 p-3 row justify-content-center'>
+            <Alert className='col-12 col-lg-6' variant='danger'>
+                {error?.message ?? 'Страница не найдена'}
+            </Alert>
+            <div className='w-100'></div>
+            <Button className='col-12 col-lg-6' variant='primary'
+                onClick={() => navigate(-1)}>Назад</Button>
         </Container>
     );
 };

src/pages/PageAddItem.jsx

@@ -1,104 +1,21 @@
-import { useState } from 'react';
-import { Form, Button } from 'react-bootstrap';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import LinesForm from '../components/lines/form/LinesForm.jsx';
 
 const PageAddItem = () => {
-    const [validated, setValidated] = useState(false);
+    const { id } = useParams();
 
-    const handleSubmit = (event) => {
-        const form = event.currentTarget;
-        if (form.checkValidity() === false) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    useEffect(() => {
+      document.body.classList.add('bg-white');
 
-        setValidated(true);
-    };
+      return () => {
+        document.body.classList.remove('bg-white');
+      };
+    }, []);
 
     return (
       <>
-        <div className="row justify-content-center">
-            <Form className="col-lg-8 col-xl-7 col-xxl-6" noValidate validated={validated} onSubmit={handleSubmit}>
-                <Form.Group className="mb-4 mt-5">
-                    <Form.Label>Название книги</Form.Label>
-                    <Form.Control type="text" name="text" id="item-name" required />
-                    <Form.Control.Feedback>Название книги введено</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Название книги не введено</Form.Control.Feedback>
-                </Form.Group>
-                <Form.Group className="mb-4">
-                    <Form.Label>Автор</Form.Label>
-                    <Form.Control type="text" name="text" id="item-author" required />
-                    <Form.Control.Feedback>Имя автора введено</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Имя автора не введено</Form.Control.Feedback>
-                </Form.Group>
-                <Form.Group className="mb-4">
-                    <Form.Label>Цена</Form.Label>
-                    <Form.Control type="number" name="number" id="price" required />
-                    <Form.Control.Feedback>Цена введена</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Цена не введена</Form.Control.Feedback>
-                </Form.Group>
-                <Form.Group className="mb-4">
-                    <Form.Label>Описание книги</Form.Label>
-                    <Form.Control as="textarea" id="item-descrition" rows="3"/>
-                </Form.Group>
-                <Form.Group className="mb-4">
-                    <Form.Label>Аннотация</Form.Label>
-                    <Form.Control as="textarea" id="item-annotation" rows="3"/>
-                </Form.Group>
-                <p className="mb-3">
-                    Xарактеристики:
-                </p>
-                <div className="mb-4 border border-1 border-secondary p-2">
-                    <Form.Group className="mb-3">
-                        <Form.Label>ID товара</Form.Label>
-                        <Form.Control type="number" name="number" id="item-id" required />
-                        <Form.Control.Feedback>ID товара введено</Form.Control.Feedback>
-                        <Form.Control.Feedback type="invalid">ID товара не введено</Form.Control.Feedback>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Издательство</Form.Label>
-                        <Form.Control type="text" name="text" id="item-publisher"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Серия</Form.Label>
-                        <Form.Control type="text" name="text" id="item-series"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Год издания</Form.Label>
-                        <Form.Control type="number" name="number" id="item-publication-year"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Количество страниц</Form.Label>
-                        <Form.Control type="number" name="number" id="item-pages-num"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Размер</Form.Label>
-                        <Form.Control type="text" name="text" id="item-size"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Тип обложки</Form.Label>
-                        <Form.Control type="text" name="text" id="item-cover-type"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Тираж</Form.Label>
-                        <Form.Control type="number" name="number" id="item-circulation"/>
-                    </Form.Group>
-                    <Form.Group className="mb-3">
-                        <Form.Label>Вес, г</Form.Label>
-                        <Form.Control type="number" name="number" id="item-weight"/>
-                    </Form.Group>
-                </div>
-                <Form.Group className="mb-4">
-                    <Form.Label>Обложка книги</Form.Label>
-                    <Form.Control type="file" id="item-cover"/>
-                </Form.Group>
-                <div className="text-center mb-5">
-                    <Button className="w-50 rounded-5" variant="primary" type="submit" id="add-btn">Добавить товар</Button>
-                </div>
-            </Form>
-        </div>
-          {
-            document.body.classList.add('bg-white')
-          }
+          <LinesForm id={id} />
       </>
     );
 };

src/pages/PageAdmin.jsx

@@ -1,65 +1,18 @@
-import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import Lines from '../components/lines/table/Lines.jsx';
 
 const PageAdmin = () => {
+    useEffect(() => {
+      document.body.classList.add('bg-white');
+
+      return () => {
+        document.body.classList.remove('bg-white');
+      };
+    }, []);
+
     return (
         <>
-            <div className="row gy-3">
-                <div className="col-12 px-0">
-                    <div className="block d-flex justify-content-center fs-2 fw-bold mb-3 mb-sm-4" id="admin-title">
-                    Панель администратора
-                    </div>
-                </div>
-                <div className="col-12 px-0">
-                    <div className="block table-responsive">
-                    <table className="table table-hover table-bordered align-middle">
-                        <thead>
-                        <tr>
-                            <th scope="col">#</th>
-                            <th scope="col">Название книги</th>
-                            <th scope="col">Автор</th>
-                            <th scope="col">Цена</th>
-                            <th scope="col"></th>
-                            <th scope="col"></th>
-                        </tr>
-                        </thead>
-                        <tbody className="table-group-divider">
-                            <tr>
-                            <th scope="row">1</th>
-                            <td>Форсайт</td>
-                            <td>Сергей Лукьяненко</td>
-                            <td>775 ₽</td>
-                            <td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
-                            <td><Link className="btn btn-primary w-100">Удалить</Link></td>
-                            </tr>
-                            <tr>
-                            <th scope="row">2</th>
-                            <td>Колесо времени. Книга 11. Нож сновидений</td>
-                            <td>Роберт Джордан</td>
-                            <td>977 ₽</td>
-                            <td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
-                            <td><Link className="btn btn-primary w-100">Удалить</Link></td>
-                            </tr>
-                            <tr>
-                            <th scope="row">3</th>
-                            <td>Четвертое крыло</td>
-                            <td>Яррос Ребекка</td>
-                            <td>999 ₽</td>
-                            <td><Link to="/pageAddItem" className="btn btn-primary w-100">Редактировать</Link></td>
-                            <td><Link className="btn btn-primary w-100">Удалить</Link></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    </div>
-                </div>
-                <div className="col-12 px-0 mb-2">
-                    <div className="block mb-4">
-                        <Link to="/pageAddItem" className="btn btn-primary">Добавить товар</Link>
-                    </div>
-                </div>
-            </div>
-            {
-              document.body.classList.add('bg-white')
-            }
+            <Lines />
         </>
     );
   };

src/pages/PageCart.jsx

@@ -1,80 +1,18 @@
-import Trash from '../assets/icons/trash.png';
-import Cover1 from '../assets/book_covers/cart/1.png';
-import Cover2 from '../assets/book_covers/cart/2.png';
-import Item from '../components/cartItem/CartItem.jsx';
+import { useEffect } from 'react';
+import Cart from '../components/cart/Cart.jsx';
 
 const PageCart = () => {
+  useEffect(() => {
+    document.body.classList.add('bg-white');
+
+    return () => {
+      document.body.classList.remove('bg-white');
+    };
+  }, []);
+
   return (
     <>
-      <div className="row gy-3 mb-1">
-        <div className="col-12 mb-3 mb-sm-4 mt-0 px-0">
-          <div
-            className="block d-flex justify-content-center lh-1"
-            id="cart-title"
-          >
-            Моя корзина
-          </div>
-        </div>
-        <div className="col-8 px-0">
-          <div
-            className="block d-flex align-items-end lh-1"
-            id="cart-items-num-text"
-          >
-            В корзине два товара:
-          </div>
-        </div>
-        <div className="col-4 d-flex justify-content-end px-0">
-          <div className="block align-self-end">
-            <button className="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0">
-              <img
-                src={Trash}
-                className="trash-icon me-sm-2"
-                alt="trash"
-                width="24"
-                height="24"
-              />
-              Удалить все
-            </button>
-          </div>
-        </div>
-        <Item
-          info={{
-            title: 'Наследник Каладана',
-            author: 'Брайан Герберт, Кевин Андерсон',
-            price: '929 р.',
-            cover: Cover1,
-            trash: Trash,
-          }}
-        />
-        <Item
-          info={{
-            title: 'Восхождение фениксов',
-            author: 'Тянься Гуйюань',
-            price: '834 р.',
-            cover: Cover2,
-            trash: Trash,
-          }}
-        />
-        <div className="col-12 pt-3 border-top border-black px-0">
-          <div
-            className="block d-flex justify-content-end align-items-end lh-1"
-            id="cart-final-price"
-          >
-            <span className="me-4" id="cart-final-price-text">
-              Итого:
-            </span>{' '}
-            <span id="cart-final-price-value">1763 р.</span>
-          </div>
-        </div>
-        <div className="col-12 px-0">
-          <div className="block d-flex justify-content-end">
-            <button className="btn rounded-5" id="cart-btn-checkout">
-              Перейти к оформлению
-            </button>
-          </div>
-        </div>
-      </div>
-      {document.body.classList.add('bg-white')}
+      <Cart />
     </>
   );
 };

src/pages/PageCatalog.jsx

@@ -1,185 +1,12 @@
-import { Link } from 'react-router-dom';
-import Select from '../components/catalogSelect/CatalogSelect.jsx';
-import Book from '../components/catalogBook/CatalogBook.jsx';
-import Cover1 from '../assets/book_covers/catalog/1.png';
-import Cover2 from '../assets/book_covers/catalog/2.png';
-import Cover3 from '../assets/book_covers/catalog/3.png';
-import Cover4 from '../assets/book_covers/catalog/4.png';
-import Cover5 from '../assets/book_covers/catalog/5.png';
-import Cover6 from '../assets/book_covers/catalog/6.png';
-import Cover7 from '../assets/book_covers/catalog/7.png';
-import Cover8 from '../assets/book_covers/catalog/8.png';
-import Cover9 from '../assets/book_covers/catalog/9.png';
+import { useParams } from 'react-router-dom';
+import Catalog from '../components/catalog/Catalog.jsx';
 
 const PageCatalog = () => {
+  const { id } = useParams();
+
   return (
       <>
-        <div className="row gy-3 flex-grow-1">
-          <div className="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3" id="catalog-categories">
-              <div className="block d-flex flex-column justify-content-center p-2 h-100">
-                  <p className="mb-4" id="catalog-categories-title">
-                      Категории
-                  </p>
-                  <ul className="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-list">
-                      <li><Link to="/">Книги для подростков</Link></li>
-                      <li><Link to="/">Комиксы</Link></li>
-                      <li><Link to="/">Манга</Link></li>
-                      <li><Link to="/">Эзотерика</Link></li>
-                      <li><Link to="/">Медицина и здоровье</Link></li>
-                      <li><Link to="/">Кулинария</Link></li>
-                      <li><Link to="/">Детские книги</Link></li>
-                      <li className="active-category"><Link to="/pageCatalog">Художественная литература</Link></li>
-                      <li><Link to="/">Дом и хобби</Link></li>
-                      <li><Link to="/">Наука. Техника. IT</Link></li>
-                      <li><Link to="/">Религия и философия</Link></li>
-                      <li><Link to="/">Психология</Link></li>
-                      <li><Link to="/">Искусство</Link></li>
-                      <li><Link to="/">История. Общество</Link></li>
-                      <li><Link to="/">Право</Link></li>
-                      <li><Link to="/">Книги на английском</Link></li>
-                      <li><Link to="/">Новый год</Link></li>
-                      <li><Link to="/">Публицистика</Link></li>
-                      <li><Link to="/">Эксклюзивные товары</Link></li>
-                      <li><Link to="/">Педагогика и воспитание</Link></li>
-                      <li><Link to="/">Литературные премии</Link></li>
-                      <li><Link to="/">Фэнтези</Link></li>
-                      <li><Link to="/">Ужасы. Мистика</Link></li>
-                      <li><Link to="/">Любовный роман</Link></li>
-                      <li><Link to="/">Юмор и сатира</Link></li>
-                      <li><Link to="/">Проза</Link></li>
-                      <li><Link to="/">Боевики и триллеры</Link></li>
-                      <li><Link to="/">Эпос и фольклор</Link></li>
-                      <li><Link to="/">Научная фантастика</Link></li>
-                      <li><Link to="/">Детективы</Link></li>
-                  </ul>
-              </div>
-          </div>
-          <div className="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-5">
-              <div className="row gy-3">
-                  <div className="col-12 mb-3 mb-lg-5 px-0 d-md-none">
-                      <div className="block d-flex lh-1" id="catalog-section-navigation">
-                          <Link to="/pageCatalogMobile" className="me-2 text-decoration-none">
-                            Каталог
-                          </Link>
-                          <span className="text-secondary me-2"> {'>'} </span>
-                          <Link to="/pageCatalog" className="text-decoration-none">
-                            Художественная литература
-                          </Link>
-                      </div>
-                  </div>
-                  <div className="col-12 mb-3 mb-lg-5 px-0">
-                      <div className="block d-flex justify-content-center lh-1" id="catalog-title">
-                          <div>
-                          Художественная литература
-                          </div>
-                      </div>
-                  </div>
-                  <div className="col-12 mb-3 mb-lg-5 gx-0">
-                      <div className="block">
-                          <Select />
-                      </div>
-                  </div>
-                  <Book
-                    description = {{
-                        cover: Cover1,
-                        price: '593 ₽',
-                        title: 'Граф Аверин. Колдун Российской империи',
-                        author: 'Виктор Дашкевич',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover2,
-                        price: '977 ₽',
-                        title: 'Колесо времени. Книга 11. Нож сновидений',
-                        author: 'Роберт Джордан',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover3,
-                        price: '775 ₽',
-                        title: 'Форсайт',
-                        author: 'Сергей Лукьяненко',
-                        destination: '/pageProductСard',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover4,
-                        price: '662 ₽',
-                        title: 'Шолох. Долина Колокольчиков',
-                        author: 'Антонина Крейн',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover5,
-                        price: '594 ₽',
-                        title: 'Скрижаль Исет. Грешные души',
-                        author: 'Мишина Влада',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover6,
-                        price: '2 112 ₽',
-                        title: 'Мир игры Pathologic 2. Хроники второй эпидемии',
-                        author: '',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover7,
-                        price: '1 250 ₽',
-                        title: 'Благословение небожителей. Том 5',
-                        author: 'Тунсю Мосян',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover8,
-                        price: '999 ₽',
-                        title: 'Четвертое крыло',
-                        author: 'Яррос Ребекка',
-                        destination: '/',
-                      }}
-                  />
-                  <Book
-                    description = {{
-                        cover: Cover9,
-                        price: '519 ₽',
-                        title: 'Волкодав',
-                        author: 'Семенова М.',
-                        destination: '/',
-                      }}
-                  />
-                  <div className="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
-                        <div className="block d-flex">
-                            <div className="me-2" id="catalog-page-navigation">
-                                <Link to="/pageCatalog" id="catalog-selected-page">1 </Link>
-                                <Link to="/">2 </Link>
-                                <Link to="/">3 </Link>
-                                <Link to="/">4 </Link>
-                                <Link to="/">5 </Link>
-                                <Link to="/">6 </Link>
-                                <Link to="/"> ....</Link>
-                                <Link to="/"> 2310</Link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-          {
-            document.body.classList.add('bg-white')
-          }
+          <Catalog id={id} />
       </>
   );
 };

src/pages/PageCatalogMobile.jsx

@@ -1,52 +1,37 @@
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import useCategoryFilter from '../components/lines/hooks/LinesFilterHook';
 
 const PageCatalog = () => {
+  const { categories } = useCategoryFilter();
+
+  useEffect(() => {
+    document.body.classList.add('bg-white');
+
+    return () => {
+      document.body.classList.remove('bg-white');
+    };
+  }, []);
+
   return (
       <>
         <div className="row">
-            <div className="col-12 ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories-mobile">
+            <div className="col-12 ps-0 mt-0 bg-white border border-3" id="catalog-categories-mobile">
                 <div className="block d-flex flex-column justify-content-center p-2 h-100">
                     <p className="mb-4" id="catalog-categories-mobile-title">
                         Категории
                     </p>
                     <ul className="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
-                      <li><Link to="/">Книги для подростков</Link></li>
-                      <li><Link to="/">Комиксы</Link></li>
-                      <li><Link to="/">Манга</Link></li>
-                      <li><Link to="/">Эзотерика</Link></li>
-                      <li><Link to="/">Медицина и здоровье</Link></li>
-                      <li><Link to="/">Кулинария</Link></li>
-                      <li><Link to="/">Детские книги</Link></li>
-                      <li className="active-category-mobile"><Link to="/pageCatalog">Художественная литература</Link></li>
-                      <li><Link to="/">Дом и хобби</Link></li>
-                      <li><Link to="/">Наука. Техника. IT</Link></li>
-                      <li><Link to="/">Религия и философия</Link></li>
-                      <li><Link to="/">Психология</Link></li>
-                      <li><Link to="/">Искусство</Link></li>
-                      <li><Link to="/">История. Общество</Link></li>
-                      <li><Link to="/">Право</Link></li>
-                      <li><Link to="/">Книги на английском</Link></li>
-                      <li><Link to="/">Новый год</Link></li>
-                      <li><Link to="/">Публицистика</Link></li>
-                      <li><Link to="/">Эксклюзивные товары</Link></li>
-                      <li><Link to="/">Педагогика и воспитание</Link></li>
-                      <li><Link to="/">Литературные премии</Link></li>
-                      <li><Link to="/">Фэнтези</Link></li>
-                      <li><Link to="/">Ужасы. Мистика</Link></li>
-                      <li><Link to="/">Любовный роман</Link></li>
-                      <li><Link to="/">Юмор и сатира</Link></li>
-                      <li><Link to="/">Проза</Link></li>
-                      <li><Link to="/">Боевики и триллеры</Link></li>
-                      <li><Link to="/">Эпос и фольклор</Link></li>
-                      <li><Link to="/">Научная фантастика</Link></li>
-                      <li><Link to="/">Детективы</Link></li>
+                      {
+                        categories.map((category) =>
+                        <li key={category.id}>
+                          <Link to={`/pageCatalog/${category.id}`}>{category.name}</Link>
+                        </li>)
+                      }
                   </ul>
                 </div>
             </div>
         </div>
-          {
-            document.body.classList.remove('bg-white')
-          }
       </>
   );
 };

src/pages/PageContacts.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Call from '../assets/icons/phone-call.png';
 import Email from '../assets/icons/email.png';
@@ -5,6 +6,14 @@ import Skype from '../assets/icons/skype.png';
 import Map from '../assets/icons/map.png';
 
 const PageContacts = () => {
+    useEffect(() => {
+    document.body.classList.add('bg-white');
+
+    return () => {
+        document.body.classList.remove('bg-white');
+    };
+    }, []);
+
   return (
       <>
          <div className="row">
@@ -63,9 +72,6 @@ const PageContacts = () => {
                 </div>
             </div>
         </div>
-        {
-          document.body.classList.add('bg-white')
-        }
       </>
   );
 };

src/pages/PageLogin.jsx

@@ -1,57 +1,45 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 import { Form, Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import useLoginForm from '../components/login/hooks/LoginFormHook';
 
 const PageLogin = () => {
-    const [validated, setValidated] = useState(false);
+    const {
+        user,
+        validated,
+        handleSubmit,
+        handleChange,
+    } = useLoginForm();
 
-    const handleSubmit = (event) => {
-        const form = event.currentTarget;
-        if (form.checkValidity() === false) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    useEffect(() => {
+        document.body.classList.add('bg-white');
 
-        setValidated(true);
-    };
+        return () => {
+          document.body.classList.remove('bg-white');
+        };
+    }, []);
 
     return (
       <>
         <div className="row gy-3 justify-content-center">
             <div className="col-12 mt-2">
                 <div className="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
-                        Вход на сайт
+                    Вход на сайт
                 </div>
             </div>
             <Form className="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" noValidate validated={validated} onSubmit={handleSubmit}>
                 <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="email" name="email" className="w-75 border-black" id="login-input-email" placeholder="Имя пользователя / email" required />
-                    <Form.Control.Feedback>Электронная почта заполнена</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Электронная почта не заполнена</Form.Control.Feedback>
+                    <Form.Control type="email" name="email" className="w-75 border-black" id="login-input-email"
+                    placeholder="Адрес электронной почты" value={user.email} onChange={handleChange} required />
                 </Form.Group>
                 <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="password" name="password" className="w-75 border-black" id="login-input-password" placeholder="Пароль" required />
-                    <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+                    <Form.Control type="password" name="password" className="w-75 border-black" id="login-input-password"
+                    placeholder="Пароль" value={user.password} onChange={handleChange} required />
                 </Form.Group>
                 <div className="text-center">
                     <Button className="w-50 rounded-5" variant="primary" type="submit" id="login-btn">Отправить</Button>
                 </div>
             </Form>
-            <div className="col-12">
-                <div className="block d-flex justify-content-center my-2 my-sm-3" id="password-help">
-                    <Link to="/">Забыли пароль?</Link>
-                </div>
-            </div>
-            <div className="col-12">
-                <div className="block d-flex justify-content-center mb-2 mb-sm-3" id="login-admin">
-                    <Link to="/pageAdmin">Админ</Link>
-                </div>
-            </div>
         </div>
-          {
-            document.body.classList.add('bg-white')
-          }
       </>
     );
 };

src/pages/PageMain.jsx

@@ -1,100 +1,46 @@
 import Row from '../components/mainPageRow/MainPageRow.jsx';
 import Fire from '../assets/icons/fire.png';
 import Nothing from '../assets/icons/nothing.png';
-import Cover1 from '../assets/book_covers/novelties/1.png';
-import Cover2 from '../assets/book_covers/novelties/2.png';
-import Cover3 from '../assets/book_covers/novelties/3.png';
-import Cover4 from '../assets/book_covers/novelties/4.png';
-import Cover5 from '../assets/book_covers/novelties/5.png';
-import Cover6 from '../assets/book_covers/novelties/6.png';
-import Cover7 from '../assets/book_covers/promotions/1.png';
-import Cover8 from '../assets/book_covers/promotions/2.png';
-import Cover9 from '../assets/book_covers/promotions/3.png';
-import Cover10 from '../assets/book_covers/promotions/4.png';
-import Cover11 from '../assets/book_covers/promotions/5.png';
-import Cover12 from '../assets/book_covers/promotions/6.png';
-import Cover13 from '../assets/book_covers/recommendations/1.png';
-import Cover14 from '../assets/book_covers/recommendations/2.png';
-import Cover15 from '../assets/book_covers/recommendations/3.png';
-import Cover16 from '../assets/book_covers/recommendations/4.png';
-import Cover17 from '../assets/book_covers/recommendations/5.png';
-import Cover18 from '../assets/book_covers/recommendations/6.png';
+import useLinesItem from '../components/lines/hooks/LinesItemHook';
 
 const PageMain = () => {
+    const book1 = useLinesItem(9).item;
+    const book2 = useLinesItem(1).item;
+    const book3 = useLinesItem(10).item;
+    const book4 = useLinesItem(11).item;
+    const book5 = useLinesItem(12).item;
+    const book6 = useLinesItem(13).item;
+    const book7 = useLinesItem(14).item;
+    const book8 = useLinesItem(15).item;
+    const book9 = useLinesItem(16).item;
+    const book10 = useLinesItem(17).item;
+    const book11 = useLinesItem(18).item;
+    const book12 = useLinesItem(19).item;
+    const book13 = useLinesItem(20).item;
+    const book14 = useLinesItem(21).item;
+    const book15 = useLinesItem(22).item;
+    const book16 = useLinesItem(23).item;
+    const book17 = useLinesItem(24).item;
+    const book18 = useLinesItem(25).item;
+
+    const arr1 = [book1, book2, book3, book4, book5, book6];
+    const arr2 = [book7, book8, book9, book10, book11, book12];
+    const arr3 = [book13, book14, book15, book16, book17, book18];
+
     return (
         <>
             <Row
             title = {{ name: 'Горячие новинки', image: Fire }}
-            books = {[
-                    {
-                        cover: Cover1, price: '932 ₽', title: 'Вавилон. Сокрытая история', author: 'Ребекка Ф. Куанг', destination: '/', id: 1,
-                    },
-                    {
-                        cover: Cover2, price: '775 ₽', title: 'Форсайт', author: 'Сергей Лукьяненко', destination: '/pageProductСard', id: 2,
-                    },
-                    {
-                        cover: Cover3, price: '642 ₽', title: 'Во главе раздора', author: 'Лия Арден', destination: '/', id: 3,
-                    },
-                    {
-                        cover: Cover4, price: '949 ₽', title: 'Путешествие в Элевсин', author: 'Виктор Пелевин', destination: '/', id: 4,
-                    },
-                    {
-                        cover: Cover5, price: '699 ₽', title: 'Восстание клана Чан', author: 'Тянься Гуйюань', destination: '/', id: 5,
-                    },
-                    {
-                        cover: Cover6, price: '551 ₽', title: 'Дебютная постановка. Том 2', author: 'Александра Маринина', destination: '/', id: 6,
-                    },
-                    ]}
+            books = {arr1}
             />
             <Row
-            title = {{ name: 'Книги по акциям', image: Nothing }}
-            books = {[
-                    {
-                        cover: Cover7, price: '576 ₽', title: 'Шестерка воронов', author: 'Ли Бардуго', destination: '/', id: 1,
-                    },
-                    {
-                        cover: Cover8, price: '200 ₽', title: 'Портрет Дориана Грея', author: 'Оскар Уальд', destination: '/', id: 2,
-                    },
-                    {
-                        cover: Cover9, price: '768 ₽', title: 'Царство Страха', author: 'Керри Манискалко', destination: '/', id: 3,
-                    },
-                    {
-                        cover: Cover10, price: '162 ₽', title: 'Клуб самоубийц', author: 'Роберт Льюис Стивенсон', destination: '/', id: 4,
-                    },
-                    {
-                        cover: Cover11, price: '600 ₽', title: 'Некромант-одиночка. Новелла. Том 1', author: 'JJJ', destination: '/', id: 5,
-                    },
-                    {
-                        cover: Cover12, price: '711 ₽', title: 'Кристальный пик', author: 'Гор А.', destination: '/', id: 6,
-                    },
-                    ]}
+            title = {{ name: 'Эксклюзивно в нашем магазине', image: Nothing }}
+            books = {arr2}
             />
             <Row
             title = {{ name: 'Выбор редакции', image: Nothing }}
-            books = {[
-                    {
-                        cover: Cover13, price: '1001 ₽', title: 'Испытание', author: 'Трейси Вульф', destination: '/', id: 1,
-                    },
-                    {
-                        cover: Cover14, price: '210 ₽', title: 'Мастер и Маргарита', author: 'Михаил Булгаков', destination: '/', id: 2,
-                    },
-                    {
-                        cover: Cover15, price: '618 ₽', title: 'Песнь Сорокопута', author: 'Фрэнсис Кель', destination: '/', id: 3,
-                    },
-                    {
-                        cover: Cover16, price: '754 ₽', title: 'Кодекс Алеры. Кн. 1. Фурии Кальдерона', author: 'Джим Батчер', destination: '/', id: 4,
-                    },
-                    {
-                        cover: Cover17, price: '711 ₽', title: 'Небесная река', author: 'Деннис Тейлор', destination: '/', id: 5,
-                    },
-                    {
-                        cover: Cover18, price: '699 ₽', title: 'Кузнец магии. Клинок тайн', author: 'Триша Левенселлер', destination: '/', id: 6,
-                    },
-                    ]}
+            books = {arr3}
             />
-            {
-                document.body.classList.remove('bg-white')
-            }
         </>
     );
 };

src/pages/PageProductСard.jsx

@@ -1,132 +1,21 @@
-import Cover from '../assets/book_covers/product_card/cover13d__w410.png';
-import Novelty from '../assets/icons/novelty.png';
-import Discont from '../assets/icons/discont.png';
-import Check from '../assets/icons/check.png';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import Card from '../components/productCard/ProductCard.jsx';
 
 const PageProductСard = () => {
+  const { id } = useParams();
+
+  useEffect(() => {
+    document.body.classList.add('bg-white');
+
+    return () => {
+      document.body.classList.remove('bg-white');
+    };
+  }, []);
+
   return (
       <>
-         <div className="row gy-3">
-            <div className="col-md-6 col-lg-3 mt-0 px-0">
-                <div className="block d-flex justify-content-center justify-content-md-start">
-                    <img src={Cover} className="img-fluid" alt="book-cover-product-card" width="270" height="416" />
-                </div>
-            </div>
-            <div className="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
-                <div className="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
-                    <div className="d-flex align-self-center align-self-md-end align-self-lg-start mb-4">
-                        <img src={Novelty} className="me-5" alt="novelty" width="95" height="32" id="novelty-icon" />
-                        <img src={Discont} alt="discont" width="63" height="32" id="discont-icon" />
-                    </div>
-                    <p className="mb-2" id="product-card-book-name">
-                        Форсайт
-                    </p>
-                    <p className="mb-4" id="product-card-author">
-                        Сергей Лукьяненко
-                    </p>
-                    <dl className="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
-                        <dt className="col-md-6 mt-0">ID товара</dt>
-                        <dd className="col-md-6 mt-0">3001249</dd>
-
-                        <dt className="col-md-6">Издательство</dt>
-                        <dd className="col-md-6">АСТ</dd>
-
-                        <dt className="col-md-6">Серия</dt>
-                        <dd className="col-md-6">Книги Сергея Лукьяненко</dd>
-
-                        <dt className="col-md-6">Год издания</dt>
-                        <dd className="col-md-6">2023</dd>
-
-                        <dt className="col-md-6">Количество страниц</dt>
-                        <dd className="col-md-6">352</dd>
-
-                        <dt className="col-md-6">Размер</dt>
-                        <dd className="col-md-6">20.5x13x2</dd>
-
-                        <dt className="col-md-6">Тип обложки</dt>
-                        <dd className="col-md-6">Твердый переплёт</dd>
-
-                        <dt className="col-md-6">Тираж</dt>
-                        <dd className="col-md-6">20000</dd>
-
-                        <dt className="col-md-6">Вес, г</dt>
-                        <dd className="col-md-6">350</dd>
-                    </dl>
-                </div>
-            </div>
-            <div className="col-lg-4 mt-0 px-0 d-none d-lg-block">
-                <div className="block d-flex flex-column align-items-center align-items-lg-end">
-                    <div className="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
-                        <div className="d-flex align-items-center mb-3">
-                            <img src={Check} className="me-4" alt="check" width="24" height="24" />
-                            <p id="product-card-text-available">
-                                В наличии
-                            </p>
-                        </div>
-                        <p className="mb-3" id="product-card-price">
-                            775 ₽
-                        </p>
-                        <div>
-                            <button type="button" className="btn rounded-1 p-3" id="product-card-button-add">
-                                Добавить в корзину
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div className="row mt-4 mt-md-0 mb-4">
-            <div className="col px-0">
-                <div className="block">
-                    <p className="product-card-book-description-h mb-2">
-                        О товаре
-                    </p>
-                    <p className="product-card-book-description-text">
-                        Новый долгожданный роман от автора бестселлеров «Ночной дозор» и «Черновик».
-                        Увлекательная история о Мире После и мире настоящего, где
-                        5 процентов людей знают о надвигающемся апокалипсисе больше,
-                        чем кто-либо может представить.
-                    </p>
-                </div>
-            </div>
-        </div>
-
-        <div className="row gy-3">
-            <div className="col-12 px-0 mb-4 mb-lg-0">
-                <div className="block">
-                    <p className="product-card-book-description-h mb-2">
-                        Аннотация
-                    </p>
-                    <p className="product-card-book-description-text">
-                        Людям порой снится прошлое. Иногда хорошее, иногда не очень.
-                        Но что делать, если тебе начинает сниться будущее?
-                        И в нём ничего хорошего нет совсем.
-                    </p>
-                </div>
-            </div>
-            <div className="col px-0 d-lg-none">
-                <div className="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
-                    <div className="d-flex align-items-center mb-3">
-                        <img src={Check} className="me-4" alt="check" width="24" height="24" />
-                        <p id="product-card-text-available">
-                            В наличии
-                        </p>
-                    </div>
-                    <p className="mb-3" id="product-card-price">
-                        775 ₽
-                    </p>
-                    <div>
-                        <button type="button" className="btn rounded-1 p-3" id="product-card-button-add">
-                            Добавить в корзину
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        {
-          document.body.classList.add('bg-white')
-        }
+        <Card id={id} />
       </>
   );
 };

src/pages/PageRegistration.jsx

@@ -1,56 +1,49 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 import { Form, Button } from 'react-bootstrap';
+import useRegistrationForm from '../components/registration/hooks/RegistrationFormHook';
 
 const PageRegistration = () => {
-    const [validated, setValidated] = useState(false);
+    const {
+        registrationItem,
+        validated,
+        handleSubmit,
+        handleChange,
+    } = useRegistrationForm();
 
-    const handleSubmit = (event) => {
-        const form = event.currentTarget;
-        if (form.checkValidity() === false) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    useEffect(() => {
+        document.body.classList.add('bg-white');
 
-        setValidated(true);
-    };
+        return () => {
+          document.body.classList.remove('bg-white');
+        };
+      }, []);
 
     return (
       <>
         <div className="row gy-3 justify-content-center">
             <div className="col-12 mt-0">
                 <div className="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
-                        Регистрация
+                    Регистрация
                 </div>
             </div>
             <Form className="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" noValidate validated={validated} onSubmit={handleSubmit}>
                 <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="text" name="text" className="w-75 border-black" id="reg-input-name" placeholder="Имя пользователя" required />
-                    <Form.Control.Feedback>Имя пользователя заполнено</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Имя пользователя не заполнено</Form.Control.Feedback>
+                    <Form.Control type="text" name="name" className="w-75 border-black" id="reg-input-name" placeholder="Имя пользователя"
+                    value={registrationItem.name} onChange={handleChange} required />
                 </Form.Group>
                 <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="email" name="email" className="w-75 border-black" id="reg-input-email" placeholder="Адрес электронной почты" required />
-                    <Form.Control.Feedback>Электронная почта заполнена</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Электронная почта не заполнена</Form.Control.Feedback>
+                    <Form.Control type="email" name="email" className="w-75 border-black" id="reg-input-email" placeholder="Адрес электронной почты"
+                    value={registrationItem.email} onChange={handleChange} required />
                 </Form.Group>
                 <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="password" name="password" className="reg-input-password w-75 border-black" placeholder="Пароль" required />
-                    <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
-                </Form.Group>
-                <Form.Group className="d-flex justify-content-center mb-3 mb-sm-4">
-                    <Form.Control type="password" name="password" className="reg-input-password w-75 border-black" placeholder="Подтвердите пароль" required />
-                    <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
-                    <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+                    <Form.Control type="password" name="password" className="reg-input-password w-75 border-black" placeholder="Пароль"
+                    value={registrationItem.password} onChange={handleChange} required />
                 </Form.Group>
                 <div className="text-center mb-3">
                     <Button className="w-50 rounded-5" variant="primary" type="submit" id="reg-btn">Отправить</Button>
                 </div>
             </Form>
         </div>
-          {
-            document.body.classList.add('bg-white')
-          }
       </>
     );
 };

src/pages/PageSearch.jsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import Select from '../components/sortSelect/SortSelect.jsx';
+import Book from '../components/catalogBook/CatalogBook.jsx';
+import usePagination from '../components/pagination/hooks/PaginationHook';
+import Pagination from '../components/pagination/Pagination.jsx';
+import useLines from '../components/lines/hooks/LinesHook';
+import useSearch from '../components/search/hooks/SearchHook';
+
+const PageSearch = () => {
+  const { lines } = useLines();
+
+  const { filteredLines } = useSearch(lines);
+
+  const [sortedLines, setSortedLines] = useState(filteredLines);
+
+  const {
+    items, numbers, prevPage, changeCPage, nextPage, currPage,
+    } = usePagination(sortedLines, 8);
+
+  useEffect(() => {
+    const mainElement = document.querySelector('main');
+
+    if (mainElement) {
+      mainElement.classList.add('my-0');
+    }
+
+    return () => {
+      if (mainElement) {
+        mainElement.classList.remove('my-0');
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+      <>
+        <div className="row gy-3 bg-white">
+          <div className="col-12 mb-3 mb-lg-5 gx-0">
+            <div className="block ms-4">
+              <Select
+                setLines={setSortedLines}
+                initialLines={filteredLines}
+                storageName='sortSearchType'
+              />
+            </div>
+          </div>
+          {items.map((line) => (
+              <Book
+                key={line.id}
+                description={{
+                  id: line.id,
+                  cover: line.image,
+                  price: `${parseInt(line.price, 10)} ₽`,
+                  title: line.title,
+                  author: line.author,
+                  destination: `/pageProductСard/${line.id}`,
+                }}
+              />
+          ))}
+          <div className="d-flex flex-grow-1"></div>
+          <nav className="block ms-4 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0 table-responsive">
+            <Pagination
+              numbers={numbers}
+              prevPage={prevPage}
+              changeCPage={changeCPage}
+              nextPage={nextPage}
+              currPage={currPage}
+            />
+          </nav>
+        </div>
+      </>
+  );
+};
+
+export default PageSearch;