lab5
This commit is contained in:
parent
01d861dee9
commit
44d5099d9d
@ -1,29 +0,0 @@
|
|||||||
import { createContext, useEffect, useReducer } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { cartReducer, loadCart, saveCart } from './UsersReducer';
|
|
||||||
|
|
||||||
// Компонент контекста корзины
|
|
||||||
const CartContext = createContext(null);
|
|
||||||
// Провайдер контекста корзины
|
|
||||||
export const CartProvider = ({ children }) => {
|
|
||||||
|
|
||||||
const [cart, dispatch] = useReducer(cartReducer, [], loadCart);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
saveCart(cart || []);
|
|
||||||
}, [cart]);
|
|
||||||
|
|
||||||
const cartContextValue = { cart, dispatch };
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CartContext.Provider value={cartContextValue}>
|
|
||||||
{children}
|
|
||||||
</CartContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
CartProvider.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CartContext;
|
|
@ -1,27 +0,0 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import CartContext from './CartContext.jsx';
|
|
||||||
import { cartAdd, cartClear, cartRemove } from './UsersReducer.js';
|
|
||||||
|
|
||||||
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,70 +0,0 @@
|
|||||||
const addToUsersList = (usersList, item) => {
|
|
||||||
const existsItem = usersList.find((usersItem) => usersItem.id === item.id);
|
|
||||||
if (existsItem !== undefined) {
|
|
||||||
throw new Error('Пользователь уже существует!');
|
|
||||||
}
|
|
||||||
return [...usersList, { ...item, count: 1 }];
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeFromUsersList = (usersList, item) => {
|
|
||||||
const updatedList = usersList.filter((usersItem) => usersItem.id !== item.id);
|
|
||||||
return updatedList;
|
|
||||||
};
|
|
||||||
|
|
||||||
const USERSLIST_KEY = 'localUsersList';
|
|
||||||
const USERSLIST_ADD = 'usersList/add';
|
|
||||||
const USERSLIST_REMOVE = 'usersList/remove';
|
|
||||||
const USER_LOGIN = 'user/login';
|
|
||||||
const USER_LOGOUT = 'user/logout';
|
|
||||||
|
|
||||||
export const saveUsersList = (usersList) => {
|
|
||||||
localStorage.setItem(USERSLIST_KEY, JSON.stringify(usersList));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Функция для загрузки данных пользователей из LocalStorage
|
|
||||||
export const loadUsersList = (initialValue = []) => {
|
|
||||||
const listData = localStorage.getItem(USERSLIST_KEY);
|
|
||||||
if (listData) {
|
|
||||||
return JSON.parse(listData);
|
|
||||||
}
|
|
||||||
return initialValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Редюсер для обработки действий с массивом пользователей
|
|
||||||
export const cartReducer = (usersList, action) => {
|
|
||||||
const { item } = action;
|
|
||||||
switch (action.type) {
|
|
||||||
case USER_LOGOUT: {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
case USER_LOGIN: {
|
|
||||||
return action.user;
|
|
||||||
}
|
|
||||||
case USERSLIST_ADD: {
|
|
||||||
return addToUsersList(usersList, item);
|
|
||||||
}
|
|
||||||
case USERSLIST_REMOVE: {
|
|
||||||
return removeFromUsersList(usersList, item);
|
|
||||||
}
|
|
||||||
default: {
|
|
||||||
throw Error(`Unknown action: ${action.type}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const userLogout = () => ({
|
|
||||||
type: USER_LOGOUT,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const userLogin = (user) => ({
|
|
||||||
type: USER_LOGIN,
|
|
||||||
user,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const usersAdd = (item) => ({
|
|
||||||
type: USERSLIST_ADD, item,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const usersRemove = (item) => ({
|
|
||||||
type: USERSLIST_REMOVE, item,
|
|
||||||
});
|
|
@ -69,7 +69,7 @@ const Cart = () => {
|
|||||||
<main className="container-fluid justify-content-center px-lg-3">
|
<main className="container-fluid justify-content-center px-lg-3">
|
||||||
<div className='row'>
|
<div className='row'>
|
||||||
<div className='col-lg-8'>
|
<div className='col-lg-8'>
|
||||||
<div className='mb-2 mt-2 d-flex align-items-center'>
|
<div className='mb-2 mt-2 d-flex align-items-center col-lg-3'>
|
||||||
<strong className='flex-fill' style={{color: 'white'}}>Корзина</strong>
|
<strong className='flex-fill' style={{color: 'white'}}>Корзина</strong>
|
||||||
<div className='button-overlayAdd'>
|
<div className='button-overlayAdd'>
|
||||||
<Button onClick={() => clearCart()}>
|
<Button onClick={() => clearCart()}>
|
||||||
|
Loading…
Reference in New Issue
Block a user