refactor: expose useShoppingCart

Author: anton-karlovskiy

code/10 Advanced State Management with Context useReducer/09-dispatching-actions-finished/src/App.jsx

@@ -2,7 +2,7 @@ import Header from './components/Header.jsx';
 import Shop from './components/Shop.jsx';
 import Product from './components/Product.jsx';
 import { DUMMY_PRODUCTS } from './dummy-products.js';
-import ShoppingCartProvider from './store/shopping-cart-context.jsx';
+import { ShoppingCartProvider } from './store/shopping-cart-context.jsx';
 
 function App() {
   return (

code/10 Advanced State Management with Context useReducer/09-dispatching-actions-finished/src/components/Cart.jsx

@@ -1,9 +1,7 @@
-import { useContext } from 'react';
-
-import { ShoppingCartContext } from '../store/shopping-cart-context.jsx';
+import { useShoppingCart } from '../store/shopping-cart-context.jsx';
 
 export default function Cart() {
-  const { state: { items }, dispatch } = useContext(ShoppingCartContext);
+  const { state: { items }, dispatch } = useShoppingCart();
 
   const totalPrice = items.reduce(
     (acc, item) => acc + item.price * item.quantity,

code/10 Advanced State Management with Context useReducer/09-dispatching-actions-finished/src/components/Header.jsx

@@ -1,11 +1,11 @@
-import { useRef, useContext } from 'react';
+import { useRef } from 'react';
 
 import CartModal from './CartModal.jsx';
-import { ShoppingCartContext } from '../store/shopping-cart-context.jsx';
+import { useShoppingCart } from '../store/shopping-cart-context.jsx';
 
 export default function Header() {
   const modal = useRef();
-  const { state: { items } } = useContext(ShoppingCartContext);
+  const { state: { items } } = useShoppingCart();
 
   const cartQuantity = items.length;
 

code/10 Advanced State Management with Context useReducer/09-dispatching-actions-finished/src/components/Product.jsx

@@ -1,9 +1,7 @@
-import { useContext } from 'react';
-
-import { ShoppingCartContext } from '../store/shopping-cart-context.jsx';
+import { useShoppingCart } from '../store/shopping-cart-context.jsx';
 
 export default function Product({ id, image, title, price, description }) {
-  const { shoppingCartDispatch } = useContext(ShoppingCartContext);
+  const { shoppingCartDispatch } = useShoppingCart();
 
   return (
     <article className="product">

code/10 Advanced State Management with Context useReducer/09-dispatching-actions-finished/src/store/shopping-cart-context.jsx

@@ -1,4 +1,4 @@
-import { createContext, useReducer } from 'react';
+import { createContext, useReducer, useContext } from 'react';
 
 import { DUMMY_PRODUCTS } from '../dummy-products.js';
 
@@ -67,7 +67,7 @@ function shoppingCartReducer(state, action) {
   }
 }
 
-export default function ShoppingCartProvider({ children }) {
+function ShoppingCartProvider({ children }) {
   const [state, dispatch] = useReducer(shoppingCartReducer, { items: [] }
   );
 
@@ -80,3 +80,13 @@ export default function ShoppingCartProvider({ children }) {
     <ShoppingCartContext.Provider value={value}>{children}</ShoppingCartContext.Provider>
   );
 }
+
+function useShoppingCart() {
+  const context = useContext(ShoppingCartContext);
+  if (!context) {
+    throw new Error('useShoppingCart must be used within a ShoppingCartProvider');
+  }
+  return context;
+}
+
+export { ShoppingCartProvider, useShoppingCart };