Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7476867e4c | |||
| bf0f14bdb7 | |||
| 738ad9d753 | |||
| 7b1c89fa53 | |||
| 146f4a9f1c | |||
| 95eac6c155 | |||
| 039f4dd392 | |||
| 6f6a125355 | |||
| 74eba090a8 | |||
| 551dde6e8b | |||
| db0194c524 | |||
| 4d69c1b678 | |||
| 526272e2d0 | |||
| 32be7653e7 | |||
| 4443a7aa72 | |||
| f19021a51e |
25
.eslintrc.cjs
Normal file
25
.eslintrc.cjs
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'airbnb-base',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
'indent': 'off',
|
||||||
|
'no-console': 'off',
|
||||||
|
'arrow-body-style': 'off',
|
||||||
|
'implicit-arrow-linebreak': 'off',
|
||||||
|
"linebreak-style": 0
|
||||||
|
},
|
||||||
|
}
|
||||||
5
.gitconfig
Normal file
5
.gitconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[user]
|
||||||
|
name = DavidMakarov
|
||||||
|
email = davidmakarow@mail.ru
|
||||||
|
[credential "http://student.git.athene.tech"]
|
||||||
|
provider = generic
|
||||||
5
.vscode/extensions.json
vendored
Normal file
5
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"anbuselvanrocky.bootstrap5-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
232
css/style.css
Normal file
232
css/style.css
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
main, body {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-horizontal{
|
||||||
|
display:block;
|
||||||
|
height:50%;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.picmin.box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.picture-preview.box {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
.product-menu.box{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pr-menu-btn.btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#innerbox.xl-only, .catalog-menu.xl-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.xl-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#cart-pic.picmin.box {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registerbox {
|
||||||
|
max-width: 725px;
|
||||||
|
width: 100%;
|
||||||
|
background: #D1D9FF;
|
||||||
|
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputbox {
|
||||||
|
height: 52px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-main {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light {
|
||||||
|
width: 197px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 5%;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background: #D1D9FF;
|
||||||
|
box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputbox {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu.box {
|
||||||
|
width: 250px;
|
||||||
|
max-height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-menu.box {
|
||||||
|
max-width: 250px;
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-menu.box {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#catalog.box {
|
||||||
|
width: 1250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#innerbox.catalog.box {
|
||||||
|
background: #6376D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#item.catalog.box {
|
||||||
|
background: white;
|
||||||
|
height: 365px;
|
||||||
|
width: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-img {
|
||||||
|
height: 180px;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-box.box {
|
||||||
|
max-width: 925px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-menu.box {
|
||||||
|
max-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-preview.box {
|
||||||
|
background-color: white;
|
||||||
|
width: 450px;
|
||||||
|
max-height: 450px;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picmin.box {
|
||||||
|
background-color: white;
|
||||||
|
width: 100px !important;
|
||||||
|
height: 100px !important;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#order-box.box {
|
||||||
|
background-color: white;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 450px;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart.box {
|
||||||
|
width: 970px;
|
||||||
|
min-height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#orders.box {
|
||||||
|
width: 970px;
|
||||||
|
height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#favorite.box {
|
||||||
|
width: 970px;
|
||||||
|
height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#personal-info.box {
|
||||||
|
max-width: 970px;
|
||||||
|
min-height: 550px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerbox {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart-box.innerbox {
|
||||||
|
max-width: 550px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#order-cart-box.innerbox {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
--bs-btn-bg: #4156C2 !important;
|
||||||
|
--bs-btn-border-color: #33449d;
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
|
--bs-btn-hover-bg: #2c3c8a;
|
||||||
|
--bs-btn-hover-border-color: #1a2350;
|
||||||
|
--bs-btn-focus-shadow-rgb: 51, 68, 157;
|
||||||
|
--bs-btn-active-color: #fff;
|
||||||
|
--bs-btn-active-bg: #1a2350;
|
||||||
|
--bs-btn-active-border-color: #fff;
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #fff;
|
||||||
|
--bs-btn-disabled-bg: #4156C2;
|
||||||
|
--bs-btn-disabled-border-color: #33449d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-quit {
|
||||||
|
--bs-btn-color: #fff !important;
|
||||||
|
--bs-btn-bg: #152683 !important;
|
||||||
|
--bs-btn-border-color: rgba(0, 0, 0, 0);
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
|
--bs-btn-hover-bg: #12206f;
|
||||||
|
--bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
|
||||||
|
--bs-btn-focus-shadow-rgb: 255, 255, 255;
|
||||||
|
--bs-btn-active-color: #fff;
|
||||||
|
--bs-btn-active-bg: #111e69;
|
||||||
|
--bs-btn-active-border-color: rgba(0, 0, 0, 0.25);
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #fff;
|
||||||
|
--bs-btn-disabled-bg: #152683;
|
||||||
|
--bs-btn-disabled-border-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Маркетплейс</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
jsconfig.json
Normal file
14
jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "react",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
5
json-server.json
Normal file
5
json-server.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"static": "./node_modules/json-server/public",
|
||||||
|
"port": 8082,
|
||||||
|
"watch": "true"
|
||||||
|
}
|
||||||
6452
package-lock.json
generated
Normal file
6452
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
package.json
Normal file
42
package.json
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "whitebear",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "login.html",
|
||||||
|
"scripts": {
|
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"rest": "json-server data.json",
|
||||||
|
"vite": "vite",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2",
|
||||||
|
"@popperjs/core": "2.11.8",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"bootstrap": "5.3.2",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-bootstrap": "^2.9.1",
|
||||||
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hot-toast": "^2.4.1",
|
||||||
|
"react-router-dom": "^6.18.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint": "8.50.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",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"sass": "1.69.5",
|
||||||
|
"vite": "^4.5.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
public/favicon.svg
Normal file
3
public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 463 B |
237
src/App.css
Normal file
237
src/App.css
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
form {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.picture-preview.box {
|
||||||
|
height: 300px !important;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
.product-menu.box{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.pr-menu-btn.btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#innerbox.xl-only, .catalog-menu.xl-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.xl-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog.white-text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-horizontal{
|
||||||
|
display:block;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registerbox {
|
||||||
|
max-width: 725px;
|
||||||
|
width: 100%;
|
||||||
|
background: #D1D9FF;
|
||||||
|
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputbox {
|
||||||
|
height: 42px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background: #D1D9FF;
|
||||||
|
box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu.box {
|
||||||
|
width: 250px;
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-menu.box {
|
||||||
|
max-width: 250px;
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-menu.box {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#catalog.box {
|
||||||
|
width: 1250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#innerbox.catalog.box {
|
||||||
|
background: #6376D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#item.catalog.box {
|
||||||
|
background: white;
|
||||||
|
height: 365px;
|
||||||
|
width: 215px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-img {
|
||||||
|
height: 180px;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-box.box {
|
||||||
|
max-width: 775px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#product-menu.box {
|
||||||
|
max-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-preview.box {
|
||||||
|
background-color: white;
|
||||||
|
width: 450px;
|
||||||
|
height: 450px;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-preview.box img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picmin.box {
|
||||||
|
background-color: white;
|
||||||
|
width: 100px !important;
|
||||||
|
height: 100px !important;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picmin.box img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#order-box.box {
|
||||||
|
background-color: white;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 450px;
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart.box {
|
||||||
|
width: 970px;
|
||||||
|
min-height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#orders.box {
|
||||||
|
width: 970px;
|
||||||
|
min-height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#favorite.box {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 770px;
|
||||||
|
height: 725px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#personal-info.box {
|
||||||
|
max-width: 970px;
|
||||||
|
min-height: 550px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#security.box {
|
||||||
|
max-width: 970px;
|
||||||
|
min-height: 550px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.innerbox {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart-box.innerbox {
|
||||||
|
max-width: 550px;
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#order-cart-box.innerbox {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-main {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light {
|
||||||
|
width: 197px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 0px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 5%;
|
||||||
|
|
||||||
|
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
--bs-btn-bg: #4156C2 !important;
|
||||||
|
--bs-btn-border-color: #33449d;
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
|
--bs-btn-hover-bg: #2c3c8a;
|
||||||
|
--bs-btn-hover-border-color: #1a2350;
|
||||||
|
--bs-btn-focus-shadow-rgb: 51, 68, 157;
|
||||||
|
--bs-btn-active-color: #fff;
|
||||||
|
--bs-btn-active-bg: #1a2350;
|
||||||
|
--bs-btn-active-border-color: #fff;
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #fff;
|
||||||
|
--bs-btn-disabled-bg: #4156C2;
|
||||||
|
--bs-btn-disabled-border-color: #33449d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-quit {
|
||||||
|
--bs-btn-color: #fff !important;
|
||||||
|
--bs-btn-bg: #152683 !important;
|
||||||
|
--bs-btn-border-color: rgba(0, 0, 0, 0);
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
|
--bs-btn-hover-bg: #12206f;
|
||||||
|
--bs-btn-hover-border-color: rgba(0, 0, 0, 0.2);
|
||||||
|
--bs-btn-focus-shadow-rgb: 255, 255, 255;
|
||||||
|
--bs-btn-active-color: #fff;
|
||||||
|
--bs-btn-active-bg: #111e69;
|
||||||
|
--bs-btn-active-border-color: rgba(0, 0, 0, 0.25);
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #fff;
|
||||||
|
--bs-btn-disabled-bg: #152683;
|
||||||
|
--bs-btn-disabled-border-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
40
src/App.jsx
Normal file
40
src/App.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
/* eslint-disable import/no-absolute-path */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import '/node_modules/bootstrap/dist/js/bootstrap.min.js';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Header from './components/header/Header.jsx';
|
||||||
|
import { CartProvider } from './components/profile/components/cart/CartContext';
|
||||||
|
import { FavoriteProvider } from './components/profile/components/favorite/FavoriteContext';
|
||||||
|
import { OrdersProvider } from './components/profile/components/orders/OrdersContext';
|
||||||
|
import { LoginProvider } from './components/accounts/login/LoginContext';
|
||||||
|
import { Toaster } from 'react-hot-toast';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<LoginProvider>
|
||||||
|
<OrdersProvider>
|
||||||
|
<FavoriteProvider>
|
||||||
|
<CartProvider>
|
||||||
|
<Header></Header>
|
||||||
|
<Container className='p-2' as="main" fluid>
|
||||||
|
<Outlet/>
|
||||||
|
</Container>
|
||||||
|
<Footer/>
|
||||||
|
<Toaster position='top-center' reverseOrder={true}/>
|
||||||
|
</CartProvider>
|
||||||
|
</FavoriteProvider>
|
||||||
|
</OrdersProvider>
|
||||||
|
</LoginProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
25
src/components/accounts/hooks/AccountsHook.js
Normal file
25
src/components/accounts/hooks/AccountsHook.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import AccountsApiService from '../service/AccountsApiService';
|
||||||
|
|
||||||
|
const useAccounts = () => {
|
||||||
|
const [accountsRefresh, setAccountsRefresh] = useState(false);
|
||||||
|
const [accounts, setAccounts] = useState([]);
|
||||||
|
const handleAccountsChange = () => setAccountsRefresh(!accountsRefresh);
|
||||||
|
|
||||||
|
const getAccounts = async () => {
|
||||||
|
const expand = '?_expand=type';
|
||||||
|
const data = await AccountsApiService.getAll(expand);
|
||||||
|
setAccounts(data ?? []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getAccounts();
|
||||||
|
}, [accountsRefresh]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
accounts,
|
||||||
|
handleAccountsChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAccounts;
|
||||||
77
src/components/accounts/hooks/AccountsItemFormHook.js
Normal file
77
src/components/accounts/hooks/AccountsItemFormHook.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import AccountsApiService from '../service/AccountsApiService';
|
||||||
|
import useAccountsItem from './AccountsItemHook';
|
||||||
|
|
||||||
|
const useAccountsItemForm = (id, accountsChangeHandle) => {
|
||||||
|
const { item, setItem } = useAccountsItem(id);
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAccountObject = (formData) => {
|
||||||
|
const {
|
||||||
|
login,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
firstname,
|
||||||
|
lastname,
|
||||||
|
phone,
|
||||||
|
adress,
|
||||||
|
card,
|
||||||
|
admin,
|
||||||
|
} = formData;
|
||||||
|
return {
|
||||||
|
login,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
firstname,
|
||||||
|
lastname,
|
||||||
|
phone,
|
||||||
|
adress,
|
||||||
|
card,
|
||||||
|
admin,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
const inputName = event.target.name;
|
||||||
|
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||||
|
setItem({
|
||||||
|
...item,
|
||||||
|
[inputName]: inputValue,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
const body = getAccountObject(item);
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
if (id === undefined) {
|
||||||
|
await AccountsApiService.create(body);
|
||||||
|
} else {
|
||||||
|
await AccountsApiService.update(id, body);
|
||||||
|
}
|
||||||
|
if (accountsChangeHandle) accountsChangeHandle();
|
||||||
|
toast.success('Элемент успешно сохранен', { id: 'AccountsTable' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
setValidated(true);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAccountsItemForm;
|
||||||
39
src/components/accounts/hooks/AccountsItemHook.js
Normal file
39
src/components/accounts/hooks/AccountsItemHook.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import AccountsApiService from '../service/AccountsApiService';
|
||||||
|
|
||||||
|
const useAccountsItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
login: '',
|
||||||
|
password: '',
|
||||||
|
email: '',
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
phone: '',
|
||||||
|
adress: '',
|
||||||
|
card: '',
|
||||||
|
admin: '',
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async (itemId = undefined) => {
|
||||||
|
if (itemId && itemId > 0) {
|
||||||
|
const data = await AccountsApiService.get(itemId);
|
||||||
|
setItem(data);
|
||||||
|
} else {
|
||||||
|
setItem({ ...emptyItem });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getItem(id);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
setItem,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAccountsItem;
|
||||||
77
src/components/accounts/login/LogInAccount.js
Normal file
77
src/components/accounts/login/LogInAccount.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import useAccountsItem from '../hooks/AccountsItemHook';
|
||||||
|
import useAccounts from '../hooks/AccountsHook';
|
||||||
|
import useLogin from './LoginHook';
|
||||||
|
|
||||||
|
const useCheckAccount = (id) => {
|
||||||
|
const { accounts } = useAccounts();
|
||||||
|
const { item, setItem } = useAccountsItem(id);
|
||||||
|
const getAccountObject = (formData) => {
|
||||||
|
const {
|
||||||
|
login,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
firstname,
|
||||||
|
lastname,
|
||||||
|
phone,
|
||||||
|
admin,
|
||||||
|
} = formData;
|
||||||
|
return {
|
||||||
|
login,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
firstname,
|
||||||
|
lastname,
|
||||||
|
phone,
|
||||||
|
admin,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const CheckForAccount = (account) => {
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const it of accounts) {
|
||||||
|
if (it.login === account.login && it.password === account.password) {
|
||||||
|
console.log(it);
|
||||||
|
return it;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { addToLogin } = useLogin();
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
console.log(event.target)
|
||||||
|
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 = getAccountObject(item);
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
if (id === undefined) {
|
||||||
|
if (CheckForAccount(body) !== false) {
|
||||||
|
addToLogin(CheckForAccount(body));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
toast.success('Выполнен вход в аккаунт', { id: 'AccountsTable' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCheckAccount;
|
||||||
29
src/components/accounts/login/LoginContext.jsx
Normal file
29
src/components/accounts/login/LoginContext.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useReducer,
|
||||||
|
} from 'react';
|
||||||
|
import { loginReducer, loadLogin, saveLogin } from './LoginReducer';
|
||||||
|
|
||||||
|
const LoginContext = createContext(null);
|
||||||
|
|
||||||
|
export const LoginProvider = ({ children }) => {
|
||||||
|
const [login, dispatch] = useReducer(loginReducer, [], loadLogin);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
saveLogin(login || []);
|
||||||
|
}, [login]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoginContext.Provider value={{ login, dispatch }}>
|
||||||
|
{children}
|
||||||
|
</LoginContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LoginProvider.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginContext;
|
||||||
18
src/components/accounts/login/LoginHook.js
Normal file
18
src/components/accounts/login/LoginHook.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import LoginContext from './LoginContext.jsx';
|
||||||
|
import {
|
||||||
|
loginAdd, loginClear, loginRemove,
|
||||||
|
} from './LoginReducer';
|
||||||
|
|
||||||
|
const useLogin = () => {
|
||||||
|
const { login, dispatch } = useContext(LoginContext);
|
||||||
|
|
||||||
|
return {
|
||||||
|
login,
|
||||||
|
addToLogin: (item) => dispatch(loginAdd(item)),
|
||||||
|
removeFromLogin: (item) => dispatch(loginRemove(item)),
|
||||||
|
clearLogin: () => dispatch(loginClear()),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLogin;
|
||||||
46
src/components/accounts/login/LoginPage.jsx
Normal file
46
src/components/accounts/login/LoginPage.jsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { Form, Button } from 'react-bootstrap';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import useCheckAccount from './LogInAccount';
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
} = useCheckAccount();
|
||||||
|
|
||||||
|
const onBack = () => {
|
||||||
|
navigate('../');
|
||||||
|
};
|
||||||
|
|
||||||
|
const loginAccount = async (event) => {
|
||||||
|
if (await handleSubmit(event)) {
|
||||||
|
onBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="container-fluid d-flex justify-content-center align-items-center mt-5">
|
||||||
|
<div className="registerbox">
|
||||||
|
<Form className="d-flex flex-column align-items-center" noValidate onSubmit={ loginAccount }>
|
||||||
|
<p className="fs-2 mt-5">Вход в аккаунт</p>
|
||||||
|
<Form.Group className="w-75 mt-2">
|
||||||
|
<Form.Label className="login-text">Логин</Form.Label>
|
||||||
|
<Form.Control name="login" onChange={handleChange} type="text" required id="login_inputbox" className="form-control inputbox" placeholder="Введите логин..."/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="w-75 mt-2">
|
||||||
|
<Form.Label className="login-text">Пароль</Form.Label>
|
||||||
|
<Form.Control name="password" onChange={handleChange} type="password" required id="password_inputbox" className="form-control inputbox" placeholder="Пароль..."/>
|
||||||
|
</Form.Group>
|
||||||
|
<div className="d-flex mt-5 mb-5 flex-wrap justify-content-center align-content-center">
|
||||||
|
<Button type="submit" className="btn btn-main btn-size mb-3 me-3">Вход</Button>
|
||||||
|
<Link to="../register" role="button" className="btn btn-main btn-size mb-3 me-3 d-flex justify-content-center align-items-center">Регистрация</Link>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
54
src/components/accounts/login/LoginReducer.js
Normal file
54
src/components/accounts/login/LoginReducer.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
const addToLogin = (item) => {
|
||||||
|
return [{ ...item }];
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFromLogin = (login, item) => {
|
||||||
|
return login.filter((loginItem) => loginItem.id !== item.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ORDERS_KEY = 'localLogin';
|
||||||
|
const ORDERS_ADD = 'login/add';
|
||||||
|
const ORDERS_REMOVE = 'login/remove';
|
||||||
|
const ORDERS_CLEAR = 'login/clear';
|
||||||
|
|
||||||
|
export const saveLogin = (login) => {
|
||||||
|
localStorage.setItem(ORDERS_KEY, JSON.stringify(login));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loadLogin = (initialValue = []) => {
|
||||||
|
const loginData = localStorage.getItem(ORDERS_KEY);
|
||||||
|
if (loginData) {
|
||||||
|
return JSON.parse(loginData);
|
||||||
|
}
|
||||||
|
return initialValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loginReducer = (login, action) => {
|
||||||
|
const { item } = action;
|
||||||
|
switch (action.type) {
|
||||||
|
case ORDERS_ADD: {
|
||||||
|
return addToLogin(item);
|
||||||
|
}
|
||||||
|
case ORDERS_REMOVE: {
|
||||||
|
return removeFromLogin(login, item);
|
||||||
|
}
|
||||||
|
case ORDERS_CLEAR: {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw Error(`Unknown action: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loginAdd = (item) => ({
|
||||||
|
type: ORDERS_ADD, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const loginRemove = (item) => ({
|
||||||
|
type: ORDERS_REMOVE, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const loginClear = () => ({
|
||||||
|
type: ORDERS_CLEAR,
|
||||||
|
});
|
||||||
51
src/components/accounts/register/RegisterAccountForm.jsx
Normal file
51
src/components/accounts/register/RegisterAccountForm.jsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
import RegisterInput from './RegisterInput.jsx';
|
||||||
|
|
||||||
|
const RegisterAccountForm = ({ handleChange }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className="text-center fs-1 mt-5">Регистрация</p>
|
||||||
|
<div className="w-75 mb-2">
|
||||||
|
<RegisterInput name="login" onChange={handleChange} label='Логин' type="text" id="login_inputbox" placeholder="Введите логин..."
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="w-75 mb-2">
|
||||||
|
<RegisterInput name="password" onChange={handleChange} label='Пароль' type="password" id="password_inputbox" placeholder="Пароль..."
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex align-items-center w-75 mb-2">
|
||||||
|
<div>
|
||||||
|
<RegisterInput name="firstname" onChange={handleChange} label='Имя' type="text" id="firstname_inputbox" placeholder="Введите имя..."
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="ms-auto">
|
||||||
|
<RegisterInput name="lastname" onChange={handleChange} label='Фамилия' type="text" id="lastname_inputbox" placeholder="Введите фамилию..."
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-75 mb-2">
|
||||||
|
<RegisterInput name="email" onChange={handleChange} label='Почта' type="email" id="email_inputbox" placeholder="example@example.com"
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="w-75 mb-2">
|
||||||
|
<RegisterInput name="phone" onChange={handleChange} label='Телефон' id="phone_inputbox" type="number" placeholder="+7 (999) 999 99-99"
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="form-check mb-2 mt-2">
|
||||||
|
<Form.Check value="" id="flexCheckDefault"
|
||||||
|
required/>
|
||||||
|
<Form.Label className="label-text form-check-label">
|
||||||
|
Я принимаю <Link to="../termsofuse.html"> пользовательское соглашение</Link>
|
||||||
|
</Form.Label>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
RegisterAccountForm.propTypes = {
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RegisterAccountForm;
|
||||||
40
src/components/accounts/register/RegisterForm.jsx
Normal file
40
src/components/accounts/register/RegisterForm.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import RegisterAccountForm from './RegisterAccountForm';
|
||||||
|
import useAccountsItemForm from '../hooks/AccountsItemFormHook';
|
||||||
|
|
||||||
|
const RegisterForm = ({ id }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
} = useAccountsItemForm(id);
|
||||||
|
|
||||||
|
const onBack = () => {
|
||||||
|
navigate('../');
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (event) => {
|
||||||
|
if (await handleSubmit(event)) {
|
||||||
|
onBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className='registerbox'>
|
||||||
|
<Form className="d-flex flex-column align-items-center" noValidate onSubmit={onSubmit}>
|
||||||
|
<RegisterAccountForm handleChange={handleChange}/>
|
||||||
|
<Button type="submit" className="btn btn-main mt-3 mb-3 fs-3 ps-5 pe-5">Регистрация</Button>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
RegisterForm.propTypes = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RegisterForm;
|
||||||
25
src/components/accounts/register/RegisterInput.jsx
Normal file
25
src/components/accounts/register/RegisterInput.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const RegisterInput = ({
|
||||||
|
name, label, value, onChange, className, groupClassName, placeholder, ...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Form.Group className={`mb-2 ${groupClassName || ''}`}>
|
||||||
|
<Form.Label className="label-text">{label}</Form.Label>
|
||||||
|
<Form.Control onChange={onChange} name={name || ''} className={`form-control inputbox ${className || ''}`} placeholder={placeholder || ''} {...rest} required />
|
||||||
|
</Form.Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
RegisterInput.propTypes = {
|
||||||
|
name: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
placeholder: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
className: PropTypes.string,
|
||||||
|
groupClassName: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RegisterInput;
|
||||||
5
src/components/accounts/service/AccountsApiService.js
Normal file
5
src/components/accounts/service/AccountsApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const AccountsApiService = new ApiService('accounts');
|
||||||
|
|
||||||
|
export default AccountsApiService;
|
||||||
22
src/components/accounts/table/Accounts.jsx
Normal file
22
src/components/accounts/table/Accounts.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import useAccounts from '../hooks/AccountsHook';
|
||||||
|
import AccountsTable from './AccountsTable.jsx';
|
||||||
|
import AccountsTableRow from './AccountsTableRow.jsx';
|
||||||
|
|
||||||
|
const Accounts = () => {
|
||||||
|
const { accounts } = useAccounts();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className='ms-3 mt-3 fs-1'>Аккаунты</p>
|
||||||
|
<AccountsTable>
|
||||||
|
{
|
||||||
|
accounts.map((line, index) =>
|
||||||
|
<AccountsTableRow key={line.id}
|
||||||
|
index={index} line={line}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</AccountsTable>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Accounts;
|
||||||
30
src/components/accounts/table/AccountsTable.jsx
Normal file
30
src/components/accounts/table/AccountsTable.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Table } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const LinesTable = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<Table className='mt-2' striped responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope='col'>№</th>
|
||||||
|
<th scope='col' >Логин</th>
|
||||||
|
<th scope='col' >Пароль</th>
|
||||||
|
<th scope='col' >Почта</th>
|
||||||
|
<th scope='col' className='w-25'>Имя</th>
|
||||||
|
<th scope='col' className='w-25'>Фамилия</th>
|
||||||
|
<th scope='col' className='w-25'>Номер телефона</th>
|
||||||
|
<th scope='col'>Админ</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{children}
|
||||||
|
</tbody >
|
||||||
|
</Table >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTable.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTable;
|
||||||
25
src/components/accounts/table/AccountsTableRow.jsx
Normal file
25
src/components/accounts/table/AccountsTableRow.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const LinesTableRow = ({
|
||||||
|
index, line,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{index + 1}</th>
|
||||||
|
<td>{line.login}</td>
|
||||||
|
<td>{line.password}</td>
|
||||||
|
<td>{line.email}</td>
|
||||||
|
<td>{line.firstname}</td>
|
||||||
|
<td>{line.lastname}</td>
|
||||||
|
<td>{line.phone}</td>
|
||||||
|
<td>{line.admin}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTableRow.propTypes = {
|
||||||
|
index: PropTypes.number,
|
||||||
|
line: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTableRow;
|
||||||
40
src/components/api/ApiClient.js
Normal file
40
src/components/api/ApiClient.js
Normal file
@ -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:8082/',
|
||||||
|
timeout: '3000',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||||
29
src/components/api/ApiService.js
Normal file
29
src/components/api/ApiService.js
Normal file
@ -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;
|
||||||
22
src/components/catalog/ItemsCatalog.jsx
Normal file
22
src/components/catalog/ItemsCatalog.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import useLines from '../lines/hooks/LinesHook';
|
||||||
|
import { getSearch } from '../product/hooks/GetUrlParameter';
|
||||||
|
import ItemCard from './item_card/ItemCard.jsx';
|
||||||
|
|
||||||
|
const ItemsCatalog = () => {
|
||||||
|
let p = getSearch();
|
||||||
|
const { lines } = useLines(p);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="catalog" className="box d-flex flex-column">
|
||||||
|
{p !== null ? <div className='text-center fs-2 mt-3'>Результаты поиска:</div> : <></>}
|
||||||
|
<div className=" d-flex flex-wrap justify-content-center align-items-md-center">
|
||||||
|
{
|
||||||
|
lines.map((line) =>
|
||||||
|
<ItemCard key={line.id} item={line}/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ItemsCatalog;
|
||||||
32
src/components/catalog/item_card/ItemCard.jsx
Normal file
32
src/components/catalog/item_card/ItemCard.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import formatter from '../../formatter/formatter';
|
||||||
|
|
||||||
|
function ItemCard({ item, className }) {
|
||||||
|
const separator = item.name[36];
|
||||||
|
|
||||||
|
let name = '';
|
||||||
|
if (item.name.length > 36) {
|
||||||
|
name = `${item.name.split(separator)[0]}...`;
|
||||||
|
} else {
|
||||||
|
name = item.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="item" className={`catalog box m-auto mb-3 mt-3 d-flex flex-column ${className || ''}`}>
|
||||||
|
<img className="mt-2 item-img align-self-center" src={ item.image }/>
|
||||||
|
<p className="mb-3 ms-3 me-auto"> { name } </p>
|
||||||
|
<p className="ms-3 me-auto fs-4"> { formatter.format(item.price) } </p>
|
||||||
|
<Link to={`../product?id=${item.id}`} type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ItemCard.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
className: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ItemCard;
|
||||||
BIN
src/components/content/200.jpg
Normal file
BIN
src/components/content/200.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/components/content/catalog/DEEPCOOL AG200.jpg
Normal file
BIN
src/components/content/catalog/DEEPCOOL AG200.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/components/content/catalog/GeForce RTX 4070.jpg
Normal file
BIN
src/components/content/catalog/GeForce RTX 4070.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/components/content/catalog/Intel Core i5 13600KF.jpg
Normal file
BIN
src/components/content/catalog/Intel Core i5 13600KF.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/components/content/catalog/Kingston 16GB DDR4 3200MHz.jpg
Normal file
BIN
src/components/content/catalog/Kingston 16GB DDR4 3200MHz.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/content/catalog/Kingston A400.jpg
Normal file
BIN
src/components/content/catalog/Kingston A400.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/components/content/catalog/POCO X5 Pro.jpg
Normal file
BIN
src/components/content/catalog/POCO X5 Pro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
src/components/content/catalog/PS5.jpg
Normal file
BIN
src/components/content/catalog/PS5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/components/content/catalog/Ryzen 5 5600G.jpg
Normal file
BIN
src/components/content/catalog/Ryzen 5 5600G.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/content/catalog/Ryzen 5 7600X.jpg
Normal file
BIN
src/components/content/catalog/Ryzen 5 7600X.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
src/components/content/catalog/Ryzen 7 5800X3D.jpg
Normal file
BIN
src/components/content/catalog/Ryzen 7 5800X3D.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/components/content/catalog/Samsung 980 PRO.jpg
Normal file
BIN
src/components/content/catalog/Samsung 980 PRO.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/components/content/catalog/Samsung A54.jpg
Normal file
BIN
src/components/content/catalog/Samsung A54.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/components/content/catalog/Samsung S23+.jpg
Normal file
BIN
src/components/content/catalog/Samsung S23+.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/components/content/catalog/Steelseries Aerox 3 Wireless.jpg
Normal file
BIN
src/components/content/catalog/Steelseries Aerox 3 Wireless.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/components/content/catalog/XBOX Series X.jpg
Normal file
BIN
src/components/content/catalog/XBOX Series X.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/components/content/product/600012638453b0.jpg
Normal file
BIN
src/components/content/product/600012638453b0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/components/content/product/600012638453b1.jpg
Normal file
BIN
src/components/content/product/600012638453b1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/components/content/product/600012638453b2.jpg
Normal file
BIN
src/components/content/product/600012638453b2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/components/content/product/600012638453b3.jpg
Normal file
BIN
src/components/content/product/600012638453b3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
8
src/components/footer/Footer.css
Normal file
8
src/components/footer/Footer.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.site-footer {
|
||||||
|
background-color: #6376D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer-text {
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
26
src/components/footer/Footer.jsx
Normal file
26
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import './Footer.css';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="site-footer container-fluid py-5 mt-auto flex-shrink-0">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-2 offset-1">
|
||||||
|
<ul className="nav flex-column">
|
||||||
|
<li className="nav-item mb-2"><Link to="/contacts" className="nav-link p-0 link-light ">Контакты</Link></li>
|
||||||
|
<li className="nav-item mb-2"><Link to="/termsofuse" className="nav-link p-0 link-light">Пользовательское соглашение</Link></li>
|
||||||
|
<li className="nav-item mb-2"><Link to="/faq" className="nav-link p-0 link-light" >ЧаВо</Link></li>
|
||||||
|
<li className="nav-item mb-2"><Link to="/about" className="nav-link p-0 link-light">О нас</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="site-footer-text col-6 offset-3">
|
||||||
|
<p>© Маркетплейс,<br/> {year} <br/> Все права защищены.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
7
src/components/formatter/formatter.jsx
Normal file
7
src/components/formatter/formatter.jsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const formatter = new Intl.NumberFormat('ru-RU', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RUB',
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default formatter;
|
||||||
11
src/components/header/Header.css
Normal file
11
src/components/header/Header.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.site-header {
|
||||||
|
background-color: #6376D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-search {
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
43
src/components/header/Header.jsx
Normal file
43
src/components/header/Header.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import './Header.css';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import RightHeaderButton from './RightHeaderButton';
|
||||||
|
import useSearchItem from './search/hooks/SearchItemHook';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { handleSubmit, handleChange } = useSearchItem();
|
||||||
|
|
||||||
|
const onSubmit = async (event) => {
|
||||||
|
await handleSubmit(event);
|
||||||
|
navigate(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="site-header border-bottom ps-5 pe-5 sticky-top">
|
||||||
|
<nav className="navbar navbar-expand-lg sticky-top">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<Link className="site-header-text navbar-brand fs-3" to="/">Маркетплейс</Link>
|
||||||
|
<Button className="btn btn-main d-block d-sm-block d-md-none" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop"/>
|
||||||
|
<Button className="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span className="navbar-toggler-icon"></span>
|
||||||
|
</Button>
|
||||||
|
<div className="justify-content-end collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<Link to='/catalog' className='btn btn-main fs-5'>
|
||||||
|
Каталог
|
||||||
|
</Link>
|
||||||
|
<Form className="d-flex form-horizontal" onSubmit={onSubmit}>
|
||||||
|
<Form.Control onChange={handleChange} className="form-control me-2" name="q" placeholder="Поиск..." aria-label="Search" style={{ width: '40vw' }}/>
|
||||||
|
<Button type='submit' className="btn btn-main me-2 fs-5">Поиск</Button>
|
||||||
|
</Form>
|
||||||
|
<RightHeaderButton/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
29
src/components/header/RightHeaderButton.jsx
Normal file
29
src/components/header/RightHeaderButton.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import './Header.css';
|
||||||
|
import useLogin from '../accounts/login/LoginHook';
|
||||||
|
|
||||||
|
const RightHeaderButton = () => {
|
||||||
|
const { login } = useLogin();
|
||||||
|
|
||||||
|
if (!(login === undefined || login.length === 0)) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link to="/settings" className="align-self-center nav-link link-light mt-2 mb-2 me-5">
|
||||||
|
<span className="fs-5 site-header-text">Настройки</span>
|
||||||
|
</Link>
|
||||||
|
<Link to="/profile" className="align-self-center nav-link link-light mt-2 mb-2">
|
||||||
|
<span className="fs-5 site-header-text">Профиль ({login[0].login})</span>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link to="/login" className="align-self-center nav-link link-light mt-2 mb-2">
|
||||||
|
<span className="fs-5 site-header-text">Войти</span>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RightHeaderButton;
|
||||||
27
src/components/header/search/SearchPage.jsx
Normal file
27
src/components/header/search/SearchPage.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ItemCard from '../../catalog/item_card/ItemCard';
|
||||||
|
import useLines from '../../lines/hooks/LinesHook';
|
||||||
|
|
||||||
|
const SearchPage = (params) => {
|
||||||
|
const { lines } = useLines(params.params);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="catalog" className="box">
|
||||||
|
<p className="text-center fs-2 mt-3">Результаты поиска:</p>
|
||||||
|
<div className="d-flex flex-wrap justify-content-center align-items-md-center">
|
||||||
|
{
|
||||||
|
lines.map((line) =>
|
||||||
|
<ItemCard key={line.id} item={line}/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
SearchPage.propTypes = {
|
||||||
|
params: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchPage;
|
||||||
60
src/components/header/search/hooks/SearchItemHook.js
Normal file
60
src/components/header/search/hooks/SearchItemHook.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const useSearchItem = (id) => {
|
||||||
|
const navigator = useNavigate();
|
||||||
|
const emptyItem = {
|
||||||
|
search: '',
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async () => {
|
||||||
|
setItem({ ...emptyItem });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const getLineObject = (formData) => {
|
||||||
|
const { q } = formData;
|
||||||
|
return {
|
||||||
|
q: q.toString(),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getItem(id);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
const inputName = event.target.name;
|
||||||
|
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||||
|
console.log(event.target);
|
||||||
|
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) {
|
||||||
|
navigator('/catalog?q=' + body.q);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
handleChange,
|
||||||
|
handleSubmit,
|
||||||
|
setItem,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useSearchItem;
|
||||||
23
src/components/input/Input.jsx
Normal file
23
src/components/input/Input.jsx
Normal file
@ -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={`mb-2 ${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;
|
||||||
48
src/components/lines/form/LinesForm.jsx
Normal file
48
src/components/lines/form/LinesForm.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
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 (
|
||||||
|
<>
|
||||||
|
<Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
|
||||||
|
<LinesItemForm item={item} handleChange={handleChange} />
|
||||||
|
<Form.Group className='row justify-content-center m-0 mt-3'>
|
||||||
|
<Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
|
||||||
|
Назад
|
||||||
|
</Button>
|
||||||
|
<Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesForm.propTypes = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesForm;
|
||||||
3
src/components/lines/form/LinesItemForm.css
Normal file
3
src/components/lines/form/LinesItemForm.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
#image-preview {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
32
src/components/lines/form/LinesItemForm.jsx
Normal file
32
src/components/lines/form/LinesItemForm.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import imgPlaceholder from '../../content/200.jpg';
|
||||||
|
import Input from '../../input/Input.jsx';
|
||||||
|
import './LinesItemForm.css';
|
||||||
|
|
||||||
|
const LinesItemForm = ({ item, handleChange }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='text-center'>
|
||||||
|
<img id='image-preview' className='rounded' alt='placeholder'
|
||||||
|
src={item.image || imgPlaceholder} />
|
||||||
|
</div>
|
||||||
|
<Input name='name' label='Название' value={item.name} onChange={handleChange}
|
||||||
|
required />
|
||||||
|
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||||
|
type='number' min='0.00' step='0.50' required />
|
||||||
|
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||||
|
type='number' min='1' step='1' required />
|
||||||
|
<Input name='image' label='Изображение' onChange={handleChange}
|
||||||
|
type='file' accept='image/*' />
|
||||||
|
<Input name='description' label='Краткое описание' value={item.description} onChange={handleChange}
|
||||||
|
required />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesItemForm.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesItemForm;
|
||||||
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
@ -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;
|
||||||
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import useLinesItemForm from './LinesItemFormHook';
|
||||||
|
|
||||||
|
const useLinesFormModal = (linesChangeHandle) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
} = useLinesItemForm(currentId, linesChangeHandle);
|
||||||
|
|
||||||
|
const showModalDialog = (id) => {
|
||||||
|
setCurrentId(id);
|
||||||
|
resetValidity();
|
||||||
|
showModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setCurrentId(-1);
|
||||||
|
hideModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (event) => {
|
||||||
|
if (await handleSubmit(event)) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isFormModalShow: isModalShow,
|
||||||
|
isFormValidated: validated,
|
||||||
|
showFormModal: showModalDialog,
|
||||||
|
currentItem: item,
|
||||||
|
handleItemChange: handleChange,
|
||||||
|
handleFormSubmit: onSubmit,
|
||||||
|
handleFormClose: onClose,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesFormModal;
|
||||||
32
src/components/lines/hooks/LinesHook.js
Normal file
32
src/components/lines/hooks/LinesHook.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLines = (q) => {
|
||||||
|
const [linesRefresh, setLinesRefresh] = useState(false);
|
||||||
|
const [lines, setLines] = useState([]);
|
||||||
|
const handleLinesChange = () => setLinesRefresh(!linesRefresh);
|
||||||
|
|
||||||
|
const getLines = async (q = undefined) => {
|
||||||
|
console.log(q);
|
||||||
|
if (q !== null && q !== undefined) {
|
||||||
|
const expand = '?q=' + q;
|
||||||
|
const data = await LinesApiService.getAll(expand);
|
||||||
|
setLines(data ?? []);
|
||||||
|
} else {
|
||||||
|
const expand = '?_expand=type';
|
||||||
|
const data = await LinesApiService.getAll(expand);
|
||||||
|
setLines(data ?? []);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getLines(q);
|
||||||
|
}, [linesRefresh]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
lines,
|
||||||
|
handleLinesChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLines;
|
||||||
81
src/components/lines/hooks/LinesItemFormHook.js
Normal file
81
src/components/lines/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
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 { name } = formData;
|
||||||
|
const price = parseFloat(formData.price).toFixed(2);
|
||||||
|
const count = parseInt(formData.count, 10);
|
||||||
|
const image = formData.image.startsWith('data:image') ? formData.image : formData.image;
|
||||||
|
const { description } = formData;
|
||||||
|
return {
|
||||||
|
name: name.toString(),
|
||||||
|
price: price.toString(),
|
||||||
|
count: count.toString(),
|
||||||
|
image,
|
||||||
|
description: description.toString(),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
35
src/components/lines/hooks/LinesItemHook.js
Normal file
35
src/components/lines/hooks/LinesItemHook.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLinesItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
price: '0',
|
||||||
|
count: '0',
|
||||||
|
image: '',
|
||||||
|
description: '',
|
||||||
|
};
|
||||||
|
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;
|
||||||
5
src/components/lines/service/LinesApiService.js
Normal file
5
src/components/lines/service/LinesApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const LinesApiService = new ApiService('lines');
|
||||||
|
|
||||||
|
export default LinesApiService;
|
||||||
59
src/components/lines/table/Lines.jsx
Normal file
59
src/components/lines/table/Lines.jsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||||
|
import ModalForm from '../../modal/ModalForm.jsx';
|
||||||
|
import LinesItemForm from '../form/LinesItemForm.jsx';
|
||||||
|
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||||
|
import useLinesFormModal from '../hooks/LinesFormModalHook';
|
||||||
|
import useLines from '../hooks/LinesHook';
|
||||||
|
import LinesTable from './LinesTable.jsx';
|
||||||
|
import LinesTableRow from './LinesTableRow.jsx';
|
||||||
|
|
||||||
|
const Lines = () => {
|
||||||
|
const { lines, handleLinesChange } = useLines();
|
||||||
|
|
||||||
|
const {
|
||||||
|
isDeleteModalShow,
|
||||||
|
showDeleteModal,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
} = useLinesDeleteModal(handleLinesChange);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isFormModalShow,
|
||||||
|
isFormValidated,
|
||||||
|
showFormModal,
|
||||||
|
currentItem,
|
||||||
|
handleItemChange,
|
||||||
|
handleFormSubmit,
|
||||||
|
handleFormClose,
|
||||||
|
} = useLinesFormModal(handleLinesChange);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className='ms-3 fs-1'>Товары</p>
|
||||||
|
<LinesTable>
|
||||||
|
{
|
||||||
|
lines.map((line, index) =>
|
||||||
|
<LinesTableRow key={line.id}
|
||||||
|
index={index} line={line}
|
||||||
|
onDelete={() => showDeleteModal(line.id)}
|
||||||
|
onEdit={() => showFormModal(line.id)}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</LinesTable>
|
||||||
|
<ModalConfirm show={isDeleteModalShow}
|
||||||
|
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||||
|
title='Удаление' message='Удалить элемент?' />
|
||||||
|
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||||
|
onSubmit={handleFormSubmit} onClose={handleFormClose}
|
||||||
|
title='Редактирование'>
|
||||||
|
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
|
||||||
|
</ModalForm>
|
||||||
|
<Button variant='info' onClick={() => showFormModal()}>
|
||||||
|
Добавить товар
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Lines;
|
||||||
29
src/components/lines/table/LinesTable.jsx
Normal file
29
src/components/lines/table/LinesTable.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Table } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const LinesTable = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<Table className='mt-2' striped responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope='col'>№</th>
|
||||||
|
<th scope='col' className='w-25'>Товар</th>
|
||||||
|
<th scope='col' className='w-25'>Цена</th>
|
||||||
|
<th scope='col' className='w-25'>Колич.</th>
|
||||||
|
<th scope='col' className='w-25'>Изображение</th>
|
||||||
|
<th scope='col'></th>
|
||||||
|
<th scope='col'></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{children}
|
||||||
|
</tbody >
|
||||||
|
</Table >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTable.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTable;
|
||||||
45
src/components/lines/table/LinesTableRow.jsx
Normal file
45
src/components/lines/table/LinesTableRow.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { PencilFill, Trash3 } from 'react-bootstrap-icons';
|
||||||
|
|
||||||
|
const LinesTableRow = ({
|
||||||
|
index, line, onDelete, onEdit,
|
||||||
|
}) => {
|
||||||
|
const handleAnchorClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
const imgStyle = {
|
||||||
|
width: '70px',
|
||||||
|
height: '70px',
|
||||||
|
};
|
||||||
|
const Img = (image) => {
|
||||||
|
if (image === undefined) {
|
||||||
|
return (
|
||||||
|
<td><img src="src/components/content/200.jpg" style={imgStyle}></img></td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (<td><img src={image} style={imgStyle}></img></td>);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{index + 1}</th>
|
||||||
|
<td>{line.name}</td>
|
||||||
|
<td>{parseFloat(line.price).toFixed(2)}</td>
|
||||||
|
<td>{line.count}</td>
|
||||||
|
{Img(line.image)}
|
||||||
|
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||||
|
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTableRow.propTypes = {
|
||||||
|
index: PropTypes.number,
|
||||||
|
line: PropTypes.object,
|
||||||
|
onDelete: PropTypes.func,
|
||||||
|
onEdit: PropTypes.func,
|
||||||
|
onEditInPage: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTableRow;
|
||||||
3
src/components/modal/Modal.css
Normal file
3
src/components/modal/Modal.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.modal-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
42
src/components/modal/ModalConfirm.jsx
Normal file
42
src/components/modal/ModalConfirm.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Modal } from 'react-bootstrap';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import './Modal.css';
|
||||||
|
|
||||||
|
const ModalConfirm = ({
|
||||||
|
show, title, message, onConfirm, onClose,
|
||||||
|
}) => {
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||||
|
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||||
|
<Modal.Title>{title}</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
|
||||||
|
<Modal.Body>
|
||||||
|
{message}
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||||
|
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Нет
|
||||||
|
</Button>
|
||||||
|
<Button variant='primary' className='col-5 m-0 ms-2'
|
||||||
|
onClick={() => onConfirm()}>
|
||||||
|
Да
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalConfirm.propTypes = {
|
||||||
|
show: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
message: PropTypes.string,
|
||||||
|
onConfirm: PropTypes.func,
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalConfirm;
|
||||||
43
src/components/modal/ModalForm.jsx
Normal file
43
src/components/modal/ModalForm.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Form, Modal } from 'react-bootstrap';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import './Modal.css';
|
||||||
|
|
||||||
|
const ModalForm = ({
|
||||||
|
show, title, validated, onSubmit, onClose, children,
|
||||||
|
}) => {
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||||
|
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||||
|
<Modal.Title>{title}</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
<Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
|
||||||
|
<Modal.Body>
|
||||||
|
{children}
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||||
|
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
<Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Form>
|
||||||
|
</Modal>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalForm.propTypes = {
|
||||||
|
show: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
validated: PropTypes.bool,
|
||||||
|
onSubmit: PropTypes.func,
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
21
src/components/modal/ModalHook.js
Normal file
21
src/components/modal/ModalHook.js
Normal file
@ -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;
|
||||||
88
src/components/product/Prod.jsx
Normal file
88
src/components/product/Prod.jsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import './Product.css';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import useLinesItem from './hooks/GetItemById';
|
||||||
|
import { getId } from './hooks/GetUrlParameter';
|
||||||
|
import Picprev from './components/Picprev';
|
||||||
|
import formatter from '../formatter/formatter';
|
||||||
|
import useCart from '../profile/components/cart/CartHook';
|
||||||
|
import useFavorite from '../profile/components/favorite/FavoriteHook';
|
||||||
|
import useLogin from '../accounts/login/LoginHook';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
const ProductPage = () => {
|
||||||
|
let item = useLinesItem(getId());
|
||||||
|
item = item.item;
|
||||||
|
|
||||||
|
const { login } = useLogin();
|
||||||
|
|
||||||
|
const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
|
||||||
|
const currentDate = new Date();
|
||||||
|
|
||||||
|
const deliveryAvailableDay = currentDate.getDate() + 2;
|
||||||
|
const pickupAvailableDay = currentDate.getDate();
|
||||||
|
|
||||||
|
const { addToFavorite } = useFavorite();
|
||||||
|
const { addToCart } = useCart();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||||
|
<div id="product-box" className="box d-flex flex-column flex-wrap">
|
||||||
|
<div id="product-name" className="ms-4 mt-4">
|
||||||
|
<p style={{ fontSize: '28px' }}>{item.name}</p>
|
||||||
|
</div>
|
||||||
|
<div id="mid-product-box" className="d-flex flex-wrap">
|
||||||
|
<div className="d-flex ms-4 mt-4 me-3">
|
||||||
|
<Picprev imageSrc={item.image}/>
|
||||||
|
</div>
|
||||||
|
<div id="order-box" className="box ms-auto me-auto mt-4 d-flex flex-column">
|
||||||
|
<div className="mt-3">
|
||||||
|
<p className="text-center">Сегодня или позже </p>
|
||||||
|
<p className="mt-3 text-center fs-3">{formatter.format(item.price)} </p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 ms-5 me-5">
|
||||||
|
<p className="text-left fs-5 mb-0">Доставка — 0 ₽</p>
|
||||||
|
<p className="fs-6">c {`${deliveryAvailableDay} ${months[currentDate.getMonth()]}`} </p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-0 ms-5 me-5">
|
||||||
|
<p className="text-left fs-5 mb-0">Самовывоз — 0 ₽</p>
|
||||||
|
<p className="fs-6">c {`${pickupAvailableDay} ${months[currentDate.getMonth()]}`} </p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={ () => {
|
||||||
|
if (login === undefined || login.length === 0) {
|
||||||
|
toast.error('Вы не в аккаунте!');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
addToFavorite(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
} className="btn menu-btn btn-main ms-5 me-5 mt-auto mb-3">В избранное</Button>
|
||||||
|
<Button onClick={ () => {
|
||||||
|
if (login === undefined || login.length === 0) {
|
||||||
|
toast.error('Вы не в аккаунте!');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
addToCart(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
}} className="btn menu-btn btn-main ms-5 me-5 mt-auto mb-3">Купить</Button>
|
||||||
|
<p className="mb-3 text-center">В наличии: {item.count} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="product-box-description" style={{ minHeight: '400px' }}>
|
||||||
|
<p style={{ fontSize: '28px' }} className="ms-5 mt-3">Краткое описание товара:</p>
|
||||||
|
<p className="ms-5 me-5"> {item.description} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ProductPage.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProductPage;
|
||||||
14
src/components/product/Product.css
Normal file
14
src/components/product/Product.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.menu-btn {
|
||||||
|
font-size: 20;
|
||||||
|
height: 60px
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-menu-btn {
|
||||||
|
font-size: 20;
|
||||||
|
height: 60px
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas {
|
||||||
|
max-width: 65%;
|
||||||
|
background: #D1D9FF;
|
||||||
|
}
|
||||||
13
src/components/product/components/Picprev.jsx
Normal file
13
src/components/product/components/Picprev.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
function Picprev(props) {
|
||||||
|
const imgBox = props.imageSrc !== undefined ? <div className="d-flex align-items-center picture-preview box"><img style={{ borderRadius: '20px' }} src={props.imageSrc} /></div> : <div/>;
|
||||||
|
return (
|
||||||
|
imgBox
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Picprev.propTypes = {
|
||||||
|
imageSrc: PropTypes.string,
|
||||||
|
};
|
||||||
|
export default Picprev;
|
||||||
37
src/components/product/hooks/GetItemById.js
Normal file
37
src/components/product/hooks/GetItemById.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/ProductApiService';
|
||||||
|
|
||||||
|
const useLinesItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
price: '0',
|
||||||
|
count: '0',
|
||||||
|
image: '',
|
||||||
|
image2: '',
|
||||||
|
image3: '',
|
||||||
|
image4: '',
|
||||||
|
description: '',
|
||||||
|
};
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesItem;
|
||||||
17
src/components/product/hooks/GetUrlParameter.js
Normal file
17
src/components/product/hooks/GetUrlParameter.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export function getId() {
|
||||||
|
const queryString = window.location.search;
|
||||||
|
const urlParams = new URLSearchParams(queryString);
|
||||||
|
return urlParams.get('id');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getContentBox() {
|
||||||
|
const queryString = window.location.search;
|
||||||
|
const urlParams = new URLSearchParams(queryString);
|
||||||
|
return urlParams.get('contentBox');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSearch() {
|
||||||
|
const queryString = window.location.search;
|
||||||
|
const urlParams = new URLSearchParams(queryString);
|
||||||
|
return urlParams.get('q');
|
||||||
|
}
|
||||||
79
src/components/product/hooks/LinesItemFormHook.js
Normal file
79
src/components/product/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import getBase64FromFile from '../../utils/Base64';
|
||||||
|
import ProductApiService from '../service/ProductApiService';
|
||||||
|
import useLinesItem from './GetItemById';
|
||||||
|
|
||||||
|
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||||
|
const { item, setItem } = useLinesItem(id);
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLineObject = (formData) => {
|
||||||
|
const { name } = formData;
|
||||||
|
const price = parseFloat(formData.price).toFixed(2);
|
||||||
|
const count = parseInt(formData.count, 10);
|
||||||
|
const image = formData.image.startsWith('data:image') ? formData.image : formData.image;
|
||||||
|
return {
|
||||||
|
name: name.toString(),
|
||||||
|
price: price.toString(),
|
||||||
|
count: count.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 ProductApiService.create(body);
|
||||||
|
} else {
|
||||||
|
await ProductApiService.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;
|
||||||
5
src/components/product/service/ProductApiService.js
Normal file
5
src/components/product/service/ProductApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const LinesApiService = new ApiService('lines');
|
||||||
|
|
||||||
|
export default LinesApiService;
|
||||||
27
src/components/profile/ProfilePage.jsx
Normal file
27
src/components/profile/ProfilePage.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Cart from './components/cart/Cart';
|
||||||
|
import Favorite from './components/favorite/Favorite';
|
||||||
|
import Orders from './components/orders/Orders';
|
||||||
|
|
||||||
|
const ProfilePage = (props) => {
|
||||||
|
const { params } = props;
|
||||||
|
switch (Number(params)) {
|
||||||
|
case 1:
|
||||||
|
return <Cart />;
|
||||||
|
case 2:
|
||||||
|
return <Orders />;
|
||||||
|
case 3:
|
||||||
|
return <Favorite />;
|
||||||
|
default:
|
||||||
|
return <Cart />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ProfilePage.propTypes = {
|
||||||
|
params: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProfilePage;
|
||||||
69
src/components/profile/components/MenuButtons.jsx
Normal file
69
src/components/profile/components/MenuButtons.jsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
/* eslint-disable prefer-template */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import useLogin from '../../accounts/login/LoginHook';
|
||||||
|
import useAccountsItemForm from '../../accounts/hooks/AccountsItemFormHook';
|
||||||
|
|
||||||
|
const MenuButtons = (props) => {
|
||||||
|
const queryString = window.location.search;
|
||||||
|
const queryStringNoParams = queryString.split('?')[0];
|
||||||
|
const { login } = useLogin();
|
||||||
|
const { item } = useAccountsItemForm(login.length !== 0 ? login[0].id : '');
|
||||||
|
if (item.admin === '1') {
|
||||||
|
if (props.isSidebar) {
|
||||||
|
return (
|
||||||
|
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
|
||||||
|
<div className="offcanvas-header">
|
||||||
|
<Button className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></Button>
|
||||||
|
</div>
|
||||||
|
<div id="menu" className="d-flex flex-column me-3 mb-3">
|
||||||
|
<p className="mt-3 me-auto ms-auto mb-3" style={{ fontSize: 22, textAlign: 'center' }}> Здравствуйте, {login.length !== 0 ? item.firstname : ''}!</p>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=1' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Корзина</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=2' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Заказы</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=3' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Избранное</Button>
|
||||||
|
<Link to='../admin' className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Админ-панель</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div id="menu" className="box d-flex flex-column me-3 mb-3 xl-only">
|
||||||
|
<p className="mt-3 me-auto ms-auto mb-3" style={{ fontSize: 22, textAlign: 'center' }}> Здравствуйте, {login.length !== 0 ? item.firstname : ''}!</p>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=1' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Корзина</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=2' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Заказы</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=3' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Избранное</Button>
|
||||||
|
<Link to='../admin' className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Админ-панель</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (props.isSidebar) {
|
||||||
|
return (
|
||||||
|
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
|
||||||
|
<div className="offcanvas-header">
|
||||||
|
<Button className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></Button>
|
||||||
|
</div>
|
||||||
|
<div id="menu" className="d-flex flex-column me-3 mb-3">
|
||||||
|
<p className="mt-3 me-auto ms-auto mb-3" style={{ fontSize: 22, textAlign: 'center' }}> Здравствуйте, {login.length !== 0 ? item.firstname : ''}!</p>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=1' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Корзина</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=2' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Заказы</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=3' } onClick={() => window.location.reload(true)} className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Избранное</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div id="menu" className="box d-flex flex-column me-3 mb-3 xl-only">
|
||||||
|
<p className="mt-3 me-auto ms-auto mb-3" style={{ fontSize: 22, textAlign: 'center' }}> Здравствуйте, {login.length !== 0 ? item.firstname : ''}!</p>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=1' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Корзина</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=2' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Заказы</Button>
|
||||||
|
<Button href={ queryStringNoParams + '?contentBox=3' } onClick={() => window.location.reload(true)} className="btn menu-btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Избранное</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
MenuButtons.propTypes = {
|
||||||
|
isSidebar: PropTypes.boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MenuButtons;
|
||||||
52
src/components/profile/components/cart/Cart.jsx
Normal file
52
src/components/profile/components/cart/Cart.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { XLg } from 'react-bootstrap-icons';
|
||||||
|
import useCart from './CartHook';
|
||||||
|
import formatter from '../../../formatter/formatter';
|
||||||
|
import CartItem from './CartItem';
|
||||||
|
import useOrders from '../orders/OrdersHook';
|
||||||
|
|
||||||
|
const Cart = () => {
|
||||||
|
const {
|
||||||
|
cart,
|
||||||
|
getCartCount,
|
||||||
|
getCartSum,
|
||||||
|
clearCart,
|
||||||
|
} = useCart();
|
||||||
|
const {
|
||||||
|
orders,
|
||||||
|
addToOrders,
|
||||||
|
} = useOrders();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="cart" className="box">
|
||||||
|
<p className="mt-3 me-auto ms-5 mb-3" style={{ fontSize: 22, textAlign: 'left' }}>Корзина</p>
|
||||||
|
<div className="d-flex flex-wrap">
|
||||||
|
<div id="cart-box" className="innerbox ms-4 me-3 w-75 mb-3 d-flex flex-column" style={{ minWidth: '300px' }}>
|
||||||
|
<Button variant='danger' className="btn me-5 mt-3 ms-5 mb-3" onClick={() => clearCart()}>
|
||||||
|
<XLg /> Очистить
|
||||||
|
</Button>
|
||||||
|
{
|
||||||
|
cart.map((cartItem) =>
|
||||||
|
<CartItem key={cartItem.id} item={cartItem}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div id="order-cart-box" className="innerbox ms-4 me-4 mb-3 d-flex flex-column">
|
||||||
|
<div id="total-sum" className="d-flex flex-row mt-4">
|
||||||
|
<p className="ms-4 me-auto" style={{ fontSize: 22, textAlign: 'left' }}>Итого</p>
|
||||||
|
<p className="ms-auto me-4" style={{ fontSize: 22, textAlign: 'right' }}>{formatter.format(getCartSum())} </p>
|
||||||
|
</div>
|
||||||
|
<div id="total-itemsincart" className="d-flex flex-row mb-3">
|
||||||
|
<p className="ms-4 me-auto" style={{ fontSize: 16, color: '#7e7e7e', textAlign: 'left' }}>Товаров</p>
|
||||||
|
<p className="ms-auto me-4" style={{ fontSize: 16, color: '#7e7e7e', textAlign: 'right' }}>{getCartCount()} шт.</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => { clearCart(); addToOrders(orders); }} className="btn btn-main mt-auto me-5 ms-5 mb-3" style={{ minHeight: '55px' }}>Оформить заказ</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Cart;
|
||||||
29
src/components/profile/components/cart/CartContext.jsx
Normal file
29
src/components/profile/components/cart/CartContext.jsx
Normal file
@ -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;
|
||||||
32
src/components/profile/components/cart/CartHook.js
Normal file
32
src/components/profile/components/cart/CartHook.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import CartContext from './CartContext.jsx';
|
||||||
|
import {
|
||||||
|
cartAdd, cartClear, cartRemove, getCartCount,
|
||||||
|
} 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 cartCount = () => {
|
||||||
|
return Number(getCartCount(cart));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
cart,
|
||||||
|
getCartCount: () => cartCount(),
|
||||||
|
getCartSum: () => cartSum(),
|
||||||
|
addToCart: (item) => dispatch(cartAdd(item)),
|
||||||
|
removeFromCart: (item) => dispatch(cartRemove(item)),
|
||||||
|
clearCart: () => dispatch(cartClear()),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCart;
|
||||||
42
src/components/profile/components/cart/CartItem.jsx
Normal file
42
src/components/profile/components/cart/CartItem.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { ButtonGroup, Button } from 'react-bootstrap';
|
||||||
|
import { Dash, Plus } from 'react-bootstrap-icons';
|
||||||
|
import formatter from '../../../formatter/formatter';
|
||||||
|
import useCart from './CartHook';
|
||||||
|
|
||||||
|
function CartItem(props) {
|
||||||
|
const { item } = props;
|
||||||
|
const { name } = item;
|
||||||
|
|
||||||
|
const {
|
||||||
|
addToCart,
|
||||||
|
removeFromCart,
|
||||||
|
} = useCart();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="d-flex flex-wrap mb-3">
|
||||||
|
<div id="cart-pic" className='d-flex align-items-center box picmin ms-3'><img src={ item.image }/></div>
|
||||||
|
<p className="align-self-center ms-3 me-5 w-75">{ name }</p>
|
||||||
|
<ButtonGroup className='mt-2 mb-auto ms-3 me-3' aria-label="Cart counter">
|
||||||
|
<Button className='btn-main' onClick={() => removeFromCart(item)}>
|
||||||
|
<Dash />
|
||||||
|
</Button>
|
||||||
|
<Button className='btn-main'style={{ fontSize: '15px' }} disabled={true}>
|
||||||
|
{item.count}
|
||||||
|
</Button>
|
||||||
|
<Button className='btn-main' onClick={() => addToCart(item)}>
|
||||||
|
<Plus />
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
<p className="mt-2 mb-auto ms-auto me-4 fs-4">{ formatter.format(item.price) }</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
CartItem.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CartItem;
|
||||||
80
src/components/profile/components/cart/CartReducer.js
Normal file
80
src/components/profile/components/cart/CartReducer.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
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) => {
|
||||||
|
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 } = action;
|
||||||
|
switch (action.type) {
|
||||||
|
case CART_ADD: {
|
||||||
|
return addToCart(cart, item);
|
||||||
|
}
|
||||||
|
case CART_REMOVE: {
|
||||||
|
return removeFromCart(cart, item);
|
||||||
|
}
|
||||||
|
case CART_CLEAR: {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw Error(`Unknown action: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const cartAdd = (item) => ({
|
||||||
|
type: CART_ADD, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const cartRemove = (item) => ({
|
||||||
|
type: CART_REMOVE, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const cartClear = () => ({
|
||||||
|
type: CART_CLEAR,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const getCartCount = (cart) => {
|
||||||
|
let Count = 0;
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const item of cart) {
|
||||||
|
Count += item.count;
|
||||||
|
}
|
||||||
|
return Count;
|
||||||
|
};
|
||||||
33
src/components/profile/components/favorite/Favorite.jsx
Normal file
33
src/components/profile/components/favorite/Favorite.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { XLg } from 'react-bootstrap-icons';
|
||||||
|
import useFavorite from './FavoriteHook';
|
||||||
|
import FavoriteItem from './FavoriteItem';
|
||||||
|
|
||||||
|
const Favorite = () => {
|
||||||
|
const {
|
||||||
|
favorite,
|
||||||
|
clearFavorite,
|
||||||
|
} = useFavorite();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="favorite" className="box">
|
||||||
|
<p className="mt-3 me-auto ms-5 mb-3" style={{ fontSize: 22, textAlign: 'left' }}>Избранное</p>
|
||||||
|
<div className="d-flex flex-wrap">
|
||||||
|
<div id="favorite-box" className="innerbox ms-4 me-3 w-100 mb-3 d-flex flex-column" style={{ minHeight: '300px' }}>
|
||||||
|
<Button variant='danger' className="btn me-5 mt-3 ms-5 mb-3" onClick={() => clearFavorite()}>
|
||||||
|
<XLg /> Очистить
|
||||||
|
</Button>
|
||||||
|
{
|
||||||
|
favorite.map((favoriteItem) =>
|
||||||
|
<FavoriteItem key={favoriteItem.id} item={favoriteItem}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Favorite;
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useReducer,
|
||||||
|
} from 'react';
|
||||||
|
import { favoriteReducer, loadFavorite, saveFavorite } from './FavoriteReducer';
|
||||||
|
|
||||||
|
const FavoriteContext = createContext(null);
|
||||||
|
|
||||||
|
export const FavoriteProvider = ({ children }) => {
|
||||||
|
const [favorite, dispatch] = useReducer(favoriteReducer, [], loadFavorite);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
saveFavorite(favorite || []);
|
||||||
|
}, [favorite]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FavoriteContext.Provider value={{ favorite, dispatch }}>
|
||||||
|
{children}
|
||||||
|
</FavoriteContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
FavoriteProvider.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FavoriteContext;
|
||||||
18
src/components/profile/components/favorite/FavoriteHook.js
Normal file
18
src/components/profile/components/favorite/FavoriteHook.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import FavoriteContext from './FavoriteContext.jsx';
|
||||||
|
import {
|
||||||
|
favoriteAdd, favoriteClear, favoriteRemove,
|
||||||
|
} from './FavoriteReducer';
|
||||||
|
|
||||||
|
const useFavorite = () => {
|
||||||
|
const { favorite, dispatch } = useContext(FavoriteContext);
|
||||||
|
|
||||||
|
return {
|
||||||
|
favorite,
|
||||||
|
addToFavorite: (item) => dispatch(favoriteAdd(item)),
|
||||||
|
removeFromFavorite: (item) => dispatch(favoriteRemove(item)),
|
||||||
|
clearFavorite: () => dispatch(favoriteClear()),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFavorite;
|
||||||
33
src/components/profile/components/favorite/FavoriteItem.jsx
Normal file
33
src/components/profile/components/favorite/FavoriteItem.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { X } from 'react-bootstrap-icons';
|
||||||
|
import formatter from '../../../formatter/formatter';
|
||||||
|
import useFavorite from './FavoriteHook';
|
||||||
|
|
||||||
|
function FavoriteItem(props) {
|
||||||
|
const { item } = props;
|
||||||
|
const { name } = item;
|
||||||
|
|
||||||
|
const {
|
||||||
|
removeFromFavorite,
|
||||||
|
} = useFavorite();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="d-flex flex-wrap mb-3">
|
||||||
|
<Button className="btn mt-auto mb-auto ms-3 btn-main" onClick={() => removeFromFavorite(item)}>
|
||||||
|
<X />
|
||||||
|
</Button>
|
||||||
|
<div id="favorite-pic" className='d-flex align-items-center box picmin ms-3'><img src={ item.image }/></div>
|
||||||
|
<p className="align-self-center w-25 ms-3 me-5">{ name }</p>
|
||||||
|
<p className="align-self-center ms-auto me-4 fs-4">{ formatter.format(item.price) }</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
FavoriteItem.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FavoriteItem;
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
const setFavoriteCount = (favorite, item, value) => {
|
||||||
|
return favorite.map((favoriteItem) => {
|
||||||
|
if (favoriteItem.id === item.id) {
|
||||||
|
return { ...favoriteItem, count: favoriteItem.count + value };
|
||||||
|
}
|
||||||
|
return favoriteItem;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addToFavorite = (favorite, item) => {
|
||||||
|
const existsItem = favorite.find((favoriteItem) => favoriteItem.id === item.id);
|
||||||
|
if (existsItem !== undefined) {
|
||||||
|
return setFavoriteCount(favorite, item, 0);
|
||||||
|
}
|
||||||
|
return [...favorite, { ...item, count: 1 }];
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFromFavorite = (favorite, item) => {
|
||||||
|
const existsItem = favorite.find((favoriteItem) => favoriteItem.id === item.id);
|
||||||
|
if (existsItem !== undefined && existsItem.count > 1) {
|
||||||
|
return setFavoriteCount(favorite, item, -1);
|
||||||
|
}
|
||||||
|
return favorite.filter((favoriteItem) => favoriteItem.id !== item.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FAVORITE_KEY = 'localFavorite';
|
||||||
|
const FAVORITE_ADD = 'favorite/add';
|
||||||
|
const FAVORITE_REMOVE = 'favorite/remove';
|
||||||
|
const FAVORITE_CLEAR = 'favorite/clear';
|
||||||
|
|
||||||
|
export const saveFavorite = (favorite) => {
|
||||||
|
localStorage.setItem(FAVORITE_KEY, JSON.stringify(favorite));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loadFavorite = (initialValue = []) => {
|
||||||
|
const favoriteData = localStorage.getItem(FAVORITE_KEY);
|
||||||
|
if (favoriteData) {
|
||||||
|
return JSON.parse(favoriteData);
|
||||||
|
}
|
||||||
|
return initialValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const favoriteReducer = (favorite, action) => {
|
||||||
|
const { item } = action;
|
||||||
|
switch (action.type) {
|
||||||
|
case FAVORITE_ADD: {
|
||||||
|
return addToFavorite(favorite, item);
|
||||||
|
}
|
||||||
|
case FAVORITE_REMOVE: {
|
||||||
|
return removeFromFavorite(favorite, item);
|
||||||
|
}
|
||||||
|
case FAVORITE_CLEAR: {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw Error(`Unknown action: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const favoriteAdd = (item) => ({
|
||||||
|
type: FAVORITE_ADD, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const favoriteRemove = (item) => ({
|
||||||
|
type: FAVORITE_REMOVE, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const favoriteClear = () => ({
|
||||||
|
type: FAVORITE_CLEAR,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const getFavoriteCount = (favorite) => {
|
||||||
|
let Count = 0;
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const item of favorite) {
|
||||||
|
Count += item.count;
|
||||||
|
}
|
||||||
|
return Count;
|
||||||
|
};
|
||||||
27
src/components/profile/components/orders/Orders.jsx
Normal file
27
src/components/profile/components/orders/Orders.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
import useOrders from './OrdersHook';
|
||||||
|
import OrdersItem from './OrdersItem';
|
||||||
|
|
||||||
|
const Orders = () => {
|
||||||
|
const {
|
||||||
|
orders,
|
||||||
|
} = useOrders();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="orders" className="box">
|
||||||
|
<p className="mt-3 me-auto ms-5 mb-3" style={{ fontSize: 22, textAlign: 'left' }}>История заказов</p>
|
||||||
|
<div className="d-flex flex-wrap">
|
||||||
|
<div id="orders-box" className="innerbox ms-4 me-3 w-100 mb-3 d-flex flex-column" style={{ minHeight: '300px' }}>
|
||||||
|
{
|
||||||
|
orders.map((ordersItem) =>
|
||||||
|
<OrdersItem key={ordersItem.id} item={ordersItem}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Orders;
|
||||||
29
src/components/profile/components/orders/OrdersContext.jsx
Normal file
29
src/components/profile/components/orders/OrdersContext.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useReducer,
|
||||||
|
} from 'react';
|
||||||
|
import { ordersReducer, loadOrders, saveOrders } from './OrdersReducer';
|
||||||
|
|
||||||
|
const OrdersContext = createContext(null);
|
||||||
|
|
||||||
|
export const OrdersProvider = ({ children }) => {
|
||||||
|
const [orders, dispatch] = useReducer(ordersReducer, [], loadOrders);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
saveOrders(orders || []);
|
||||||
|
}, [orders]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<OrdersContext.Provider value={{ orders, dispatch }}>
|
||||||
|
{children}
|
||||||
|
</OrdersContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
OrdersProvider.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OrdersContext;
|
||||||
18
src/components/profile/components/orders/OrdersHook.js
Normal file
18
src/components/profile/components/orders/OrdersHook.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import OrdersContext from './OrdersContext.jsx';
|
||||||
|
import {
|
||||||
|
ordersAdd, ordersClear, ordersRemove,
|
||||||
|
} from './OrdersReducer';
|
||||||
|
|
||||||
|
const useOrders = () => {
|
||||||
|
const { orders, dispatch } = useContext(OrdersContext);
|
||||||
|
|
||||||
|
return {
|
||||||
|
orders,
|
||||||
|
addToOrders: (item) => dispatch(ordersAdd(item)),
|
||||||
|
removeFromOrders: (item) => dispatch(ordersRemove(item)),
|
||||||
|
clearOrders: () => dispatch(ordersClear()),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useOrders;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user