Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7bb32d1a0b | |||
| 169ce23bed | |||
| 1a03116e40 | |||
| 195fbaf556 | |||
| 371bccf190 | |||
| 7bab2db70a | |||
| ad0b6bc86a | |||
| c44b4a283c | |||
| c5760f27b4 | |||
| ca519f47b1 | |||
| 2812645834 | |||
| b8e88a4866 | |||
| 102da1ad75 | |||
| a84b1972e7 | |||
| 2ba1a63832 | |||
| 9367009fdf | |||
| e0ba3a0f45 | |||
| df845c3ae7 | |||
| 7a5be1d876 |
@@ -1,70 +1,52 @@
|
|||||||
{
|
{
|
||||||
"products": [
|
"products": [
|
||||||
{
|
{
|
||||||
"id": "1",
|
"id": 1,
|
||||||
"name": "Breed Dry Dog Food",
|
"name": "Breed Dry Dog Food",
|
||||||
"price": 100,
|
"price": 100,
|
||||||
"imageUrl": "./src/assets/images/products/dog-food.svg"
|
"imageUrl": "./src/assets/images/products/dog-food.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "2",
|
"id": 2,
|
||||||
"name": "CANON EOS DSLR Camera",
|
"name": "CANON EOS DSLR Camera",
|
||||||
"price": 360,
|
"price": 360,
|
||||||
"imageUrl": "./src/assets/images/products/camera.svg"
|
"imageUrl": "./src/assets/images/products/camera.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "3",
|
"id": 3,
|
||||||
"name": "ASUS FHD Gaming Laptop",
|
"name": "ASUS FHD Gaming Laptop",
|
||||||
"price": 700,
|
"price": 700,
|
||||||
"imageUrl": "./src/assets/images/products/laptop.svg"
|
"imageUrl": "./src/assets/images/products/laptop.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "4",
|
"id": 4,
|
||||||
"name": "Curology Product Set ",
|
"name": "Curology Product Set ",
|
||||||
"price": 500,
|
"price": 500,
|
||||||
"imageUrl": "./src/assets/images/products/curoset.svg"
|
"imageUrl": "./src/assets/images/products/curoset.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "5",
|
"id": 5,
|
||||||
"name": "Kids Electric Car",
|
"name": "Kids Electric Car",
|
||||||
"price": 960,
|
"price": 960,
|
||||||
"imageUrl": "./src/assets/images/products/car.svg"
|
"imageUrl": "./src/assets/images/products/car.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "6",
|
"id": 6,
|
||||||
"name": "Jr. Zoom Soccer Cleats",
|
"name": "Jr. Zoom Soccer Cleats",
|
||||||
"price": 1160,
|
"price": 1160,
|
||||||
"imageUrl": "./src/assets/images/products/soccer.svg"
|
"imageUrl": "./src/assets/images/products/soccer.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "7",
|
"id": 7,
|
||||||
"name": "GP11 Shooter USB Gamepad",
|
"name": "GP11 Shooter USB Gamepad",
|
||||||
"price": 660,
|
"price": 660,
|
||||||
"imageUrl": "./src/assets/images/products/gamepad.svg"
|
"imageUrl": "./src/assets/images/products/gamepad.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "8",
|
"id": 8,
|
||||||
"name": "Quilted Satin Jacket",
|
"name": "Quilted Satin Jacket",
|
||||||
"price": 660,
|
"price": 660,
|
||||||
"imageUrl": "./src/assets/images/products/jacket.svg"
|
"imageUrl": "./src/assets/images/products/jacket.svg"
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"cart": [
|
}
|
||||||
{
|
|
||||||
"id": "f7d5",
|
|
||||||
"productId": "1",
|
|
||||||
"name": "Breed Dry Dog Food",
|
|
||||||
"price": 100,
|
|
||||||
"imageUrl": "./src/assets/images/products/dog-food.svg",
|
|
||||||
"quantity": 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bb06",
|
|
||||||
"productId": "2",
|
|
||||||
"name": "CANON EOS DSLR Camera",
|
|
||||||
"price": 360,
|
|
||||||
"imageUrl": "./src/assets/images/products/camera.svg",
|
|
||||||
"quantity": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|||||||
Generated
+3184
-3758
File diff suppressed because it is too large
Load Diff
@@ -11,11 +11,9 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"json-server": "^1.0.0-beta.3",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
"react-router-dom": "^7.7.1",
|
|
||||||
"sass-embedded": "^1.89.2"
|
"sass-embedded": "^1.89.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
+11
-6
@@ -1,11 +1,16 @@
|
|||||||
// удаляем все, оставляя лишь пустую функцию App ниже
|
import styles from './App.module.scss'
|
||||||
|
|
||||||
function App() {
|
import Header from './components/header'
|
||||||
|
import ProductList from './components/list'
|
||||||
|
import Timer from './components/timer'
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={styles.container}>
|
||||||
{/* Добавьте тестовый контент для проверки */}
|
<Header />
|
||||||
<h1>Hello, React!</h1>
|
<Timer />
|
||||||
</>
|
<ProductList />
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@use './assets/styles/variables' as *;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1170px;
|
max-width: 1170px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import styles from './OrderDetail.module.scss'
|
|
||||||
import { useCart } from '../hooks/useCart'
|
|
||||||
|
|
||||||
const OrderDetail = () => {
|
|
||||||
const { cart } = useCart()
|
|
||||||
|
|
||||||
const subtotal = cart.reduce(
|
|
||||||
(acc, item) => acc + item.price * item.quantity,
|
|
||||||
0
|
|
||||||
)
|
|
||||||
const discount = subtotal * 0.2
|
|
||||||
const delivery = 15
|
|
||||||
const total = subtotal - discount + delivery
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.detail}>
|
|
||||||
<h2>Order Summary</h2>
|
|
||||||
<div className={styles.stats}>
|
|
||||||
<div>
|
|
||||||
<p>Subtotal</p>
|
|
||||||
<span>${subtotal}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Discount (-20%)</p>
|
|
||||||
<span>-${discount}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Delivery Fee</p>
|
|
||||||
<span>${delivery}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.total}>
|
|
||||||
<p>Total</p>
|
|
||||||
<span>${total}</span>
|
|
||||||
</div>
|
|
||||||
<button>Go to Checkout</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OrderDetail
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
@use '../assets/styles/variables' as *;
|
|
||||||
|
|
||||||
.detail {
|
|
||||||
border: 1px solid gainsboro;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
flex-basis: 50%;
|
|
||||||
margin-top: 24px;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 24px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid gainsboro;
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: gray;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.total {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: gray;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
outline: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 62px;
|
|
||||||
background-color: $primary-color;
|
|
||||||
color: $white-color;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import styles from './index.module.scss'
|
|
||||||
import TrashIcon from '../../../assets/icons/trash.svg'
|
|
||||||
import { useCart } from '../../../hooks/useCart'
|
|
||||||
|
|
||||||
const CartItem = ({ item }) => {
|
|
||||||
const { removeFromCart, updateQuantity } = useCart()
|
|
||||||
|
|
||||||
const handleIncrement = () => {
|
|
||||||
updateQuantity(item.id, item.quantity + 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDecrement = () => {
|
|
||||||
if (item.quantity > 1) {
|
|
||||||
updateQuantity(item.id, item.quantity - 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.item}>
|
|
||||||
<button className={styles.trash} onClick={() => removeFromCart(item.id)}>
|
|
||||||
<img src={TrashIcon} alt='Удалить' />
|
|
||||||
</button>
|
|
||||||
<div className={styles.image}>
|
|
||||||
<img src={item.imageUrl} alt={item.name} />
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<h2>{item.name}</h2>
|
|
||||||
<div className={styles.wrapper}>
|
|
||||||
<span className={styles.price}>${item.price}</span>
|
|
||||||
<div className={styles.buttons}>
|
|
||||||
<button onClick={handleDecrement}>-</button>
|
|
||||||
<span>{item.quantity}</span>
|
|
||||||
<button onClick={handleIncrement}>+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CartItem
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
.item {
|
|
||||||
border-bottom: 1px solid #dcdcdc;
|
|
||||||
padding: 24px 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.trash {
|
|
||||||
outline: 0;
|
|
||||||
border: 0;
|
|
||||||
background-color: white;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 35px;
|
|
||||||
height: 124px;
|
|
||||||
width: 124px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 90px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.price {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
padding: 12px 20px;
|
|
||||||
gap: 20px;
|
|
||||||
border-radius: 62px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
outline: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
import WishIcon from '../../assets/icons/wish.svg'
|
||||||
|
|
||||||
|
const ProductCard = ({ name, price, imageUrl }) => {
|
||||||
|
return (
|
||||||
|
<div className={styles.product}>
|
||||||
|
<div className={styles.image}>
|
||||||
|
<img src={imageUrl} alt='' />
|
||||||
|
<div className={styles.buttons}>
|
||||||
|
<button>
|
||||||
|
<img src={WishIcon} alt='' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.content}>
|
||||||
|
<h4>{name}</h4>
|
||||||
|
<div className={styles.stats}>
|
||||||
|
<span>${price}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProductCard
|
||||||
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
@use '../../../assets/styles/variables' as *;
|
@use '../../assets/styles/variables' as *;
|
||||||
|
|
||||||
.product {
|
.product {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import styles from './index.module.scss'
|
|
||||||
import WishIcon from '../../../assets/icons/wish.svg'
|
|
||||||
import { useCart } from '../../../hooks/useCart'
|
|
||||||
|
|
||||||
const ProductCard = ({ id, name, price, imageUrl }) => {
|
|
||||||
const { addToCart } = useCart()
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
|
||||||
addToCart({ id, name, price, imageUrl })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.product}>
|
|
||||||
<div className={styles.image}>
|
|
||||||
<img src={imageUrl} alt={name} />
|
|
||||||
<div className={styles.buttons}>
|
|
||||||
<button onClick={handleAdd}>В корзину</button>
|
|
||||||
<button>
|
|
||||||
<img src={WishIcon} alt='Избранное' />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<h4>{name}</h4>
|
|
||||||
<div className={styles.stats}>
|
|
||||||
<span>${price}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProductCard
|
|
||||||
@@ -4,24 +4,21 @@ import CartIcon from '../../assets/icons/cart.svg'
|
|||||||
import UserIcon from '../../assets/icons/user.svg'
|
import UserIcon from '../../assets/icons/user.svg'
|
||||||
import WishlistIcon from '../../assets/icons/wishlist.svg'
|
import WishlistIcon from '../../assets/icons/wishlist.svg'
|
||||||
import LoopIcon from '../../assets/icons/loop.svg'
|
import LoopIcon from '../../assets/icons/loop.svg'
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { useCart } from '../../hooks/useCart'
|
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const { cart, loading, error } = useCart()
|
|
||||||
return (
|
return (
|
||||||
<header className={styles.header}>
|
<header className={styles.header}>
|
||||||
<h2>Exclusive</h2>
|
<h2>Exclusive</h2>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<Link to={{ pathname: '/' }}>Home</Link>
|
<a href='#'>Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link to={{ pathname: '/contact' }}>Contact</Link>
|
<a href='#'>Contact</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link to={{ pathname: '/about' }}>About</Link>
|
<a href='#'>About</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='#'>Sign Up</a>
|
<a href='#'>Sign Up</a>
|
||||||
@@ -34,17 +31,10 @@ const Header = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<button>
|
<button>
|
||||||
<Link to={{ pathname: '/wishlist' }}>
|
<img src={WishlistIcon} alt='' />
|
||||||
<img src={WishlistIcon} alt='' />
|
|
||||||
</Link>
|
|
||||||
</button>
|
</button>
|
||||||
<button>
|
<button>
|
||||||
<Link to={{ pathname: '/cart' }}>
|
<img src={CartIcon} alt='' />
|
||||||
<div className={styles.cart}>
|
|
||||||
<img src={CartIcon} alt='' className={styles.img} />
|
|
||||||
{cart && cart.length > 0 ? <div className={styles.sticker}>{cart.length}</div> : ''}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</button>
|
</button>
|
||||||
<button>
|
<button>
|
||||||
<img src={UserIcon} alt='' />
|
<img src={UserIcon} alt='' />
|
||||||
|
|||||||
@@ -1,85 +1,55 @@
|
|||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid gainsboro;
|
border-bottom: 1px solid gainsboro;
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 48px;
|
gap: 48px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
gap: 35px;
|
gap: 35px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: none;
|
background: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 12px;
|
|
||||||
/*overflow: hidden;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.sticker {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
/* отступ сверху */
|
|
||||||
left: 15px;
|
|
||||||
/* отступ слева */
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
|
||||||
/* Градиент стикера */
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 6px 10px 6px 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
/* Округление стикера */
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 65, 108, 0.4);
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
import CartItem from '../../card/cart'
|
|
||||||
import styles from './index.module.scss'
|
|
||||||
import { useCart } from '../../../hooks/useCart'
|
|
||||||
|
|
||||||
const CartList = () => {
|
|
||||||
const { cart, loading, error } = useCart()
|
|
||||||
|
|
||||||
if (loading) return <p>Загрузка корзины...</p>
|
|
||||||
if (error) return <p>Ошибка: {error}</p>
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ul className={styles.list}>
|
|
||||||
{cart.map(item => (
|
|
||||||
<li key={item.id}>
|
|
||||||
<CartItem item={item} />
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CartList
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
.list {
|
|
||||||
display: flex;
|
|
||||||
border: 1px solid gainsboro;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
margin-top: 24px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
max-width: 715px;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
flex-basis: 80%;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
import ProductCard from '../card'
|
||||||
|
|
||||||
|
const ProductList = () => {
|
||||||
|
const [products, setProducts] = React.useState([])
|
||||||
|
const [loading, setLoading] = React.useState(true)
|
||||||
|
const [error, setError] = React.useState(null)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
let cancelled = false
|
||||||
|
|
||||||
|
const getProducts = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
const response = await fetch('http://localhost:8000/products')
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
if (!cancelled) {
|
||||||
|
setProducts(data)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(err.message)
|
||||||
|
setProducts([])
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getProducts()
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className={styles.loading}>Загрузка продуктов...</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className={styles.error}>
|
||||||
|
<p>Ошибка при загрузке продуктов: {error}</p>
|
||||||
|
<button onClick={() => window.location.reload()}>
|
||||||
|
Попробовать снова
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className={styles.list}>
|
||||||
|
{products.map(product => (
|
||||||
|
<li key={product.id}>
|
||||||
|
<ProductCard {...product} />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProductList
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import styles from './index.module.scss'
|
|
||||||
import ProductCard from '../../card/product'
|
|
||||||
import { useProducts } from '../../../hooks/useProducts'
|
|
||||||
|
|
||||||
const ProductList = () => {
|
|
||||||
const { products, loading, error } = useProducts()
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <div className={styles.loading}>Загрузка продуктов...</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className={styles.error}>
|
|
||||||
<p>Ошибка при загрузке продуктов: {error}</p>
|
|
||||||
<button onClick={() => window.location.reload()}>
|
|
||||||
Попробовать снова
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ul className={styles.list}>
|
|
||||||
{products.map(product => (
|
|
||||||
<li key={product.id}>
|
|
||||||
<ProductCard {...product} />
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProductList
|
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
const Timer = () => {
|
||||||
|
const [seconds, setSeconds] = useState(0);
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setSeconds(prev => prev + 1);
|
||||||
|
}, 1000);
|
||||||
|
return () => {
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Прошло секунд: {seconds}</h2>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Timer
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CartService } from '../services/CartService'
|
|
||||||
|
|
||||||
export function useCart() {
|
|
||||||
const [cart, setCart] = React.useState([])
|
|
||||||
const [loading, setLoading] = React.useState(true)
|
|
||||||
const [error, setError] = React.useState(null)
|
|
||||||
|
|
||||||
const fetchCart = React.useCallback(async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true)
|
|
||||||
const data = await CartService.getCart()
|
|
||||||
setCart(data)
|
|
||||||
} catch (err) {
|
|
||||||
setError(err.message)
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const addToCart = async product => {
|
|
||||||
await CartService.addToCart(product)
|
|
||||||
await fetchCart()
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeFromCart = async id => {
|
|
||||||
await CartService.removeFromCart(id)
|
|
||||||
await fetchCart()
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateQuantity = async (id, quantity) => {
|
|
||||||
await CartService.updateQuantity(id, quantity)
|
|
||||||
await fetchCart()
|
|
||||||
}
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
fetchCart()
|
|
||||||
}, [fetchCart])
|
|
||||||
|
|
||||||
return {
|
|
||||||
cart,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
addToCart,
|
|
||||||
removeFromCart,
|
|
||||||
updateQuantity,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { fetchProducts } from '../services/ProductService'
|
|
||||||
|
|
||||||
export function useProducts() {
|
|
||||||
const [products, setProducts] = React.useState([])
|
|
||||||
const [loading, setLoading] = React.useState(true)
|
|
||||||
const [error, setError] = React.useState(null)
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
let cancelled = false
|
|
||||||
|
|
||||||
const loadProducts = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true)
|
|
||||||
setError(null)
|
|
||||||
|
|
||||||
const data = await fetchProducts()
|
|
||||||
|
|
||||||
if (!cancelled) {
|
|
||||||
setProducts(data)
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if (!cancelled) {
|
|
||||||
setError(err.message)
|
|
||||||
setProducts([])
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (!cancelled) {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadProducts()
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
cancelled = true
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return { products, loading, error }
|
|
||||||
}
|
|
||||||
+5
-16
@@ -1,20 +1,9 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import {
|
import App from './App.jsx'
|
||||||
BrowserRouter as Router,
|
|
||||||
Routes,
|
|
||||||
Route,
|
|
||||||
Navigate,
|
|
||||||
} from 'react-router-dom'
|
|
||||||
|
|
||||||
import Catalog from './pages/catalog'
|
|
||||||
import Cart from './pages/cart'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
<Router>
|
<StrictMode>
|
||||||
<Routes>
|
<App />
|
||||||
<Route path='/' element={<Navigate to='/catalog' replace />} />
|
</StrictMode>
|
||||||
<Route path='/catalog' element={<Catalog />} />
|
|
||||||
<Route path='/cart' element={<Cart />} />
|
|
||||||
</Routes>
|
|
||||||
</Router>
|
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
import styles from './index.module.scss'
|
|
||||||
|
|
||||||
import Header from '../../components/header'
|
|
||||||
import CartList from '../../components/list/cart'
|
|
||||||
import OrderDetail from '../../components/OrderDetail'
|
|
||||||
|
|
||||||
const Cart = () => {
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<Header />
|
|
||||||
<h1 style={{ marginTop: 24 }}>Your Cart</h1>
|
|
||||||
<div style={{ display: 'flex', gap: 20 }}>
|
|
||||||
<CartList />
|
|
||||||
<OrderDetail />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Cart
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import styles from './index.module.scss'
|
|
||||||
|
|
||||||
import Header from '../../components/header/index'
|
|
||||||
import ProductList from '../../components/list/product/index'
|
|
||||||
|
|
||||||
const Catalog = () => {
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<Header />
|
|
||||||
<ProductList />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Catalog
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
.container {
|
|
||||||
max-width: 1170px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
const BASE_URL = 'http://localhost:8000/cart'
|
|
||||||
|
|
||||||
export const CartService = {
|
|
||||||
async getCart() {
|
|
||||||
const response = await fetch(BASE_URL)
|
|
||||||
if (!response.ok) throw new Error('Ошибка при получении корзины')
|
|
||||||
return response.json()
|
|
||||||
},
|
|
||||||
async getCartCount() {
|
|
||||||
const response = await fetch(BASE_URL)
|
|
||||||
if (!response.ok) throw new Error('Ошибка при получении корзины')
|
|
||||||
return response.json().length
|
|
||||||
},
|
|
||||||
async addToCart(product) {
|
|
||||||
const existing = await fetch(`${BASE_URL}?productId=${product.id}`)
|
|
||||||
const data = await existing.json()
|
|
||||||
|
|
||||||
if (data.length > 0) {
|
|
||||||
const current = data[0]
|
|
||||||
return fetch(`${BASE_URL}/${current.id}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ quantity: current.quantity + 1 }),
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return fetch(BASE_URL, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
productId: product.id,
|
|
||||||
name: product.name,
|
|
||||||
price: product.price,
|
|
||||||
imageUrl: product.imageUrl,
|
|
||||||
quantity: 1,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async updateQuantity(id, quantity) {
|
|
||||||
return fetch(`${BASE_URL}/${id}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ quantity }),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
async removeFromCart(id) {
|
|
||||||
return fetch(`${BASE_URL}/${id}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
const API_URL = 'http://localhost:8000/products'
|
|
||||||
|
|
||||||
export async function fetchProducts() {
|
|
||||||
try {
|
|
||||||
const response = await fetch(API_URL)
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await response.json()
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error(error.message || 'Ошибка при загрузке продуктов')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user