Compare commits

..

19 Commits

Author SHA1 Message Date
laktionov-as 7bb32d1a0b разобрались с чистыми компонетами 2026-05-14 20:25:06 +03:00
isHardCoded 169ce23bed Рефакторинг компонента ProductList 2025-07-07 23:06:01 +03:00
isHardCoded 1a03116e40 Перенесли стили для компонентов в соответствующие файлы 2025-07-07 13:15:19 +03:00
isHardCoded 195fbaf556 Перенесли весь код в компоненты 2025-07-07 13:13:41 +03:00
isHardCoded 371bccf190 Создали папку для каждого компонента 2025-07-07 13:09:04 +03:00
isHardCoded 7bab2db70a Добавили карточку товара и список товаров, создали новые данные в db.json. Установили в проект иконки и изображения новых товаров, создали функцию getProducts для получения товаров с бекенда 2025-07-07 12:15:38 +03:00
isHardCoded ad0b6bc86a Сделали полное изменение структуры, изменили шрифт и цветовую палитру, переделали компонент Header и стили для него, остальные компоненты были временно удалены 2025-07-07 11:32:38 +03:00
isHardCoded c44b4a283c Fix: изменили description на brand 2025-06-25 15:43:44 +03:00
isHardCoded c5760f27b4 Создали props для компонента Products, отмаппили полученные товары на странице 2025-06-25 15:40:12 +03:00
isHardCoded ca519f47b1 Создали асинхронную функцию getProducts для получения продуктов с сервера 2025-06-25 15:38:08 +03:00
isHardCoded 2812645834 Установили библиотеку json-server, заполнили данные в db.json, настроили скрипт для запуска сервера 2025-06-25 15:14:13 +03:00
isHardCoded b8e88a4866 Добавили в компонент Product иконку сердца и создали состояние для нее 2025-06-18 11:45:47 +03:00
isHardCoded 102da1ad75 Fix 2025-06-16 13:50:56 +03:00
isHardCoded a84b1972e7 Стилизовали компонент Header, добавили обработчик событий onChange 2025-06-16 13:32:07 +03:00
isHardCoded 2ba1a63832 Добавили обработчик событий по клику на карточку товара, создали компонент Header, установили библиотеку react-icons 2025-06-16 12:48:23 +03:00
isHardCoded 9367009fdf Добавили каталог товаров, карточки и стилизацию для них 2025-06-08 13:05:39 +03:00
isHardCoded e0ba3a0f45 Изменили подход стилизации на CSS Modules 2025-06-08 12:26:21 +03:00
isHardCoded df845c3ae7 Вынесли свойство для шрифтов в index.html для применения их ко всем текстовым элементам 2025-06-08 12:17:15 +03:00
isHardCoded 7a5be1d876 Создали компонент Product, вынесли стили для него в отдельный файл App.css 2025-06-08 12:12:36 +03:00
29 changed files with 3426 additions and 4452 deletions
+51 -69
View File
@@ -1,70 +1,52 @@
{
"products": [
{
"id": "1",
"name": "Breed Dry Dog Food",
"price": 100,
"imageUrl": "./src/assets/images/products/dog-food.svg"
},
{
"id": "2",
"name": "CANON EOS DSLR Camera",
"price": 360,
"imageUrl": "./src/assets/images/products/camera.svg"
},
{
"id": "3",
"name": "ASUS FHD Gaming Laptop",
"price": 700,
"imageUrl": "./src/assets/images/products/laptop.svg"
},
{
"id": "4",
"name": "Curology Product Set ",
"price": 500,
"imageUrl": "./src/assets/images/products/curoset.svg"
},
{
"id": "5",
"name": "Kids Electric Car",
"price": 960,
"imageUrl": "./src/assets/images/products/car.svg"
},
{
"id": "6",
"name": "Jr. Zoom Soccer Cleats",
"price": 1160,
"imageUrl": "./src/assets/images/products/soccer.svg"
},
{
"id": "7",
"name": "GP11 Shooter USB Gamepad",
"price": 660,
"imageUrl": "./src/assets/images/products/gamepad.svg"
},
{
"id": "8",
"name": "Quilted Satin Jacket",
"price": 660,
"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
}
]
}
"products": [
{
"id": 1,
"name": "Breed Dry Dog Food",
"price": 100,
"imageUrl": "./src/assets/images/products/dog-food.svg"
},
{
"id": 2,
"name": "CANON EOS DSLR Camera",
"price": 360,
"imageUrl": "./src/assets/images/products/camera.svg"
},
{
"id": 3,
"name": "ASUS FHD Gaming Laptop",
"price": 700,
"imageUrl": "./src/assets/images/products/laptop.svg"
},
{
"id": 4,
"name": "Curology Product Set ",
"price": 500,
"imageUrl": "./src/assets/images/products/curoset.svg"
},
{
"id": 5,
"name": "Kids Electric Car",
"price": 960,
"imageUrl": "./src/assets/images/products/car.svg"
},
{
"id": 6,
"name": "Jr. Zoom Soccer Cleats",
"price": 1160,
"imageUrl": "./src/assets/images/products/soccer.svg"
},
{
"id": 7,
"name": "GP11 Shooter USB Gamepad",
"price": 660,
"imageUrl": "./src/assets/images/products/gamepad.svg"
},
{
"id": 8,
"name": "Quilted Satin Jacket",
"price": 660,
"imageUrl": "./src/assets/images/products/jacket.svg"
}
]
}
+3184 -3758
View File
File diff suppressed because it is too large Load Diff
-2
View File
@@ -11,11 +11,9 @@
"preview": "vite preview"
},
"dependencies": {
"json-server": "^1.0.0-beta.3",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.7.1",
"sass-embedded": "^1.89.2"
},
"devDependencies": {
+11 -6
View File
@@ -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 (
<>
{/* Добавьте тестовый контент для проверки */}
<h1>Hello, React!</h1>
</>
<div className={styles.container}>
<Header />
<Timer />
<ProductList />
</div>
)
}
@@ -1,3 +1,5 @@
@use './assets/styles/variables' as *;
.container {
max-width: 1170px;
margin: 0 auto;
-41
View File
@@ -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
-67
View File
@@ -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;
}
}
-41
View File
@@ -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;
}
}
}
}
+26
View File
@@ -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,4 +1,4 @@
@use '../../../assets/styles/variables' as *;
@use '../../assets/styles/variables' as *;
.product {
display: flex;
-33
View File
@@ -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
+5 -15
View File
@@ -4,24 +4,21 @@ import CartIcon from '../../assets/icons/cart.svg'
import UserIcon from '../../assets/icons/user.svg'
import WishlistIcon from '../../assets/icons/wishlist.svg'
import LoopIcon from '../../assets/icons/loop.svg'
import { Link } from 'react-router-dom'
import { useCart } from '../../hooks/useCart'
const Header = () => {
const { cart, loading, error } = useCart()
return (
<header className={styles.header}>
<h2>Exclusive</h2>
<nav>
<ul>
<li>
<Link to={{ pathname: '/' }}>Home</Link>
<a href='#'>Home</a>
</li>
<li>
<Link to={{ pathname: '/contact' }}>Contact</Link>
<a href='#'>Contact</a>
</li>
<li>
<Link to={{ pathname: '/about' }}>About</Link>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Sign Up</a>
@@ -34,17 +31,10 @@ const Header = () => {
</div>
<div className={styles.buttons}>
<button>
<Link to={{ pathname: '/wishlist' }}>
<img src={WishlistIcon} alt='' />
</Link>
<img src={WishlistIcon} alt='' />
</button>
<button>
<Link to={{ pathname: '/cart' }}>
<div className={styles.cart}>
<img src={CartIcon} alt='' className={styles.img} />
{cart && cart.length > 0 ? <div className={styles.sticker}>{cart.length}</div> : ''}
</div>
</Link>
<img src={CartIcon} alt='' />
</button>
<button>
<img src={UserIcon} alt='' />
+45 -75
View File
@@ -1,85 +1,55 @@
.header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid gainsboro;
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid gainsboro;
padding: 30px 0;
h2 {
font-size: 24px;
}
h2 {
font-size: 24px;
}
ul {
list-style: none;
display: flex;
gap: 48px;
ul {
list-style: none;
display: flex;
gap: 48px;
a {
color: black;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
}
a {
color: black;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
}
.search {
display: flex;
align-items: center;
background-color: #f5f5f5;
padding: 7px 12px;
gap: 35px;
.search {
display: flex;
align-items: center;
background-color: #f5f5f5;
padding: 7px 12px;
gap: 35px;
input {
outline: 0;
border: 0;
background-color: #f5f5f5;
font-size: 12px;
}
input {
outline: 0;
border: 0;
background-color: #f5f5f5;
font-size: 12px;
}
img {
cursor: pointer;
}
}
img {
cursor: pointer;
}
}
.buttons {
display: flex;
gap: 16px;
.buttons {
display: flex;
gap: 16px;
button {
background: none;
outline: 0;
border: 0;
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;
}
button {
background: none;
outline: 0;
border: 0;
cursor: pointer;
}
}
}
-22
View File
@@ -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%;
}
+75
View File
@@ -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
-34
View File
@@ -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
+21
View File
@@ -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
-48
View File
@@ -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,
}
}
-42
View File
@@ -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
View File
@@ -1,20 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from 'react-router-dom'
import Catalog from './pages/catalog'
import Cart from './pages/cart'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<Router>
<Routes>
<Route path='/' element={<Navigate to='/catalog' replace />} />
<Route path='/catalog' element={<Catalog />} />
<Route path='/cart' element={<Cart />} />
</Routes>
</Router>
<StrictMode>
<App />
</StrictMode>
)
-20
View File
@@ -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
-15
View File
@@ -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
-4
View File
@@ -1,4 +0,0 @@
.container {
max-width: 1170px;
margin: 0 auto;
}
-53
View File
@@ -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',
})
},
}
-15
View File
@@ -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 || 'Ошибка при загрузке продуктов')
}
}