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">
|
||||
<div className='row'>
|
||||
<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>
|
||||
<div className='button-overlayAdd'>
|
||||
<Button onClick={() => clearCart()}>
|
||||
|
Loading…
Reference in New Issue
Block a user