+
+
+
+ Главная страница
} />
+
+
-
- 
-
-
- );
-}
+ - Текст писать тут -
-
+
-export default App;
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/BasketButton/basketbutton.css b/src/components/BasketButton/basketbutton.css
new file mode 100644
index 000000000..eb80d98c6
--- /dev/null
+++ b/src/components/BasketButton/basketbutton.css
@@ -0,0 +1,58 @@
+.button {
+ font-family: 'Arial', sans-serif;
+ font-size: 16px;
+ padding: 10px 20px;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background 0.3s;
+}
+
+.primary {
+ background: #ff671f;
+ color: #fff;
+}
+
+.secondary {
+ background: #008a00;
+ color: #fff;
+}
+
+.small {
+ font-size: 14px;
+ padding: 8px 16px;
+}
+
+.medium {
+ font-size: 16px;
+ padding: 10px 20px;
+}
+
+.large {
+ font-size: 18px;
+ padding: 12px 24px;
+}
+
+.counterContainer {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.decrement, .increment {
+ background: #ff671f;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.countInput {
+ width: 40px;
+ text-align: center;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
diff --git a/src/components/BasketList/BasketList.css b/src/components/BasketList/BasketList.css
new file mode 100644
index 000000000..dbb387a54
--- /dev/null
+++ b/src/components/BasketList/BasketList.css
@@ -0,0 +1,12 @@
+.basket-list {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ background: #f9f9f9;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.basket-list > * + * {
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/components/BasketList/BasketList.stories.tsx b/src/components/BasketList/BasketList.stories.tsx
new file mode 100644
index 000000000..a6c9c003a
--- /dev/null
+++ b/src/components/BasketList/BasketList.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BasketList from './BasketList';
+
+const meta: Meta
+ {products.map((product) => (
+
+ );
+};
+
+export default BasketList;
diff --git a/src/components/BasketRow/BasketRow.stories.tsx b/src/components/BasketRow/BasketRow.stories.tsx
new file mode 100644
index 000000000..ec93f35f6
--- /dev/null
+++ b/src/components/BasketRow/BasketRow.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BasketRow from './BasketRow';
+
+const meta: Meta
+ {title}
+ {price} ₽
+
+ );
+};
+
+export default memo(BasketRow);
diff --git a/src/components/BasketRow/basketrow.css b/src/components/BasketRow/basketrow.css
new file mode 100644
index 000000000..31102c6c8
--- /dev/null
+++ b/src/components/BasketRow/basketrow.css
@@ -0,0 +1,97 @@
+.basketRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px;
+ border-bottom: 1px solid #eee;
+ background: #fff;
+}
+
+.basketRowTitle {
+ flex: 1;
+ margin-right: 20px;
+ font-weight: 500;
+}
+
+.basketRowPrice {
+ margin-right: 20px;
+ color: #666;
+}
+
+.basketRowControls {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-right: 20px;
+}
+
+.basketRowControls button {
+ padding: 5px 10px;
+ background: #f0f0f0;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.basketRowControls button:hover {
+ background: #e0e0e0;
+}
+
+.basketRowControls span {
+ min-width: 30px;
+ text-align: center;
+}
+
+.basketRowRemove {
+ padding: 8px 16px;
+ background: #ff4444;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.basketRowRemove:hover {
+ background: #ff0000;
+}
+
+.basket-image img {
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.basket-name {
+ flex: 1;
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ padding: 0 15px;
+}
+
+.basket-delete button {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.basket-price {
+ font-size: 14px;
+ color: #666;
+ min-width: 100px;
+ text-align: center;
+}
+
+.basket-action {
+ display: flex;
+ align-items: center;
+}
+
+.basket-total {
+ font-size: 18px;
+ font-weight: bold;
+ color: #ff671f;
+ min-width: 100px;
+ text-align: right;
+}
\ No newline at end of file
diff --git a/src/components/BasketRow/icon_delete.svg b/src/components/BasketRow/icon_delete.svg
new file mode 100644
index 000000000..db62a1aef
--- /dev/null
+++ b/src/components/BasketRow/icon_delete.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ErrorBoundary.css b/src/components/ErrorBoundary.css
new file mode 100644
index 000000000..f1cb5b06e
--- /dev/null
+++ b/src/components/ErrorBoundary.css
@@ -0,0 +1,34 @@
+.error-boundary {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 20px;
+ text-align: center;
+ background-color: #f8f9fa;
+}
+
+.error-boundary h1 {
+ color: #dc3545;
+ margin-bottom: 16px;
+}
+
+.error-boundary p {
+ color: #6c757d;
+ margin-bottom: 24px;
+}
+
+.error-boundary button {
+ padding: 8px 16px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.error-boundary button:hover {
+ background-color: #0056b3;
+}
\ No newline at end of file
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 000000000..ba9520a55
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,43 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+}
+
+class ErrorBoundary extends Component
+
+ {count}
+
+
+
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 000000000..146787728
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,37 @@
+.header {
+ background-color: #ffffff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 1rem;
+}
+
+.nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.navList {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 1rem;
+}
+
+.navLink {
+ color: #333;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.navLink:hover {
+ color: #007bff;
+}
+
+.active {
+ color: #007bff;
+ font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
new file mode 100644
index 000000000..bc1e0a415
--- /dev/null
+++ b/src/components/Header/Header.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from './Header';
+
+const meta: MetaЧто-то пошло не так
+Пожалуйста, обновите страницу или попробуйте позже
+ +Магазин
+ +
+
+ );
+};
+
+export default ItemList;
\ No newline at end of file
diff --git a/src/components/ItemList/itemlist.css b/src/components/ItemList/itemlist.css
new file mode 100644
index 000000000..514425fa4
--- /dev/null
+++ b/src/components/ItemList/itemlist.css
@@ -0,0 +1,119 @@
+.itemList {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ background: #f5f5f5;
+}
+
+.itemListItems {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+}
+
+.itemListItem {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.itemListItem:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.itemTitle {
+ font-size: 18px;
+ font-weight: bold;
+ color: #333;
+}
+
+.itemPrice {
+ font-size: 16px;
+ color: #666;
+}
+
+.itemImage {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.itemDescription {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.5;
+}
+
+.itemActions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: auto;
+}
+
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: #fff;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ max-width: 600px;
+ width: 90%;
+}
+
+.modalImage {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+ margin-bottom: 20px;
+}
+
+.modalTitle {
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 15px;
+}
+
+.modalDescription {
+ font-size: 16px;
+ color: #666;
+ line-height: 1.6;
+ margin-bottom: 20px;
+}
+
+.modalPrice {
+ font-size: 20px;
+ font-weight: bold;
+ color: #007bff;
+ margin-bottom: 20px;
+}
+
+.modalActions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
diff --git a/src/components/ItemListContainer/ItemList_Demo_Button.tsx b/src/components/ItemListContainer/ItemList_Demo_Button.tsx
new file mode 100644
index 000000000..0c0218932
--- /dev/null
+++ b/src/components/ItemListContainer/ItemList_Demo_Button.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import ItemList, { Item } from '../ItemList/ItemList';
+import logo from './favicon.svg';
+
+export const ItemListDemoButton: React.FC = () => {
+ const [items] = useState-
+ {items.map((item) => (
+
-
+
+
{item.title}
+{item.price} ₽
+{item.description}
++ + ++
+ ))}
+
+
+ )}
+ e.stopPropagation()}>
+ 
+
+ {selectedItem.title}
+{selectedItem.description}
+{selectedItem.price} ₽
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/ItemListContainer/favicon.svg b/src/components/ItemListContainer/favicon.svg
new file mode 100644
index 000000000..c48b6be52
--- /dev/null
+++ b/src/components/ItemListContainer/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ProductList/ProductList.css b/src/components/ProductList/ProductList.css
new file mode 100644
index 000000000..baa0871ca
--- /dev/null
+++ b/src/components/ProductList/ProductList.css
@@ -0,0 +1,47 @@
+.productList {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.productList h2 {
+ margin-bottom: 20px;
+ color: #333;
+}
+
+.productListItems {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.productListItem {
+ margin-bottom: 20px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: transform 0.2s ease;
+}
+
+.productListItem:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.productLink {
+ display: block;
+ padding: 20px;
+ text-decoration: none;
+ color: inherit;
+}
+
+.productTitle {
+ margin: 0 0 10px 0;
+ color: #2c3e50;
+}
+
+.productDescription {
+ margin: 0;
+ color: #666;
+ line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/components/ProductList/ProductList.stories.tsx b/src/components/ProductList/ProductList.stories.tsx
new file mode 100644
index 000000000..cd70fd0c4
--- /dev/null
+++ b/src/components/ProductList/ProductList.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import ProductList from './ProductList';
+
+const meta: Meta
+
+ );
+};
+
+export default ProductList;
\ No newline at end of file
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 000000000..ef9ae0533
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+ requireAuth?: boolean;
+ requireAdmin?: boolean;
+}
+
+export const ProtectedRoute: React.FCOur Products
+-
+ {products.map((product: Product) => (
+
-
+
+
+
{product.title}
+{product.description}
+{product.price} ₽
+ +
+ ))}
+
+ 
+
+ );
+};
+
+export default ShortProductCard;
\ No newline at end of file
diff --git a/src/components/ShortProductCard/img.png b/src/components/ShortProductCard/img.png
new file mode 100644
index 000000000..6a26b28a4
Binary files /dev/null and b/src/components/ShortProductCard/img.png differ
diff --git a/src/components/ShortProductCard/shortproductcard.css b/src/components/ShortProductCard/shortproductcard.css
new file mode 100644
index 000000000..a09cfadd0
--- /dev/null
+++ b/src/components/ShortProductCard/shortproductcard.css
@@ -0,0 +1,47 @@
+.product-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px;
+ border-bottom: 1px solid #ddd;
+ background: #fff;
+ font-family: Arial, sans-serif;
+}
+
+.product-image img {
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.product-details {
+ flex: 1;
+ padding: 0 15px;
+}
+
+.product-name {
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ margin: 0;
+}
+
+.product-description {
+ font-size: 14px;
+ color: #666;
+ margin: 5px 0 0;
+}
+
+.product-price {
+ font-size: 18px;
+ font-weight: bold;
+ color: #ff671f;
+ min-width: 80px;
+ text-align: right;
+}
+
+.product-action {
+ display: flex;
+ align-items: center;
+}
diff --git a/src/data/products.ts b/src/data/products.ts
new file mode 100644
index 000000000..22398647f
--- /dev/null
+++ b/src/data/products.ts
@@ -0,0 +1,25 @@
+import { Product } from '../types/product';
+
+export const products: Product[] = [
+ {
+ id: 1,
+ title: 'Product 1',
+ description: 'Description for product 1',
+ price: 1000,
+ image: 'https://via.placeholder.com/150'
+ },
+ {
+ id: 2,
+ title: 'Product 2',
+ description: 'Description for product 2',
+ price: 2000,
+ image: 'https://via.placeholder.com/150'
+ },
+ {
+ id: 3,
+ title: 'Product 3',
+ description: 'Description for product 3',
+ price: 3000,
+ image: 'https://via.placeholder.com/150'
+ }
+];
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index c8a8e9634..d8a60aa40 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,10 @@
+
+
+
+ {title}
+{price} ₽
+
+ ({
+ ...item,
+ onRemove: handleRemove,
+ onIncrement: handleIncrement,
+ onDecrement: handleDecrement
+ }))}
+ />
+
+ );
+};
+
+export default BasketPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 000000000..f25b98631
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/HomePage.css';
+import logo from './banner.svg';
+
+const HomePage: React.FC = () => {
+ return (
+ Корзина
+Итого: {total} ₽
+
+
+
+ );
+};
+
+export default HomePage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 000000000..3c7528713
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { loginRequest, loginSuccess, loginFailure } from '../store/slices/authSlice';
+import { login } from '../api/auth';
+import '../styles/LoginPage.css';
+
+const LoginPage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { loading, error } = useAppSelector((state) => state.auth);
+ const [formData, setFormData] = useState({
+ email: '',
+ password: '',
+ });
+
+ const from = location.state?.from?.pathname || '/';
+
+ const handleChange = (e: React.ChangeEventДобро пожаловать в Магазин
+Лучшие продукты по лучшим ценам. Выбирайте, заказывайте и наслаждайтесь!
+
+
+ );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/ModalPage.css b/src/pages/ModalPage.css
new file mode 100644
index 000000000..eda72923d
--- /dev/null
+++ b/src/pages/ModalPage.css
@@ -0,0 +1,48 @@
+.modalOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modalContent {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ max-width: 500px;
+ width: 90%;
+ position: relative;
+}
+
+.closeButton {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #666;
+ transition: color 0.2s ease;
+}
+
+.closeButton:hover {
+ color: #333;
+}
+
+.productTitle {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ color: #333;
+}
+
+.productDescription {
+ color: #666;
+ line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/pages/ModalPage.tsx b/src/pages/ModalPage.tsx
new file mode 100644
index 000000000..c164195fe
--- /dev/null
+++ b/src/pages/ModalPage.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { products } from '../data/products';
+import { Product } from '../types/product';
+import './ModalPage.css';
+
+type ModalPageParams = {
+ id: string;
+};
+
+const ModalPage: React.FC = () => {
+ const { id } = useParams
+
+ Вход в систему
+ {error &&{error}
}
+
+ Ошибка: ID товара не указан
;
+ }
+
+ const product = products.find((p: Product) => p.id === Number(id));
+
+ if (!product) {
+ return Товар не найден
;
+ }
+
+ const handleClose = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ navigate(-1);
+ };
+
+ return (
+
+
+ );
+};
+
+export default ModalPage;
\ No newline at end of file
diff --git a/src/pages/ProductsPage.tsx b/src/pages/ProductsPage.tsx
new file mode 100644
index 000000000..8a27a75f1
--- /dev/null
+++ b/src/pages/ProductsPage.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/ProductsPage.css";
+import { ItemListDemoButton } from "../components/ItemListContainer/ItemList_Demo_Button";
+
+const ProductsPage: React.FC = () => {
+ return (
+ e.stopPropagation()}>
+
+
+ {product.title}
+{product.description}
+{product.price} ₽
+ +
+
+ );
+};
+
+export default ProductsPage;
\ No newline at end of file
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
new file mode 100644
index 000000000..93da490b5
--- /dev/null
+++ b/src/pages/ProfilePage.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useAppSelector, useAppDispatch } from '../store/hooks';
+import { logout } from '../store/slices/authSlice';
+import { ProtectedRoute } from '../components/ProtectedRoute';
+import '../styles/ProfilePage.css';
+
+export const ProfilePage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const { data: profile, loading } = useAppSelector((state) => state.profile);
+ const { isAdmin } = useAppSelector((state) => state.auth);
+
+ const handleLogout = () => {
+ dispatch(logout());
+ };
+
+ if (loading) {
+ return Товары
+Загрузка...
;
+ }
+
+ return (
+
+
+
+
+ Профиль пользователя
+ {profile && ( +
+ 
+
+ )}
+
+
+
+ Имя: {profile.name}
+Email: {profile.email}
+Роль: {isAdmin ? 'Администратор' : 'Пользователь'}
+
+
+ );
+};
+
+export default RegisterPage;
\ No newline at end of file
diff --git a/src/pages/RegisterPageRTK.tsx b/src/pages/RegisterPageRTK.tsx
new file mode 100644
index 000000000..501a621bc
--- /dev/null
+++ b/src/pages/RegisterPageRTK.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRegisterMutation } from '../store/api/registerApi';
+import '../styles/LoginPage.css';
+
+interface RegisterFormData {
+ email: string;
+ password: string;
+ confirmPassword: string;
+}
+
+interface FormErrors {
+ email?: string;
+ password?: string;
+ confirmPassword?: string;
+}
+
+const RegisterPageRTK: React.FC = () => {
+ const navigate = useNavigate();
+ const [formData, setFormData] = useState
+
+ Регистрация
+ {error &&{error}
}
+
+
+
+ );
+};
+
+export default RegisterPageRTK;
\ No newline at end of file
diff --git a/src/pages/RegisterPageThunk.tsx b/src/pages/RegisterPageThunk.tsx
new file mode 100644
index 000000000..8e0a7ba36
--- /dev/null
+++ b/src/pages/RegisterPageThunk.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { registerRequest, clearError, clearSuccess } from '../store/slices/registerSagaSlice';
+import '../styles/LoginPage.css';
+import '../styles/common.css';
+
+interface RegisterFormData {
+ email: string;
+ password: string;
+ confirmPassword: string;
+}
+
+interface FormErrors {
+ email?: string;
+ password?: string;
+ confirmPassword?: string;
+}
+
+const RegisterPageThunk: React.FC = () => {
+ const navigate = useNavigate();
+ const dispatch = useAppDispatch();
+ const { loading, error, success } = useAppSelector((state) => state.registerSaga);
+ const [formData, setFormData] = useState
+
+ Регистрация (RTK Query)
+ {error &&{error}
}
+
+
+
+ );
+};
+
+export default RegisterPageThunk;
\ No newline at end of file
diff --git a/src/pages/RegistrationPage.module.css b/src/pages/RegistrationPage.module.css
new file mode 100644
index 000000000..6a404a593
--- /dev/null
+++ b/src/pages/RegistrationPage.module.css
@@ -0,0 +1,21 @@
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ display: flex;
+ gap: 2rem;
+}
+
+.section {
+ flex: 1;
+ padding: 1rem;
+ background-color: #f8f9fa;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+ margin-bottom: 1.5rem;
+ color: #333;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/pages/RegistrationPage.tsx b/src/pages/RegistrationPage.tsx
new file mode 100644
index 000000000..badd2348d
--- /dev/null
+++ b/src/pages/RegistrationPage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { FunctionalRegistration } from '../components/Registration/FunctionalRegistration';
+import { RTKRegistration } from '../components/Registration/RTKRegistration';
+import styles from './RegistrationPage.module.css';
+
+export const RegistrationPage: React.FC = () => {
+ return (
+
+
+ Регистрация (Redux Saga)
+ {error &&{error}
}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/pages/banner.svg b/src/pages/banner.svg
new file mode 100644
index 000000000..b9a2844db
--- /dev/null
+++ b/src/pages/banner.svg
@@ -0,0 +1,215 @@
+
+
+
diff --git a/src/store/api/authApi.ts b/src/store/api/authApi.ts
new file mode 100644
index 000000000..f4228aefe
--- /dev/null
+++ b/src/store/api/authApi.ts
@@ -0,0 +1,44 @@
+import { createApi, fetchBaseQuery, FetchBaseQueryError } from '@reduxjs/toolkit/query/react';
+
+interface RegistrationRequest {
+ email: string;
+ password: string;
+}
+
+interface RegistrationResponse {
+ id: string;
+ email: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+interface ErrorResponse {
+ errors: Array<{
+ message: string;
+ extensions?: {
+ code: string;
+ };
+ }>;
+}
+
+export const authApi = createApi({
+ reducerPath: 'authApi',
+ baseQuery: fetchBaseQuery({
+ baseUrl: 'http://19429ba06ff2.vps.myjino.ru/api',
+ }),
+ endpoints: (builder) => ({
+ register: builder.mutation
+
+ Functional Component Registration
+
+
+