You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

cart-context.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import { createContext, useContext, useState } from 'react';
  2. import { getStorage, setStorage } from '../utils/helpers/storage';
  3. const StorageContext = createContext({
  4. cartStorage: [],
  5. totalPrice: 0,
  6. totalQuantity: 0,
  7. });
  8. const StorageDispatchContext = createContext({
  9. addCartValue: (product, quantity) => {},
  10. clearCart: () => {},
  11. removeCartValue: (productId) => {},
  12. setCartStorage: (cart) => {},
  13. updateItemQuantity: (productId, quantity) => {},
  14. });
  15. export const useStore = () => {
  16. return useContext(StorageContext);
  17. };
  18. export const useStoreUpdate = () => {
  19. return useContext(StorageDispatchContext);
  20. };
  21. const useStorage = () => {
  22. const CART_KEY = 'cart-products';
  23. const [cartStorage, setCartStorage] = useState(getStorage(CART_KEY));
  24. const [totalPrice, setTotalPrice] = useState(() => {
  25. const cart = getStorage(CART_KEY);
  26. if (cart && cart.length) {
  27. return cart
  28. .map((entry) => entry?.product.price * entry?.quantity)
  29. .reduce((accum, curValue) => accum + curValue);
  30. } else {
  31. return 0;
  32. }
  33. });
  34. const [totalQuantity, setTotalQuantity] = useState(() => {
  35. const cart = getStorage(CART_KEY);
  36. if (cart && cart.length) {
  37. return cart.length;
  38. } else {
  39. return 0;
  40. }
  41. });
  42. const addCartValue = (product, quantity) => {
  43. const items = getStorage(CART_KEY);
  44. if (!items) {
  45. setStorage(CART_KEY, [{ product, quantity }]);
  46. } else {
  47. const isItemDuplicate = items.some(
  48. (item) => item.product.customID === product.customID
  49. );
  50. if (!isItemDuplicate) {
  51. items.push({ product, quantity });
  52. setTotalQuantity((prevState) => prevState + 1);
  53. setStorage(CART_KEY, items);
  54. } else {
  55. return;
  56. }
  57. }
  58. const newTotalPrice = items
  59. .map((entry) => entry?.product.price * entry?.quantity)
  60. .reduce((accum, curValue) => accum + curValue);
  61. setTotalPrice(newTotalPrice);
  62. setCartStorage(items);
  63. };
  64. const updateItemQuantity = (productId, quantity) => {
  65. if (quantity < 0) return;
  66. const items = getStorage(CART_KEY);
  67. let updatedItems = items;
  68. if (items) {
  69. updatedItems = items.map((entry) => {
  70. if (entry?.product.customID === productId) {
  71. console.log('true');
  72. entry.quantity = quantity;
  73. }
  74. return entry;
  75. });
  76. setStorage(CART_KEY, updatedItems);
  77. }
  78. const newTotalPrice = updatedItems
  79. .map((entry) => entry?.product.price * entry?.quantity)
  80. .reduce((accum, curValue) => accum + curValue);
  81. setTotalPrice(newTotalPrice);
  82. setCartStorage(updatedItems);
  83. };
  84. const clearCart = () => {
  85. setStorage(CART_KEY, []);
  86. setTotalQuantity(0);
  87. setTotalPrice(0);
  88. setCartStorage([]);
  89. };
  90. const removeCartValue = (productId) => {
  91. const items = getStorage(CART_KEY);
  92. const newStorage = items?.filter(
  93. (item) => item.product.customID !== productId
  94. );
  95. if (newStorage.length === 0) {
  96. setTotalPrice(0);
  97. } else {
  98. const newTotalPrice = newStorage
  99. .map((entry) => entry?.product.price * entry?.quantity)
  100. .reduce((accum, curValue) => accum + curValue);
  101. setTotalPrice(newTotalPrice);
  102. }
  103. setTotalQuantity((prevState) => prevState - 1);
  104. setStorage(CART_KEY, newStorage);
  105. setCartStorage(newStorage);
  106. };
  107. return {
  108. addCartValue,
  109. cartStorage,
  110. totalPrice,
  111. totalQuantity,
  112. clearCart,
  113. removeCartValue,
  114. setCartStorage,
  115. updateItemQuantity,
  116. };
  117. };
  118. const StorageProvider = ({ children }) => {
  119. const {
  120. cartStorage,
  121. totalPrice,
  122. totalQuantity,
  123. addCartValue,
  124. clearCart,
  125. setCartStorage,
  126. removeCartValue,
  127. updateItemQuantity,
  128. } = useStorage();
  129. return (
  130. <StorageContext.Provider value={{ cartStorage, totalPrice, totalQuantity }}>
  131. <StorageDispatchContext.Provider
  132. value={{
  133. addCartValue,
  134. clearCart,
  135. removeCartValue,
  136. setCartStorage,
  137. updateItemQuantity,
  138. }}
  139. >
  140. {children}
  141. </StorageDispatchContext.Provider>
  142. </StorageContext.Provider>
  143. );
  144. };
  145. export default StorageProvider;