6 |
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
14 | export default Loader;
15 |
--------------------------------------------------------------------------------
/src/components/admin/SettingsForm/SettingsForm.module.css:
--------------------------------------------------------------------------------
1 | .form {
2 | padding: 30px 0 10px;
3 | }
4 |
5 | .action {
6 | display: flex;
7 | gap: 20px;
8 | flex-direction: column-reverse;
9 | }
10 |
11 | @media screen and (min-width: 768px) {
12 | .action {
13 | flex-direction: row;
14 | align-self: flex-end;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/admin/Categories/Categories.module.css:
--------------------------------------------------------------------------------
1 | .category {
2 | min-height: 160px;
3 | }
4 |
5 | .header {
6 | display: flex;
7 | justify-content: space-between;
8 | padding: 10px 0 20px;
9 | border-bottom: 1px solid lightgray;
10 | }
11 |
12 | .title {
13 | font-family: 'Nunito';
14 | font-size: 22px;
15 | margin: 0;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/layouts/adminLayouts/Content/Content.tsx:
--------------------------------------------------------------------------------
1 | import classes from './Content.module.css';
2 |
3 | interface IContentProps {
4 | children: JSX.Element;
5 | }
6 |
7 | const Content: React.FC{children}
;
8 | };
9 |
10 | export default SectionBody;
11 |
--------------------------------------------------------------------------------
/src/components/showcase/Cart/Cart.module.css:
--------------------------------------------------------------------------------
1 | .cart {
2 | display: flex;
3 | flex-direction: column;
4 | box-sizing: border-box;
5 | gap: 40px;
6 | }
7 |
8 | .cart-items-wrapper {
9 | display: flex;
10 | flex-direction: column;
11 | gap: 30px;
12 | width: 100%;
13 | }
14 |
15 | @media screen and (min-width: 1024px) {
16 | .cart {
17 | flex-direction: row;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/mocks/categories.json:
--------------------------------------------------------------------------------
1 | {
2 | "-NkfipU4uWpp7PhaMZyV": {
3 | "description": "Джи́нсы — брюки из плотной хлопчатобумажной ткани с проклёпанными стыками швов на карманах.",
4 | "name": "Джинсы",
5 | "url": "jeans"
6 | },
7 | "-NkfiwscdixHLuW87vr3": {
8 | "description": "Большой выбор мужских и женских футболок.",
9 | "name": "Футболки",
10 | "url": "tees"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/showcase/Filter/Filter.module.css:
--------------------------------------------------------------------------------
1 | .filter {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 8px;
5 | background-color: #e8ebf0;
6 | padding: 16px;
7 | box-sizing: border-box;
8 | border-radius: 4px;
9 | align-self: start;
10 | align-items: flex-start;
11 | }
12 |
13 | .title {
14 | font-family: 'Nunito';
15 | font-size: 18px;
16 | padding: 0 0 20px;
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/UI/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import classes from './Card.module.css';
2 |
3 | interface ICardProps {
4 | children: JSX.Element,
5 | fullWidth?: boolean
6 | }
7 |
8 | const Card: React.FC{children}
11 | )
12 | }
13 |
14 | export default Card;
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/mocks/brands.json:
--------------------------------------------------------------------------------
1 | {
2 | "-Nkfj5SQsQ_2rLftLjs1": {
3 | "description": "Эта британская марка, основанная Моррисом Купер, обладает богатой историей, которая ведет отсчет с 1908 года.",
4 | "name": "Lee Cooper"
5 | },
6 | "-NkfjDXFfFEkRgs_b01F": {
7 | "description": "Американская компания, известный производитель одежды (в первую очередь джинсовой) и обуви.",
8 | "name": "Levi's®"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/UI/Placeholder/Placeholder.tsx:
--------------------------------------------------------------------------------
1 | import classes from './Placeholder.module.css';
2 |
3 | interface IPlaceholderProps {
4 | text: string;
5 | size?: string;
6 | }
7 |
8 | const Placeholder: React.FC11 | {text} 12 |
13 | ); 14 | }; 15 | 16 | export default Placeholder; 17 | -------------------------------------------------------------------------------- /src/components/pages/showcasePages/ShowcasePage/ShowcasePage.module.css: -------------------------------------------------------------------------------- 1 | .showcase { 2 | min-width: 320px; 3 | max-width: 1280px; 4 | box-sizing: border-box; 5 | display: grid; 6 | grid-template-rows: fit-content(230px) auto min-content; 7 | min-height: 100vh; 8 | gap: 40px; 9 | margin: 0 auto; 10 | padding: 0 20px; 11 | } 12 | 13 | @media screen and (min-width: 1280px) { 14 | .showcase { 15 | padding: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/UI/Form/Form.tsx: -------------------------------------------------------------------------------- 1 | import classes from './Form.module.css'; 2 | 3 | interface IFormProps { 4 | onSubmit: (e: React.FormEvent{children}
;
9 | };
10 |
11 | export default SectionBodyGrid;
12 |
--------------------------------------------------------------------------------
/src/components/UI/Card/Card.module.css:
--------------------------------------------------------------------------------
1 | .card {
2 | width: 100%;
3 | max-width: 960px;
4 | display: inline-block;
5 | padding: 16px;
6 | box-sizing: border-box;
7 | border: 1px solid #fbfbfb;
8 | border-radius: 4px;
9 | background-color: #fff;
10 | position: relative;
11 | animation: fade 200ms linear;
12 | }
13 |
14 | .full-width {
15 | min-width: 100%;
16 | }
17 |
18 | @keyframes fade {
19 | from {
20 | opacity: 0;
21 | }
22 | to {
23 | opacity: 1;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/UI/IconButton/IconButton.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | border: none;
6 | outline: none;
7 | cursor: pointer;
8 | background-color: transparent;
9 | padding: 0;
10 | gap: 5px;
11 | fill: lightgray;
12 | }
13 |
14 | .button:disabled {
15 | cursor: default;
16 | fill: lightgray;
17 | }
18 |
19 | .button:hover:not(:disabled) {
20 | fill: #4faa37;
21 | }
22 |
23 | .column {
24 | flex-direction: column;
25 | }
26 |
--------------------------------------------------------------------------------
/src/utils/helpers.ts:
--------------------------------------------------------------------------------
1 | export type FirebaseObj = {
2 | [key: string]: {
3 | [key: string]: string | number | { [key: string]: string | number };
4 | };
5 | };
6 |
7 | export const handleObj = (obj: FirebaseObj | null): any[] => {
8 | if (!obj) {
9 | return [];
10 | }
11 |
12 | return Object.entries(obj).map(([id, fields]) => ({ id, ...fields }));
13 | };
14 |
15 | export const wait = async (ms: number) => {
16 | return new Promise((resolve) => {
17 | setTimeout(resolve, ms);
18 | });
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/UI/Toggle/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import classes from './Toggle.module.css';
2 |
3 | interface IToggleProps {
4 | value: boolean,
5 | onChange: () => void
6 | }
7 |
8 | const Toggle: React.FC
11 |
14 | );
15 | };
16 |
17 | export default SectionHeader;
18 |
--------------------------------------------------------------------------------
/src/store/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import brandSlice from './BrandSlice';
3 | import categoryReducer from './CategorySlice';
4 | import commonSlice from './CommonSlice';
5 | import productReducer from './ProductSlice';
6 | import userSlice from './UserSlice';
7 |
8 | export const store = configureStore({
9 | reducer: {
10 | common: commonSlice,
11 | category: categoryReducer,
12 | product: productReducer,
13 | brand: brandSlice,
14 | user: userSlice,
15 | },
16 | });
17 |
18 | export type RootState = ReturnType{title}
12 | {description &&{description}
} 13 |
12 | Фильтр по брендам
13 | {checkboxItems.map((item) => (
14 | onCheck(item.id)} />
15 | ))}
16 |
17 | );
18 | };
19 |
20 | export default Filter;
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src",
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/UI/Badge/Badge.module.css:
--------------------------------------------------------------------------------
1 | .link {
2 | text-decoration: none;
3 | }
4 |
5 | .badge {
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | }
10 | .wrapper {
11 | position: relative;
12 | }
13 |
14 | .count {
15 | min-width: 18px;
16 | height: 18px;
17 | position: absolute;
18 | top: -9px;
19 | right: -8px;
20 | font-size: 10px;
21 | background-color: #f44336;
22 | color: #fff;
23 | border-radius: 50%;
24 | align-self: center;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | z-index: 2;
29 | }
30 |
31 | .text {
32 | font-size: 12px;
33 | color: #222222;
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/UI/LoadMore/LoadMore.tsx:
--------------------------------------------------------------------------------
1 | import Button from '../Button/Button';
2 |
3 | interface ILoadMoreProps {
4 | count: number;
5 | itemsListLength: number;
6 | onClick: (count: number) => void;
7 | itemsLimit: number;
8 | }
9 |
10 | const LoadMore: React.FC
15 |
18 |
15 | {message}
16 | {actionName && (
17 |
18 | {actionName}
19 |
20 | )}
21 |
22 | )}
23 |
24 | );
25 | };
26 |
27 | export default Toast;
28 |
--------------------------------------------------------------------------------
/src/components/UI/Badge/Badge.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import classes from './Badge.module.css';
3 |
4 | interface IBadgeProps {
5 | icon: JSX.Element;
6 | count: number;
7 | title?: string;
8 | to: string;
9 | }
10 |
11 | const Badge: React.FC
15 |
21 |
22 | );
23 | };
24 |
25 | export default Badge;
26 |
--------------------------------------------------------------------------------
/src/components/UI/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import Spinner from '../Spinner/Spinner';
2 | import classes from './Button.module.css';
3 |
4 | interface IButtonProps {
5 | children?: string;
6 | mode: 'primary' | 'secondary';
7 | type?: 'button' | 'submit';
8 | isDisabled?: boolean;
9 | onClick?: () => void;
10 | isLoading?: boolean
11 | }
12 |
13 | const Button: React.FC
16 | {count > 0 &&
19 | {title && {title}}
20 | {count}
}
17 | {icon}
18 |
22 | {icon}
23 | {isActive && {message}}
24 |
25 | );
26 | };
27 |
28 | export default Tooltip;
29 |
--------------------------------------------------------------------------------
/src/components/UI/icons/ProductIcon/ProductIcon.tsx:
--------------------------------------------------------------------------------
1 | import classes from './ProductIcon.module.css';
2 |
3 | interface IProductIconProps {
4 | width?: number;
5 | height?: number;
6 | }
7 | const ProductIcon: React.FC
10 |
12 | <>
13 |
16 |
18 | );
19 | };
20 |
21 | export default ShowcasePage;
22 |
--------------------------------------------------------------------------------
/src/components/UI/IconButton/IconButton.tsx:
--------------------------------------------------------------------------------
1 | import classes from './IconButton.module.css';
2 |
3 | interface IIconButtonProps {
4 | children: JSX.Element;
5 | onClick: () => void;
6 | isDisabled?: boolean;
7 | column?: boolean;
8 | type?: 'button' | 'submit';
9 | }
10 |
11 | const IconButton: React.FC{title}
16 | {actionBtnText && ( 17 | 20 | )} 21 |
24 |
27 |
36 | {errorText && {errorText}}
37 |
38 | );
39 | };
40 |
41 | export default Textarea;
42 |
--------------------------------------------------------------------------------
/src/components/layouts/adminLayouts/Sidebar/SidebarItem/SidebarItem.module.css:
--------------------------------------------------------------------------------
1 | .activeLink {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | font-size: 12px;
6 | text-decoration: none;
7 | gap: 10px;
8 | color: #ffc43f;
9 | fill: #ffc43f;
10 | justify-content: center;
11 | }
12 |
13 | .link {
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | font-size: 12px;
18 | text-decoration: none;
19 | color: white;
20 | display: flex;
21 | justify-content: center;
22 | gap: 10px;
23 | fill: white;
24 | }
25 |
26 | .link-text {
27 | font-size: 14px;
28 | }
29 |
30 | .link:hover {
31 | color: #ffc43f;
32 | fill: #ffc43f;
33 | transition: all 0.3s linear;
34 | opacity: 0.7;
35 | }
36 |
37 | @media (min-width: 768px) {
38 | .activeLink {
39 | font-size: 16px;
40 | flex-direction: row;
41 | }
42 |
43 | .link-text {
44 | font-size: 18px;
45 | }
46 |
47 | .link {
48 | font-size: 16px;
49 | flex-direction: row;
50 | }
51 |
52 | .open {
53 | display: block;
54 | width: 100%;
55 | }
56 |
57 | .close {
58 | display: none;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/pages/showcasePages/ProductPage/InfoBlock/InfoBlock.tsx:
--------------------------------------------------------------------------------
1 | import BrandsIcon from '../../../../UI/icons/BrandsIcon/BrandsIcon';
2 | import CheckIcon from '../../../../UI/icons/CheckIcon/CheckIcon';
3 | import DeliveryIcon from '../../../../UI/icons/DeliveryIcon/DeliveryIcon';
4 | import PriceIcon from '../../../../UI/icons/PriceIcon/PriceIcon';
5 | import classes from './InfoBlock.module.css';
6 |
7 | const data = [
8 | {
9 | id: 1,
10 | name: 'Быстрая доставка',
11 | Icon: DeliveryIcon,
12 | },
13 | {
14 | id: 2,
15 | name: 'Выгодные цены',
16 | Icon: PriceIcon,
17 | },
18 | {
19 | id: 3,
20 | name: 'Гарантия качества',
21 | Icon: CheckIcon,
22 | },
23 | {
24 | id: 4,
25 | name: 'Настоящие бренды',
26 | Icon: BrandsIcon,
27 | },
28 | ];
29 |
30 | const InfoBlock: React.FC = () => {
31 | return (
32 |
33 | {data.map(({ id, name, Icon }) => (
34 |
40 | );
41 | };
42 |
43 | export default InfoBlock;
44 |
--------------------------------------------------------------------------------
/src/components/pages/adminPages/AdminPage/AdminPage.tsx:
--------------------------------------------------------------------------------
1 | import classes from './AdminPage.module.css';
2 | import { Outlet } from 'react-router-dom';
3 | import Header from '../../../layouts/adminLayouts/Header/Header';
4 | import Sidebar from '../../../layouts/adminLayouts/Sidebar/Sidebar';
5 | import Main from '../../../layouts/adminLayouts/Main/Main';
6 | import { useEffect } from 'react';
7 | import { useDispatch, useSelector } from 'react-redux';
8 | import { AppDispatch, RootState } from '../../../../store/store';
9 | import { fetchOrders } from '../../../../store/CommonSlice';
10 | import Toast from '../../../UI/Toast/Toast';
11 | const AdminPage: React.FC = () => {
12 | const dispatch = useDispatch
35 |
38 | ))}
39 |
21 |
24 | <>
25 |
29 |
30 | );
31 | };
32 |
33 | export default AdminPage;
34 |
--------------------------------------------------------------------------------
/src/components/pages/showcasePages/NotFound/NotFound.module.css:
--------------------------------------------------------------------------------
1 | .not-found {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | box-sizing: border-box;
6 | gap: 20px;
7 | align-self: stretch;
8 | }
9 |
10 | .title {
11 | font-family: 'Nunito';
12 | font-size: 64px;
13 | }
14 |
15 | .wrapper {
16 | display: flex;
17 | flex-direction: column;
18 | gap: 8px;
19 | text-align: center;
20 | align-self: stretch;
21 | }
22 |
23 | .link {
24 | display: inline-block;
25 | text-align: center;
26 | text-decoration: none;
27 | font-size: 12px;
28 | color: #fff;
29 | padding: 5px 10px;
30 | background-color: #5ec343;
31 | border-radius: 4px;
32 | transition: opacity 200ms linear;
33 | }
34 |
35 | .link:hover {
36 | opacity: 0.7;
37 | transition: opacity 200ms linear;
38 | }
39 |
40 | .link-wrapper {
41 | display: flex;
42 | gap: 20px;
43 | flex-direction: column;
44 | background-color: #e8ebf0;
45 | padding: 16px;
46 | box-sizing: border-box;
47 | border-radius: 4px;
48 | }
49 |
50 | @media screen and (min-width: 768px) {
51 | .link-wrapper {
52 | flex-direction: row;
53 | }
54 |
55 | .wrapper {
56 | align-self: center;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/UI/icons/DeliveryIcon/DeliveryIcon.tsx:
--------------------------------------------------------------------------------
1 | interface IFavoriteIconProps {
2 | width?: number;
3 | height?: number;
4 | filled?: boolean;
5 | fill?: string;
6 | }
7 | const DeliveryIcon: React.FC
14 |
34 | );
35 | };
36 |
37 | export default CartSummary;
38 |
--------------------------------------------------------------------------------
/src/components/UI/Checkbox/Checkbox.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: block;
3 | position: relative;
4 | padding-left: 30px;
5 | margin-bottom: 12px;
6 | cursor: pointer;
7 | font-size: 14px;
8 | }
9 |
10 | .container input {
11 | position: absolute;
12 | opacity: 0;
13 | cursor: pointer;
14 | height: 0;
15 | width: 0;
16 | }
17 |
18 | .checkmark {
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | height: 18px;
23 | width: 18px;
24 | border-radius: 3px;
25 | background-color: #fff;
26 | outline: 2px solid lightgray;
27 | }
28 |
29 | .container:hover input ~ .checkmark {
30 | background-color: #f2f2f2;
31 | transition: all 150ms linear;
32 | }
33 |
34 | .container input:checked ~ .checkmark {
35 | border: none;
36 | outline-color: #fc0;
37 | background-color: #fc0;
38 | }
39 |
40 | .checkmark:after {
41 | content: '';
42 | position: absolute;
43 | display: none;
44 | }
45 |
46 | .container input:checked ~ .checkmark:after {
47 | display: block;
48 | }
49 |
50 | .container .checkmark:after {
51 | left: 6px;
52 | top: 2px;
53 | width: 3px;
54 | height: 8px;
55 | border: solid rgba(0, 0, 0, 0.6);
56 | border-width: 0 3px 3px 0;
57 | transform: rotate(45deg);
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/UI/Input/Input.tsx:
--------------------------------------------------------------------------------
1 | import classes from './Input.module.css';
2 |
3 | interface IInputProps {
4 | label: string;
5 | errorText?: string;
6 | name: string;
7 | type: string;
8 | required?: boolean;
9 | placeholder: string;
10 | onChange: (e: React.ChangeEvent
15 | Итого
16 | {price} ₽
17 |
18 |
19 |
20 | Выгода
21 | {profit} ₽
22 |
23 |
24 |
25 | Всего товаров
26 | {quantity} шт
27 |
28 |
29 |
30 | Вес
31 | {weight} кг
32 |
33 |
28 |
31 |
42 | {errorText && {errorText}}
43 |
44 | );
45 | };
46 |
47 | export default Input;
48 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "e-commerce-react-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.8.3",
7 | "@testing-library/jest-dom": "^5.16.4",
8 | "@testing-library/react": "^13.3.0",
9 | "@testing-library/user-event": "^14.3.0",
10 | "@types/jest": "^27.5.2",
11 | "@types/node": "^17.0.45",
12 | "@types/react": "^18.0.15",
13 | "@types/react-dom": "^18.0.6",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-redux": "^8.0.2",
17 | "react-router-dom": "^6.3.0",
18 | "react-scripts": "5.0.1",
19 | "typescript": "^4.7.4",
20 | "uuidv4": "^6.2.13",
21 | "web-vitals": "^2.1.4"
22 | },
23 | "scripts": {
24 | "start": "react-scripts start",
25 | "build": "react-scripts build",
26 | "test": "react-scripts test",
27 | "eject": "react-scripts eject"
28 | },
29 | "eslintConfig": {
30 | "extends": [
31 | "react-app",
32 | "react-app/jest"
33 | ]
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/layouts/adminLayouts/Sidebar/Sidebar.module.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 | background-color: #202124;
3 | border-radius: 20px;
4 | padding: 10px 20px;
5 | }
6 |
7 | .navigation {
8 | width: 100%;
9 | }
10 |
11 | .toggle-btn {
12 | display: none;
13 | }
14 |
15 | .list {
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | gap: 24px;
20 | list-style: none;
21 | padding: 0;
22 | margin: 0;
23 | width: 100%;
24 | }
25 |
26 | @media (min-width: 768px) {
27 | .sidebar {
28 | display: flex;
29 | flex-direction: column;
30 | align-items: center;
31 | gap: 40px;
32 | width: 70px;
33 | box-sizing: border-box;
34 | min-height: 100vh;
35 | transition: width 0.3s ease;
36 | grid-column-start: 1;
37 | grid-column-end: 2;
38 | grid-row-start: 1;
39 | grid-row-end: 3;
40 | border-radius: 0;
41 | }
42 |
43 | .list {
44 | flex-direction: column;
45 | gap: 30px;
46 | }
47 |
48 | .list-opened {
49 | align-items: flex-start;
50 | }
51 |
52 | .toggle-btn {
53 | display: flex;
54 | align-items: center;
55 | border: none;
56 | background-color: transparent;
57 | cursor: pointer;
58 | }
59 |
60 | .opened {
61 | align-self: flex-end;
62 | }
63 |
64 | .open {
65 | width: 240px;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/showcase/ProductCardList/ProductCardList.module.css:
--------------------------------------------------------------------------------
1 | .product-card-list {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 40px;
5 | align-items: center;
6 | justify-content: space-between;
7 | height: 100%;
8 | position: relative;
9 | }
10 |
11 | .sort-wrapper {
12 | width: 100%;
13 | background-color: #e8ebf0;
14 | display: flex;
15 | border-radius: 2px;
16 | justify-content: flex-end;
17 | padding: 5px;
18 | box-sizing: border-box;
19 | }
20 |
21 | .sort {
22 | font-size: 14px;
23 | cursor: pointer;
24 | min-width: 235px;
25 | transition: all 150ms linear;
26 | }
27 |
28 | .sort:hover {
29 | transition: all 150ms linear;
30 | color: red;
31 | }
32 |
33 | .list-wrapper {
34 | display: flex;
35 | flex-direction: column;
36 | gap: 10px;
37 | }
38 |
39 | .list {
40 | display: grid;
41 | gap: 40px;
42 | padding: 0;
43 | list-style: none;
44 | box-sizing: border-box;
45 | margin: 0;
46 | }
47 |
48 | @media screen and (min-width: 768px) {
49 | .list {
50 | grid-template-columns: repeat(2, 1fr);
51 | gap: 40px 20px;
52 | }
53 | }
54 |
55 | @media screen and (min-width: 1024px) {
56 | .list {
57 | grid-template-columns: repeat(3, 1fr);
58 | }
59 | }
60 |
61 | @media screen and (min-width: 1280px) {
62 | .list {
63 | grid-template-columns: repeat(4, 1fr);
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/hooks/useFilterByBrand.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useParams } from 'react-router-dom';
3 | import { Product } from '../types/common';
4 |
5 | const useFilterByBrand = (products: Product[], checkboxBrands: any[]) => {
6 | const [checkedFilterItems, setCheckedFilterItems] = useState
11 |
35 |
15 | Перейти
16 |
34 |
17 |
18 | На главную
19 |
20 |
21 | В админку
22 |
23 |
24 |
30 | В репозиторий
31 |
32 |
33 |
29 |
30 | {label} {required && *}
31 |
32 |
33 |
44 | {errorText && {errorText}}
45 |
46 | );
47 | };
48 |
49 | export default ProductFormSelect;
50 |
--------------------------------------------------------------------------------
/src/components/showcase/Cart/Cart.tsx:
--------------------------------------------------------------------------------
1 | import { ProductCartItem } from '../../../types/common';
2 | import classes from './Cart.module.css';
3 | import CartItem from './CartItem/CartItem';
4 | import CartSummary from './CartSummary/CartSummary';
5 |
6 | interface ICartProps {
7 | cart: ProductCartItem[];
8 | onWish: ({ id, isWished }: { id: ProductCartItem['productId']; isWished: boolean }) => void;
9 | onRemove: (id: ProductCartItem['productId']) => void;
10 | price: ProductCartItem['price'];
11 | weight: ProductCartItem['weight'];
12 | profit: ProductCartItem['profit'];
13 | quantity: ProductCartItem['quantity'];
14 | }
15 |
16 | const Cart: React.FC
19 |
34 | );
35 | };
36 |
37 | export default Cart;
38 |
--------------------------------------------------------------------------------
/src/components/layouts/showcaseLayouts/Section/Section.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import { useNavigate } from 'react-router-dom';
3 | import { GO_TO_CART, GO_TO_WISHLIST } from '../../../../constants/messages';
4 | import { PATHS } from '../../../../constants/routes';
5 | import { hideAlert } from '../../../../store/CommonSlice';
6 | import { AppDispatch, RootState } from '../../../../store/store';
7 | import Toast from '../../../UI/Toast/Toast';
8 | import classes from './Section.module.css';
9 |
10 | interface ISectionProps {
11 | children: JSX.Element;
12 | }
13 |
14 | const Section: React.FC
20 | {cart.map((cartItem) => {
21 | return (
22 | onRemove(cartItem.productId)}
27 | onWishlist={() => onWish({ id: cartItem.productId, isWished: cartItem.isWished })}
28 | />
29 | );
30 | })}
31 |
32 |
26 |
30 | {isMenuOpen && (
31 |
42 | )}
43 |
44 | );
45 | };
46 |
47 | export default Menu;
48 |
--------------------------------------------------------------------------------
/src/components/admin/SettingsList/SettingsList.tsx:
--------------------------------------------------------------------------------
1 | import classes from './SettingsList.module.css';
2 | import IconButton from '../../UI/IconButton/IconButton';
3 | import EditIcon from '../../UI/icons/EditIcon/EditIcon';
4 | import TrashIcon from '../../UI/icons/TrashIcon/TrashIcon';
5 | import Chip from '../../UI/Chip/Chip';
6 |
7 | interface ISettingsListProps {
8 | items: any[];
9 | onEdit: (id: string) => void;
10 | onDelete: (id: string) => void;
11 | }
12 |
13 | const SettingsList: React.FC-
16 | {items.map(({ id, name, productsCount, discountedProductsCount }) => (
17 |
-
18 | 19 | {name} 20 |30 | 31 |21 |29 |
onEdit(id)}> 22 | 24 | 25 |23 | onDelete(id)}> 26 | 28 |27 | 32 |35 |33 | {discountedProductsCount > 0 && } 34 |
36 | ))}
37 |
30 | Заказ оформлен
31 | Вы будете перенаправлены на главную страницу через {counter} секунд
32 | Заказ можно посмотреть в админке
33 |
34 |
35 | Перейти в админку
36 |
37 |
38 |
21 |
24 |
25 |
32 |
33 | );
34 | };
35 |
36 | export default Sidebar;
37 |
--------------------------------------------------------------------------------
/src/components/UI/Toast/Toast.module.css:
--------------------------------------------------------------------------------
1 | .toast {
2 | display: flex;
3 | gap: 10px;
4 | flex-direction: column;
5 | align-items: center;
6 | justify-content: center;
7 | color: white;
8 | padding: 8px 14px;
9 | border-radius: 4px;
10 | position: fixed;
11 | top: 25px;
12 | left: 50%;
13 | transform: translateX(-50%);
14 | font-size: 14px;
15 | animation: fade 200ms linear;
16 | z-index: 5;
17 | box-sizing: border-box;
18 | min-width: 280px;
19 | }
20 |
21 | @keyframes fade {
22 | from {
23 | opacity: 0;
24 | }
25 | to {
26 | opacity: 1;
27 | }
28 | }
29 |
30 | .action {
31 | text-align: center;
32 | border-top: 1px solid #fff;
33 | padding-top: 5px;
34 | width: 100%;
35 | cursor: pointer;
36 | transition: opacity 150ms linear;
37 | }
38 |
39 | .action:hover {
40 | opacity: 0.7;
41 | transition: opacity 150ms linear;
42 | }
43 |
44 | .info {
45 | color: #222222;
46 | background-color: #fcf7eb;
47 | box-shadow: 0px 6px 12px rgba(130, 82, 208, 0.16);
48 | }
49 |
50 | .success {
51 | background-color: #5ec343;
52 | box-shadow: 0px 6px 12px rgba(0, 176, 49, 0.16);
53 | }
54 |
55 | .warning {
56 | background-color: #ffa801;
57 | box-shadow: 0px 6px 12px rgba(245, 152, 33, 0.16);
58 | }
59 |
60 | .error {
61 | background-color: #ef2525;
62 | box-shadow: 0px 6px 12px rgba(255, 7, 7, 0.16);
63 | }
64 |
65 | @media screen and (min-width: 768px) {
66 | .toast {
67 | flex-direction: row;
68 | width: auto;
69 | gap: 25px;
70 | }
71 |
72 | .action {
73 | text-align: left;
74 | padding-top: 0;
75 | border-top: none;
76 | padding-left: 10px;
77 | border-left: 1px solid #fff;
78 | width: auto;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/UI/Select/Select.module.css:
--------------------------------------------------------------------------------
1 | .select {
2 | width: 100%;
3 | border: 1px solid lightgray;
4 | border-radius: 4px;
5 | padding: 9px 20px;
6 | display: flex;
7 | justify-content: space-between;
8 | align-items: baseline;
9 | position: relative;
10 | box-sizing: border-box;
11 | outline: 2px solid transparent;
12 | }
13 |
14 | .default-value {
15 | cursor: default;
16 | }
17 |
18 | .disabled {
19 | color: #c3c3c3;
20 | background: #f2f2f2;
21 | }
22 |
23 |
24 |
25 | .select::after {
26 | content: '';
27 | width: 12px;
28 | height: 8px;
29 | background-color: black;
30 | clip-path: polygon(100% 0%, 0 0%, 50% 100%);
31 | transition: background-color 100ms linear;
32 | }
33 |
34 | .disabled.select::after {
35 | transition: all 100ms linear;
36 | background-color: #c3c3c3;
37 |
38 | }
39 |
40 |
41 | .select:focus:not(.disabled) {
42 | transition: all 250ms linear;
43 | background-color: #fcf7eb;
44 | border-color: #ffc43f;
45 | }
46 |
47 | .options {
48 | display: flex;
49 | flex-direction: column;
50 | list-style: none;
51 | padding: 12px 0;
52 | margin: 0;
53 | position: absolute;
54 | top: 45px;
55 | right: 0;
56 | left: 0;
57 | z-index: 1;
58 | border: 1px solid lightgray;
59 | border-radius: 4px;
60 | background-color: white;
61 | box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.1);
62 | }
63 |
64 | .active {
65 | background-color: #ffc43f;
66 | }
67 |
68 | .option {
69 | cursor: default;
70 | padding: 10px 0 10px 20px;
71 | }
72 |
73 | .option:hover {
74 | transition: all 150ms linear;
75 | background-color: #ffc43f;
76 | }
77 |
78 |
79 |
80 | .error {
81 | transition: outline 0.3s ease-in;
82 | outline: 2px solid #ef2525;
83 | }
--------------------------------------------------------------------------------
/src/components/layouts/showcaseLayouts/ShowcaseHeader/ShowcaseHeader.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 40px;
5 | }
6 |
7 | .logo {
8 | width: 220px;
9 | transition: opacity 100ms linear;
10 | }
11 |
12 | .link {
13 | display: inline-block;
14 | text-align: center;
15 | text-decoration: none;
16 | font-size: 12px;
17 | color: #fff;
18 | padding: 5px 10px;
19 | background-color: #5ec343;
20 | border-radius: 4px;
21 | transition: opacity 200ms linear;
22 | }
23 |
24 | .link:hover {
25 | opacity: 0.7;
26 | transition: opacity 200ms linear;
27 | }
28 |
29 | .logo:hover {
30 | transition: opacity 100ms linear;
31 | opacity: 0.7;
32 | }
33 |
34 | .wrapper {
35 | display: flex;
36 | align-items: center;
37 | justify-content: center;
38 | flex-direction: column;
39 | gap: 20px;
40 | }
41 |
42 | .actions-wrapper {
43 | display: flex;
44 | flex-direction: column-reverse;
45 | width: 100%;
46 | gap: 20px;
47 | }
48 |
49 | .badge-wrapper {
50 | display: flex;
51 | gap: 20px;
52 | justify-content: center;
53 | }
54 |
55 | .admin-link-wrapper {
56 | display: flex;
57 | gap: 20px;
58 | justify-content: flex-end;
59 | background-color: #e8ebf0;
60 | padding: 16px;
61 | box-sizing: border-box;
62 | border-bottom-right-radius: 4px;
63 | border-bottom-left-radius: 4px;
64 | }
65 |
66 | @media screen and (min-width: 768px) {
67 | .header {
68 | gap: 20px;
69 | }
70 |
71 | .wrapper {
72 | flex-direction: row;
73 | justify-content: flex-start;
74 | }
75 |
76 | .actions-wrapper {
77 | width: 100%;
78 | flex-direction: row;
79 | justify-content: space-between;
80 | align-items: center;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/UI/icons/CartIcon/CartIcon.tsx:
--------------------------------------------------------------------------------
1 | import classes from './CartIcon.module.css';
2 |
3 | interface ICartIconProps {
4 | width?: number;
5 | height?: number;
6 | filled?: boolean;
7 | fill?: string;
8 | }
9 | const CartIcon: React.FC
36 |
39 |
40 | {productInCart?.quantity || 1}
41 |
44 |
45 | );
46 | };
47 |
48 | export default QuantityBlock;
49 |
--------------------------------------------------------------------------------
/src/components/admin/Order/Order.module.css:
--------------------------------------------------------------------------------
1 | .order-content {
2 | background-color: #ecf7ed;
3 | padding: 16px;
4 | border-radius: 4px;
5 | box-sizing: border-box;
6 | }
7 |
8 | .table {
9 | border-collapse: collapse;
10 | }
11 |
12 | .order-content-title {
13 | font-family: 'Nunito';
14 | padding: 0;
15 | font-size: 22px;
16 | display: block;
17 | }
18 |
19 | .summary-row {
20 | cursor: pointer;
21 | }
22 |
23 | .summary-row:hover {
24 | background-color: white;
25 | color: red;
26 | }
27 |
28 | .no-pointer-events {
29 | pointer-events: none;
30 | }
31 |
32 | .summary {
33 | font-family: 'Nunito';
34 | text-align: right;
35 | font-weight: 700;
36 | font-size: 20px;
37 | padding: 0;
38 | background-color: #fff;
39 | }
40 |
41 | .left-top-radius {
42 | border-top-left-radius: 4px;
43 | }
44 |
45 | .right-top-radius {
46 | border-top-right-radius: 4px;
47 | }
48 |
49 | .left-bottom-radius {
50 | border-bottom-left-radius: 4px;
51 | }
52 |
53 | .right-bottom-radius {
54 | border-bottom-right-radius: 4px;
55 | }
56 |
57 | .text {
58 | font-size: 16px;
59 | background-color: #fff;
60 | }
61 |
62 | @media (max-width: 768px) {
63 | .no-pointer-events,
64 | .order-content {
65 | display: none;
66 | }
67 |
68 | .summary-row {
69 | pointer-events: none;
70 | }
71 |
72 | .sumarry-cell:nth-of-type(1):before {
73 | content: 'Дата заказа';
74 | font-weight: 600;
75 | width: 100px;
76 | }
77 |
78 | .sumarry-cell:nth-of-type(2):before {
79 | content: 'Покупатель';
80 | font-weight: 600;
81 | }
82 |
83 | .sumarry-cell:nth-of-type(3):before {
84 | content: 'Телефон';
85 | font-weight: 600;
86 | }
87 |
88 | .sumarry-cell:nth-of-type(4):before {
89 | content: 'Адрес';
90 | font-weight: 600;
91 | }
92 |
93 | .sumarry-cell:nth-of-type(5):before {
94 | content: 'Сумма';
95 | font-weight: 600;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
44 | {value ? value : defaultOptionText}
45 |
46 | {isOpen && (
47 |
63 | );
64 | };
65 |
66 | export default Select;
67 |
--------------------------------------------------------------------------------
/src/components/showcase/AddToCartBtn/AddToCartBtn.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { PRODUCT_ADDED_TO_CART } from '../../../constants/messages';
4 | import { showAlert } from '../../../store/CommonSlice';
5 | import { AppDispatch, RootState } from '../../../store/store';
6 | import { setProductToCart, setToLocalStorage } from '../../../store/UserSlice';
7 | import { AlertType, CartItem } from '../../../types/common';
8 | import QuantityBlock from '../QuantityBlock/QuantityBlock';
9 | import classes from './AddToCartBtn.module.css';
10 |
11 | interface IAddToCartBtnProps {
12 | product: CartItem;
13 | }
14 |
15 | const AddToCartBtn: React.FC-
48 |
- onSelect({ field })}> 49 | {defaultOptionText} 50 | 51 | {options.map(({ id, name, url }) => ( 52 |
- onSelect({ name, id, field, url })} 56 | > 57 | {name} 58 | 59 | ))} 60 |
42 | {isCLicked &&
50 | );
51 | };
52 |
53 | export default AddToCartBtn;
54 |
--------------------------------------------------------------------------------
/src/components/pages/showcasePages/DiscountProductsPage/DiscountProductsPage.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from 'react-redux';
2 | import { NO_DISCOUNTED_PRODUCTS } from '../../../../constants/messages';
3 | import useFilterByBrand from '../../../../hooks/useFilterByBrand';
4 | import { RootState } from '../../../../store/store';
5 | import Section from '../../../layouts/showcaseLayouts/Section/Section';
6 | import SectionBody from '../../../layouts/showcaseLayouts/Section/SectionBody/SectionBody';
7 | import SectionBodyGrid from '../../../layouts/showcaseLayouts/Section/SectionBody/SectionBodyGrid/SectionBodyGrid';
8 | import SectionHeader from '../../../layouts/showcaseLayouts/Section/SectionHeader/SectionHeader';
9 | import Filter from '../../../showcase/Filter/Filter';
10 | import ProductCardList from '../../../showcase/ProductCardList/ProductCardList';
11 | import Placeholder from '../../../UI/Placeholder/Placeholder';
12 |
13 | interface IDiscountProductsPageProps {}
14 |
15 | const DiscountProductsPage: React.FC
37 |
38 |
40 |
41 |
42 | {discount &&
44 |
45 |
46 | {discount ? (
47 |
48 | {discount.discountedPrice} ₽
49 | {price} ₽
50 |
51 | ) : (
52 | {price} ₽
53 | )}
54 |
55 |
56 | {name}
57 |
58 |
59 |
60 |
63 | | Дата | 28 |Покупатель | 29 |Телефон | 30 |Адрес | 31 |Сумма | 32 |
|---|---|---|---|---|
|
38 | |
40 |
32 |
75 |
76 | );
77 | };
78 |
79 | export default SettingsForm;
80 |
--------------------------------------------------------------------------------
/src/components/showcase/ProductCard/ProductCard.module.css:
--------------------------------------------------------------------------------
1 | .product-card {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | gap: 12px;
6 | box-sizing: border-box;
7 | transition: all 200ms linear;
8 | animation: fade 200ms linear;
9 | position: relative;
10 | }
11 |
12 | @keyframes fade {
13 | from {
14 | opacity: 0;
15 | }
16 | to {
17 | opacity: 1;
18 | }
19 | }
20 |
21 | .image-wrapper {
22 | position: relative;
23 | }
24 |
25 | .image-wrapper::after {
26 | content: '';
27 | position: absolute;
28 | top: 0;
29 | left: 0;
30 | right: 0;
31 | bottom: 0;
32 | background-color: transparent;
33 | transition: background-color 120ms linear;
34 | z-index: 1;
35 | }
36 |
37 | .image-wrapper:hover::after {
38 | content: '';
39 | position: absolute;
40 | top: 0;
41 | left: 0;
42 | right: 0;
43 | bottom: 0;
44 | background-color: rgba(255, 255, 255, 0.5);
45 | transition: background-color 120ms linear;
46 | }
47 |
48 | .image {
49 | border-radius: 4px;
50 | object-fit: contain;
51 | display: block;
52 | width: 100%;
53 | }
54 |
55 | .discount-chip {
56 | position: absolute;
57 | top: 9px;
58 | left: 9px;
59 | }
60 |
61 | .wishlist-btn {
62 | position: absolute;
63 | top: 9px;
64 | right: 9px;
65 | z-index: 3;
66 | }
67 |
68 | .title {
69 | text-decoration: none;
70 | align-self: flex-start;
71 | font-weight: 400;
72 | font-size: 14px;
73 | line-height: 24px;
74 | color: #222222;
75 | margin: 0;
76 | }
77 |
78 | .title:hover {
79 | color: #f44336;
80 | }
81 |
82 | .price {
83 | display: flex;
84 | align-items: center;
85 | gap: 10px;
86 | align-self: flex-start;
87 | color: #222222;
88 | font-weight: 700;
89 | font-size: 20px;
90 | }
91 |
92 | .old-price {
93 | font-size: 16px;
94 | color: lightgray;
95 | font-weight: 400;
96 | text-decoration: line-through;
97 | }
98 |
99 | .chips-wrapper {
100 | align-self: flex-start;
101 | display: flex;
102 | gap: 10px;
103 | }
104 |
105 |
106 | @media screen and (min-width: 768px) {
107 | .image {
108 | min-height: 331px;
109 | }
110 | }
111 |
112 | @media screen and (min-width: 1024px) {
113 | .image {
114 | min-height: 334px;
115 | }
116 | }
117 |
118 | @media screen and (min-width: 1280px) {
119 | .image {
120 | min-height: 346px;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/layouts/showcaseLayouts/ShowcaseHeader/ShowcaseHeader.tsx:
--------------------------------------------------------------------------------
1 | import Badge from '../../../UI/Badge/Badge';
2 | import CartIcon from '../../../UI/icons/CartIcon/CartIcon';
3 | import FavoriteIcon from '../../../UI/icons/FavoriteIcon/FavoriteIcon';
4 | import classes from './ShowcaseHeader.module.css';
5 | import Logo from '../../../../assets/logo.png';
6 | import { PATHS } from '../../../../constants/routes';
7 | import { useSelector } from 'react-redux';
8 | import { RootState } from '../../../../store/store';
9 | import Menu from '../../../showcase/Menu/Menu';
10 | import { Link } from 'react-router-dom';
11 |
12 | interface IShowcaseHeaderProps {}
13 |
14 | const ShowcaseHeader: React.FC
22 |
23 | Перейти в админку
24 |
25 |
26 |
32 | Перейти в репозиторий
33 |
34 |
35 |
36 |
37 |
38 | 
39 |
40 |
41 |
61 |
42 |
43 |
44 |
60 |
45 |
59 |
40 |
43 |
44 | {hasProducts &&
44 |
84 | );
85 | };
86 |
87 | export default CartItem;
88 |
--------------------------------------------------------------------------------
/src/components/pages/adminPages/ProductsPage/ProductsPage.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { AppDispatch, RootState } from '../../../../store/store';
4 | import ProductForm from '../../../admin/ProductForm/ProductForm';
5 | import Placeholder from '../../../UI/Placeholder/Placeholder';
6 | import Actions from '../../../layouts/adminLayouts/Actions/Actions';
7 | import Content from '../../../layouts/adminLayouts/Content/Content';
8 | import ProductsList from '../../../admin/ProductsList/ProductsList';
9 | import { removeSelectedProduct } from '../../../../store/ProductSlice';
10 | import Loader from '../../../UI/Loader/Loader';
11 | import {
12 | ADD_BRAND_AND_CATEGORY_MESSAGE,
13 | ADD_BRAND_MESSAGE,
14 | ADD_CATEGORY_MESSAGE,
15 | NO_PRODUCTS_MESSAGE,
16 | } from '../../../../constants/messages';
17 |
18 | const ProductsPage: React.FC = () => {
19 | const [isFormOpen, setIsFormOpen] = useState(false);
20 | const { brand, category, product } = useSelector((state: RootState) => state);
21 | const dispatch = useDispatch
45 | 
46 |
47 |
48 |
49 |
50 |
54 | {name}
55 |
56 |
57 |
58 |
74 |
75 |
59 |
60 | <>
61 |
65 |
66 |
67 | <>
68 |
72 |
73 |
76 |
83 |
77 | {totalPrice} ₽
78 | {discount && {totalPriceWithoutDiscount} ₽}
79 |
80 |
81 | {routes}
;
103 | };
104 |
105 | export default App;
106 |
--------------------------------------------------------------------------------
/src/components/showcase/ProductCardList/ProductCardList.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { useParams } from 'react-router-dom';
4 | import { AppDispatch, RootState } from '../../../store/store';
5 | import { wishListHandler } from '../../../store/UserSlice';
6 | import { Product } from '../../../types/common';
7 | import LoadMore from '../../UI/LoadMore/LoadMore';
8 | import ProductCard from '../ProductCard/ProductCard';
9 | import classes from './ProductCardList.module.css';
10 |
11 | interface IProductCardListProps {
12 | products: Product[];
13 | }
14 |
15 | const PRODUCT_LIST_LIMIT = 12;
16 |
17 | const ProductCardList: React.FC
85 |
119 | );
120 | };
121 |
122 | export default ProductCardList;
123 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Интернет-магазин
2 |
3 | Пэт проект интернет-магазин с витриной и админкой на React, Redux-Toolkit, TypeScript.
4 |
5 | ## Кратко
6 | - В админке можно добавлять товары/категории/бренды. На витрине это все динамически рендерится. Можно оформлять заказы и просматривать их в админке.
7 |
8 | ## Деплой
9 |
10 | https://flourishing-tartufo-ae4f52.netlify.app/
11 |
12 | ## Функционал
13 |
14 | ### Админка
15 |
16 | #### Страница заказов
17 | - На странице отображаются все оформленные заказы. По клику на заказ можно увидеть его состав и другую информацию
18 |
19 | #### Страница товаров
20 |
21 | - Кнопка Добавить товар не активна если нет ни одной категорий или ни одного бренда
22 | - В форме создания нового товара обязательные поля отмечены звездочками. Поля валидируются на пустое значение. Поле Изображение валидируется по регулярному выражению на соответствие прямой ссылке
23 | - По клику на кнопку Сохранить товар уходит POST запрос на сервер
24 | - Уже созданные товары можно редактировать и удалять. На сервер уходят запросы PATCH и DELETE.
25 | - Если при выполнении запроса с сервера возвращается ошибка, то рендерится всплывающее уведомление.
26 | - В списке товаров есть два фильтра: по категориям и брендам. Фильтры связаны и работают в обе стороны: если в фильтре по категориям выбрать категорию, то в фильтре по брендам будут отображаться только те бренды, у которых есть соответствующие категории. И наоборот, если сначала выбрать бренд, то в фильтре по категориям будут только категории соответствующего бренда. Список товаров на странице отображается в соответствии с выбранными значениями фильтров
27 | - Акционные товары с соответствующим бейджем
28 |
29 | #### Страница настроек
30 |
31 | - Можно добавлять, изменять или удалять категории и бренды (запросы GET, POST, PATCH, DELETE)
32 | - В карточках отображается количество товаров и количество товаров со скидкой у категорий и брендов
33 | - Категорию или бренд нельзя удалить если к ним привязаны товары. При попытке удалить рендерится уведомление
34 | - При изменении названия бренда или категории, актуальные данные отображаются на странице товаров в фильтрах и в самих товарах, а так же при создании нового товара.
35 | - Поля формы создания новой категорий или бренда валидируются на пустое значение
36 | - Если при выполнении сервер вернул ошибку, то рендерится уведомление
37 |
38 | ### Витрина
39 |
40 | Товары добавленные в *Избранные* и в корзину сохраняются в LS. При добавлении рендерится уведомление с ссылкой для перехода на соответствующую страницу.
41 |
42 | #### Шапка
43 | - Меню динамическое. В нем отображаются созданные в админке категории
44 |
45 | #### Роутинг
46 | - Главная страница — акционные товары (скидку можно задать в карточке товара в админке)
47 | - Страница категорий — динамический роутинг. Адрес страницы имеет следующий вид *site.com/:url*. Url можно задать в админке в настройках категории, таким образом ссылки получаются такими *site.com/jeans*
48 | - Карточка товара — вложенный динамический роутинг *site.com/:url/:id*
49 | - 404 страница для несуществующих роутов
50 | - Страница успешного оформления заказа с таймером обратного отсчета и редиректом на главную
51 |
52 | #### Каталог товаров
53 | - При рендере страницы товары сортируются по цене в возрастающием порядке
54 | - Порядок сортировки можно изменить по клику на *Сначала показывать*
55 | - Блок категорий товаров формируется исходя из категорий, которые были созданы в админке
56 | - Фильтр по брендам
57 | - Пагинация *Показать еще*
58 | - Описание категории рендерится если его указать в настройках категории
59 | - Товары можно добавить/удалить в *Избранные*
60 | - У карточек товаров рендерятся бейджи: размер скидки (если есть), производитель и категория
61 |
62 | #### Карточка товара
63 | - При добавлении товара в корзину рендерится уведомление с ссылкой для перехода в корзину
64 | - Товар можно добавить/удалить из *Избранного*
65 |
66 | #### Корзина
67 | - Можно изменить количество товара, добавить в *Избранное* или удалить. Можно удалить товар из корзины
68 | - В блоке *Итого* рассчитывается общая сумма заказа и вес (цену, скидку и вес можно указать в админке в карточке товара)
69 | - Поля формы валидируются на пустое значение
70 |
71 |
72 |
73 | ## Стек
74 |
75 | - React
76 | - Redux-Toolkit
77 | - TypeScript
78 | - Firebase
79 | - Адаптивная верстка
80 |
81 | ## Установка
82 |
83 | Для запуска на локальной машине необходимо:
84 |
85 | 1. Установить npm зависимости:
86 |
87 | ```sh
88 | npm install
89 | ```
90 |
91 | 2. Запустить в режиме разработки:
92 |
93 | ```sh
94 | npm run start
95 | ```
96 |
97 | Если все прошло успешно, проект будет запущен на `http://localhost:3000`
98 |
--------------------------------------------------------------------------------
/src/components/pages/showcasePages/ProductPage/ProductPage.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import { useParams } from 'react-router-dom';
3 | import { ADD_TO_WISHLIST, REMOVE_FROM_WISHLIST } from '../../../../constants/messages';
4 | import { AppDispatch, RootState } from '../../../../store/store';
5 | import { wishListHandler } from '../../../../store/UserSlice';
6 | import { CartItem, Product } from '../../../../types/common';
7 | import Section from '../../../layouts/showcaseLayouts/Section/Section';
8 | import SectionBody from '../../../layouts/showcaseLayouts/Section/SectionBody/SectionBody';
9 | import AddToCartBtn from '../../../showcase/AddToCartBtn/AddToCartBtn';
10 | import Chip from '../../../UI/Chip/Chip';
11 | import IconButton from '../../../UI/IconButton/IconButton';
12 | import FavoriteIcon from '../../../UI/icons/FavoriteIcon/FavoriteIcon';
13 | import NotFound from '../NotFound/NotFound';
14 | import InfoBlock from './InfoBlock/InfoBlock';
15 | import classes from './ProductPage.module.css';
16 |
17 | interface IProductPageProps {}
18 |
19 | const ProductPage: React.FC
86 |
109 |
110 | {isLoadMoreVisible && (
111 |
87 |
88 | Сначала показывать: {sortInDescendingOrder ? 'подороже' : 'подешевле'}
89 |
90 |
91 |
92 | -
93 | {productsToRender.map((product) => (
94 |
53 |
100 |
101 |
54 |
55 |
56 |
57 |
99 |
58 |
64 |
65 | {name}
59 |
60 |
63 |
66 | {discount ? (
67 |
68 | {discount.discountedPrice} ₽
69 | {price} ₽
70 | dispatch(wishListHandler({ id, isWished }))} column>
77 | <>
78 |
84 |
85 |
86 |
87 |
89 |
90 | {description && (
91 |
92 |
95 | )}
96 |
97 | О товаре
93 |{description}
94 |
41 | Состав заказа
42 |
43 |
44 |
45 |
96 |
97 | | № | 47 |Название | 48 |Кол-во | 49 |Цена | 50 |Итого | 51 |
|---|---|---|---|---|
| 70 | | ||||
| 74 | Итог: 75 | | 76 |77 | {totalPrice} ₽ 78 | | 79 ||||
| 83 | Скидки: 84 | | 85 |{totalDiscount} ₽ | 86 ||||
| 90 | Вес: 91 | | 92 |{totalWeight} кг | 93 |
99 |
110 | )}
111 |
112 |
113 |
145 |
114 |
117 |
119 |
120 |
121 | {isLoading && Производители
115 | 116 |
121 |
152 |
122 |
124 |
126 |
127 |
128 | {isLoading &&