Правки
This commit is contained in:
DyCTaTOR
parent
3a3b1e6bde
commit
8d8129715b
@ -1,25 +0,0 @@
|
||||
#banner {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner img.banner-show {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner-hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import './Banner.css';
|
||||
import useBannerHook from './BannerHook';
|
||||
|
||||
const Banner = () => {
|
||||
const { banners, getBannerClass } = useBannerHook();
|
||||
|
||||
return (
|
||||
<div id='banner'>
|
||||
{
|
||||
banners.map((banner, index) =>
|
||||
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
@ -1,36 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import banner1 from '../../assets/banner1.png';
|
||||
import banner2 from '../../assets/banner2.png';
|
||||
import banner3 from '../../assets/banner3.png';
|
||||
|
||||
const useBannerHook = () => {
|
||||
const [currentBanner, setCurrentBanner] = useState(0);
|
||||
const banners = [banner1, banner2, banner3];
|
||||
|
||||
const getBannerClass = (index) => {
|
||||
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const bannerInterval = setInterval(
|
||||
() => {
|
||||
console.info('Banner changed');
|
||||
let current = currentBanner + 1;
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
setCurrentBanner(current);
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return () => clearInterval(bannerInterval);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return {
|
||||
banners,
|
||||
getBannerClass,
|
||||
};
|
||||
};
|
||||
|
||||
export default useBannerHook;
|
||||
@ -1,8 +0,0 @@
|
||||
.cart-image {
|
||||
width: 3.1rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
height: auto;
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
import { Button, ButtonGroup, Card } from 'react-bootstrap';
|
||||
import { DashLg, PlusLg, XLg } from 'react-bootstrap-icons';
|
||||
import imgPlaceholder from '../../assets/200.png';
|
||||
import './Cart.css';
|
||||
import useCart from './CartHook';
|
||||
|
||||
const Cart = () => {
|
||||
const {
|
||||
cart,
|
||||
getCartSum,
|
||||
addToCart,
|
||||
removeFromCart,
|
||||
clearCart,
|
||||
} = useCart();
|
||||
|
||||
return (
|
||||
<div className='d-flex flex-column align-items-center'>
|
||||
<div className='mb-2 col-12 col-md-8 col-lg-6 d-flex align-items-center'>
|
||||
<strong className='flex-fill'>Корзина</strong>
|
||||
<Button variant='danger' onClick={() => clearCart()}>
|
||||
<XLg /> Очистить
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
cart.map((cartItem) =>
|
||||
<Card key={cartItem.id} className='mb-2 col-12 col-md-8 col-lg-6'>
|
||||
<Card.Body className='p-2 d-flex flex-column flex-sm-row align-items-center'>
|
||||
<div className='cart-item flex-fill'>
|
||||
<img className='cart-image' src={cartItem.image || imgPlaceholder} alt="Cart Image" />
|
||||
{cartItem.type.name}
|
||||
</div>
|
||||
<div className='cart-item mt-2 mt-sm-0 d-flex flex-column align-items-center align-items-sm-end'>
|
||||
<div>
|
||||
{cartItem.price}
|
||||
{' * '}
|
||||
{cartItem.count}
|
||||
{' = '}
|
||||
{parseFloat(cartItem.price * cartItem.count).toFixed(2)}
|
||||
</div>
|
||||
<ButtonGroup className='mt-2 mt-sm-1' aria-label="Cart counter">
|
||||
<Button variant="primary" onClick={() => addToCart(cartItem)}>
|
||||
<PlusLg />
|
||||
</Button>
|
||||
<Button variant="danger" onClick={() => removeFromCart(cartItem)}>
|
||||
<DashLg />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>)
|
||||
}
|
||||
<div className='mb-2 col-12 col-md-8 col-lg-6 d-flex justify-content-end'>
|
||||
<strong>Итого: {getCartSum()} ₽</strong>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cart;
|
||||
@ -1,29 +0,0 @@
|
||||
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;
|
||||
@ -1,26 +0,0 @@
|
||||
import { useContext } from 'react';
|
||||
import CartContext from './CartContext.jsx';
|
||||
import { cartAdd, cartClear, cartRemove } 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);
|
||||
};
|
||||
|
||||
return {
|
||||
cart,
|
||||
getCartSum: () => cartSum(),
|
||||
addToCart: (item) => dispatch(cartAdd(item)),
|
||||
removeFromCart: (item) => dispatch(cartRemove(item)),
|
||||
clearCart: () => dispatch(cartClear()),
|
||||
};
|
||||
};
|
||||
|
||||
export default useCart;
|
||||
@ -1,71 +0,0 @@
|
||||
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,
|
||||
});
|
||||
@ -1,29 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Select = ({
|
||||
values, name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label className='form-label'>{label}</Form.Label>
|
||||
<Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
|
||||
<option value=''>Выберите значение</option>
|
||||
{
|
||||
values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
|
||||
}
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
Select.propTypes = {
|
||||
values: PropTypes.array,
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Select;
|
||||
Loading…
Reference in New Issue
Block a user