25 |
26 |
43 | );
44 | }
45 |
46 | export default CartItem;
--------------------------------------------------------------------------------
/src/components/Headling/Headling.module.css:
--------------------------------------------------------------------------------
1 | .h1 {
2 | color: var(--text-color);
3 | font-size: 36.413px;
4 | font-style: normal;
5 | font-weight: 600;
6 | line-height: 120%;
7 | margin: 0;
8 | }
--------------------------------------------------------------------------------
/src/components/Headling/Headling.props.ts:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, ReactNode } from 'react';
2 |
3 | export interface HeadlingProps extends HTMLAttributes
27 |
30 | {props.name}
28 | {props.price} ₽
29 |
31 |
34 |
42 | {props.count}
35 |
38 |
41 | {children}
8 | ); 9 | } 10 | 11 | export default Headling; -------------------------------------------------------------------------------- /src/components/Input/Input.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | font-size: 17px; 3 | font-style: normal; 4 | font-weight: 400; 5 | color: var(--text-color); 6 | border: 1px solid #EEE; 7 | box-shadow: 15px 20px 45px 0px rgba(233, 233, 233, 0.25); 8 | border-radius: 10px; 9 | padding: 20px; 10 | } -------------------------------------------------------------------------------- /src/components/Input/Input.props.ts: -------------------------------------------------------------------------------- 1 | import { InputHTMLAttributes } from 'react'; 2 | 3 | export interface InputProps extends InputHTMLAttributes
20 |
38 |
39 | );
40 | }
41 |
42 | export default ProductCard;
--------------------------------------------------------------------------------
/src/components/Search/Search.module.css:
--------------------------------------------------------------------------------
1 | .input {
2 | font-size: 14px;
3 | font-style: normal;
4 | font-weight: 400;
5 | color: var(--text-color);
6 | background-color: #FCFCFD;
7 | border: 1px solid #EFEFEF;
8 | box-shadow: 15px 20px 45px 0px rgba(233, 233, 233, 0.25);
9 | border-radius: 10px;
10 | padding: 16px 30px 16px 44px;
11 | min-width: 200px;
12 | }
13 |
14 | .input-wrapper {
15 | position: relative;
16 | }
17 |
18 | .icon {
19 | position: absolute;
20 | left: 17px;
21 | top: 17px;
22 | }
--------------------------------------------------------------------------------
/src/components/Search/Search.props.ts:
--------------------------------------------------------------------------------
1 | import { InputHTMLAttributes } from 'react';
2 |
3 | export interface SearchProps extends InputHTMLAttributes
21 |
33 |
22 | {props.price}
23 | ₽
24 |
25 |
28 |
29 | {props.rating}
30 | 
31 |
32 |
31 |
34 |
37 | {props.name}
35 | {props.description}
36 |
9 |
12 | 
13 |
14 | );
15 | });
16 |
17 | export default Search;
--------------------------------------------------------------------------------
/src/helpers/API.ts:
--------------------------------------------------------------------------------
1 | export const PREFIX = 'https://purpleschool.ru/pizza-api-demo';
--------------------------------------------------------------------------------
/src/helpers/RequireAuth.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { useSelector } from 'react-redux';
3 | import { Navigate } from 'react-router-dom';
4 | import { RootState } from '../store/store';
5 |
6 | export const RequireAuth = ({ children }: { children: ReactNode }) => {
7 | const jwt = useSelector((s: RootState) => s.user.jwt);
8 | if (!jwt) {
9 | return
13 |
6 |
;
13 | }
--------------------------------------------------------------------------------
/src/layout/Menu/Layout.module.css:
--------------------------------------------------------------------------------
1 | .layout {
2 | display: flex;
3 | min-height: 100vh;
4 | }
5 |
6 | .sidebar {
7 | padding: 30px;
8 | border-right: 1px solid var(--separator-color);
9 | display: flex;
10 | flex-direction: column;
11 | }
12 |
13 | .exit {
14 | margin-top: auto;
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | gap: 9px;
19 | }
20 |
21 | .menu {
22 | display: flex;
23 | flex-direction: column;
24 | gap: 35px;
25 | }
26 |
27 | .link {
28 | display: flex;
29 | align-items: center;
30 | gap: 14px;
31 | text-decoration: none;
32 | color: var(--text-color);
33 | }
34 |
35 | .link:hover {
36 | color: var(--primary-color);
37 | }
38 |
39 | .active {
40 | color: var(--primary-color);
41 | }
42 |
43 | .user {
44 | margin-bottom: 46px;
45 | }
46 |
47 | .avatar {
48 | margin-bottom: 20px;
49 | filter: drop-shadow(0px 8px 40px rgba(255, 197, 41, 0.25));
50 | }
51 |
52 | .name {
53 | font-size: 20px;
54 | font-style: normal;
55 | font-weight: 700;
56 | line-height: normal;
57 | color: var(--text-color);
58 | }
59 |
60 | .email {
61 | font-family: Open Sans;
62 | font-size: 14px;
63 | font-style: normal;
64 | font-weight: 400;
65 | line-height: normal;
66 | color: #9EA1B1;
67 | }
68 |
69 | .content {
70 | padding: 40px 60px;
71 | width: 100%;
72 | }
73 |
74 | .cart-count {
75 | background: var(--primary-color);
76 | border-radius: 50%;
77 | width: 20px;
78 | height: 20px;
79 | display: flex;
80 | align-items: center;
81 | justify-content: center;
82 | font-size: 12px;
83 | color: var(--white-color);
84 | }
--------------------------------------------------------------------------------
/src/layout/Menu/Layout.tsx:
--------------------------------------------------------------------------------
1 | import { NavLink, Outlet, useNavigate } from 'react-router-dom';
2 | import styles from './Layout.module.css';
3 | import Button from '../../components/Button/Button';
4 | import cn from 'classnames';
5 | import { useDispatch, useSelector } from 'react-redux';
6 | import { AppDispath, RootState } from '../../store/store';
7 | import { getProfile, userActions } from '../../store/user.slice';
8 | import { useEffect } from 'react';
9 |
10 | export function Layout() {
11 | const navigate = useNavigate();
12 | const dispatch = useDispatch
7 | 
8 |
9 |
8 |
10 |
12 |
26 |
;
53 | }
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense, lazy } from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import { RouterProvider, createBrowserRouter, defer } from 'react-router-dom';
5 | import { Cart } from './pages/Cart/Cart.tsx';
6 | import { Error as ErropPage } from './pages/Error/Error.tsx';
7 | import { Layout } from './layout/Menu/Layout.tsx';
8 | import { Product } from './pages/Product/Product.tsx';
9 | import axios from 'axios';
10 | import { PREFIX } from './helpers/API.ts';
11 | import { AuthLayout } from './layout/Auth/AuthLayout.tsx';
12 | import { Login } from './pages/Login/Login.tsx';
13 | import { Register } from './pages/Register/Register.tsx';
14 | import { RequireAuth } from './helpers/RequireAuth.tsx';
15 | import { Provider } from 'react-redux';
16 | import { store } from './store/store.ts';
17 | import { Success } from './pages/Success/Success.tsx';
18 |
19 | const Menu = lazy(() => import('./pages/Menu/Menu'));
20 |
21 | const router = createBrowserRouter([
22 | {
23 | path: '/',
24 | element:
27 |
49 |
28 | 
29 |
32 |
29 | {profile?.name}
30 | {profile?.email}
31 |
33 | cn(styles['link'], {
34 | [styles.active]: isActive
35 | })}>
36 | 
37 | Меню
38 | cn(styles['link'], {
39 | [styles.active]: isActive
40 | })}>
41 | 
Корзина {items.reduce((acc, item) => acc += item.count, 0)}
42 |
43 |
44 |
48 |
37 | МенюКорзина {items.reduce((acc, item) => acc += item.count, 0)}
50 |
52 |
68 |
71 | Итог
69 | {total} ₽
70 | 72 |
73 |
76 | Доставка
74 | {DELIVERY_FEE} ₽
75 | 77 |
78 |
81 | Итог ({items.length})
79 | {total + DELIVERY_FEE} ₽
80 |
82 |
83 |
84 | ;
85 | }
--------------------------------------------------------------------------------
/src/pages/Error/Error.tsx:
--------------------------------------------------------------------------------
1 | export function Error() {
2 | return <>Error;
3 | }
--------------------------------------------------------------------------------
/src/pages/Login/Login.module.css:
--------------------------------------------------------------------------------
1 | .login {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 30px;
5 | width: 100%;
6 | max-width: 500px;
7 | }
8 |
9 | .form {
10 | display: flex;
11 | flex-direction: column;
12 | gap: 30px;
13 | }
14 |
15 | .field {
16 | display: flex;
17 | flex-direction: column;
18 | gap: 5px;
19 | }
20 |
21 | .field label {
22 | color: #C4C4C4;
23 | font-size: 17px;
24 | font-style: normal;
25 | font-weight: 400;
26 | }
27 |
28 | .links {
29 | display: flex;
30 | flex-direction: column;
31 | align-items: center;
32 | color: var(--text-secondaty-color);
33 | font-size: 14px;
34 | }
35 |
36 | .links a {
37 | text-decoration: none;
38 | color: var(--primary-color);
39 | }
40 |
41 | .error {
42 | background: #FFC529;
43 | color: white;
44 | padding: 20px;
45 | }
--------------------------------------------------------------------------------
/src/pages/Login/Login.tsx:
--------------------------------------------------------------------------------
1 | import { Link, useNavigate } from 'react-router-dom';
2 | import Button from '../../components/Button/Button';
3 | import Headling from '../../components/Headling/Headling';
4 | import Input from '../../components/Input/Input';
5 | import styles from './Login.module.css';
6 | import { FormEvent, useEffect } from 'react';
7 | import { useDispatch, useSelector } from 'react-redux';
8 | import { AppDispath, RootState } from '../../store/store';
9 | import { login, userActions } from '../../store/user.slice';
10 |
11 | export type LoginForm = {
12 | email: {
13 | value: string;
14 | };
15 | password: {
16 | value: string;
17 | };
18 | }
19 |
20 | export function Login() {
21 | const navigate = useNavigate();
22 | const dispatch = useDispatch
44 | Вход
45 | {loginErrorMessage &&
;
62 | }
--------------------------------------------------------------------------------
/src/pages/Menu/Menu.module.css:
--------------------------------------------------------------------------------
1 | .head {
2 | display: flex;
3 | justify-content: space-between;
4 | }
--------------------------------------------------------------------------------
/src/pages/Menu/Menu.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, useEffect, useState } from 'react';
2 | import Headling from '../../components/Headling/Headling';
3 | import Search from '../../components/Search/Search';
4 | import { PREFIX } from '../../helpers/API';
5 | import { Product } from '../../interfaces/product.interface';
6 | import styles from './Menu.module.css';
7 | import axios, { AxiosError } from 'axios';
8 | import { MenuList } from './MenuList/MenuList';
9 |
10 | export function Menu() {
11 | const [products, setProducts] = useState{loginErrorMessage}
}
46 |
57 |
58 |
61 | Нет акканута?
59 | Зарегистрироваться
60 |
47 | Меню
48 |
50 |
51 | {error && <>{error}}
52 | {!isLoading && products.length > 0 &&
56 | ;
57 | }
58 |
59 | export default Menu;
--------------------------------------------------------------------------------
/src/pages/Menu/MenuList/MenuList.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | flex-wrap: wrap;
4 | gap: 40px;
5 | margin-top: 30px;
6 | }
--------------------------------------------------------------------------------
/src/pages/Menu/MenuList/MenuList.props.ts:
--------------------------------------------------------------------------------
1 | import { Product } from '../../../interfaces/product.interface';
2 |
3 | export interface MenuListProps {
4 | products: Product[];
5 | }
--------------------------------------------------------------------------------
/src/pages/Menu/MenuList/MenuList.tsx:
--------------------------------------------------------------------------------
1 | import ProductCard from '../../../components/ProductCard/ProductCard';
2 | import { MenuListProps } from './MenuList.props';
3 | import styles from './MenuList.module.css';
4 |
5 | export function MenuList({ products }: MenuListProps) {
6 | return {products.map(p => (
7 |
;
18 | }
--------------------------------------------------------------------------------
/src/pages/Product/Product.tsx:
--------------------------------------------------------------------------------
1 | import { Await, useLoaderData } from 'react-router-dom';
2 | import { Product } from '../../interfaces/product.interface';
3 | import { Suspense } from 'react';
4 |
5 | export function Product() {
6 | const data = useLoaderData() as { data: Product };
7 |
8 | return <>
9 |
43 | Регистрация
44 | {registerErrorMessage &&
;
65 | }
--------------------------------------------------------------------------------
/src/pages/Success/Success.module.css:
--------------------------------------------------------------------------------
1 | .success {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | gap: 30px;
7 | }
8 |
9 | .text {
10 | color: var(--text-color);
11 | text-align: center;
12 | font-size: 31px;
13 | font-style: normal;
14 | font-weight: 300;
15 | line-height: 120%;
16 | }
--------------------------------------------------------------------------------
/src/pages/Success/Success.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import Button from '../../components/Button/Button';
3 | import styles from './Success.module.css';
4 |
5 | export function Success() {
6 | const navigate = useNavigate();
7 | return (
8 | {registerErrorMessage}
}
45 |
60 |
61 |
64 | Есть акканут?
62 | Войти
63 |
9 | 
10 |
13 | );
14 | }
--------------------------------------------------------------------------------
/src/store/cart.slice.ts:
--------------------------------------------------------------------------------
1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit';
2 | import { loadState } from './storage';
3 |
4 | export const CART_PERSISTENT_STATE = 'cartData';
5 |
6 | export interface CartItem {
7 | id: number;
8 | count: number;
9 | }
10 |
11 | export interface CartState {
12 | items: CartItem[];
13 | }
14 |
15 | const initialState: CartState = loadState
10 | Ваш заказ успешно оформлен!
11 |
12 |