feat: add product list example

elasticpath · May 1, 2024 · a0b9286 · a0b9286
1 parent db65696
commit a0b9286
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 18 deletions.
diff --git a/packages/react-shopper-hooks/example/App.tsx b/packages/react-shopper-hooks/example/App.tsx
@@ -4,27 +4,48 @@ import CartExample from "./CartExample"
 import { CartProvider } from "../src/cart"
 import { gateway as EPCCGateway } from "@moltin/sdk"
 import { StoreProvider } from "../src/store"
+import { ElasticPathProvider } from "../src"
+import { QueryClient } from "@tanstack/react-query"
+import { ProductListExample } from "./ProductListExample"
+
+const client = EPCCGateway({
+  name: "my_store",
+  client_id: import.meta.env.VITE_APP_EPCC_CLIENT_ID,
+  client_secret: import.meta.env.VITE_APP_EPCC_CLIENT_SECRET,
+  host: import.meta.env.VITE_APP_EPCC_HOST,
+})
+
+const queryClient = new QueryClient()
 
 function App() {
-  const client = EPCCGateway({
-    name: "my_store",
-    client_id: import.meta.env.VITE_APP_EPCC_CLIENT_ID,
-    client_secret: import.meta.env.VITE_APP_EPCC_CLIENT_SECRET,
-    host: import.meta.env.VITE_APP_EPCC_HOST,
-  })
+  const [activeItem, setActiveItem] = React.useState<"cart" | "products">(
+    "cart",
+  )
 
   return (
     <div className="App">
       <h1>React Shopper Hooks</h1>
+      <div>
+        <button onClick={() => setActiveItem("cart")}>Cart View</button>
+        <button onClick={() => setActiveItem("products")}>Products View</button>
+      </div>
       <div className="card">
-        <StoreProvider cartId={client.Cart().cartId}>
-          <CartProvider cartId={client.Cart().cartId}>
-            <CartExample />
-          </CartProvider>
-        </StoreProvider>
+        <ElasticPathProvider
+          client={client}
+          queryClientProviderProps={{ client: queryClient }}
+        >
+          <StoreProvider cartId={client.Cart().cartId}>
+            <CartProvider cartId={client.Cart().cartId}>
+              {activeItem === "cart" && <CartExample />}
+              {activeItem === "products" && <ProductListExample />}
+            </CartProvider>
+          </StoreProvider>
+        </ElasticPathProvider>
       </div>
     </div>
   )
 }
 
+function TanstackWrapper() {}
+
 export default App
diff --git a/packages/react-shopper-hooks/example/CartExample.tsx b/packages/react-shopper-hooks/example/CartExample.tsx
@@ -1,16 +1,19 @@
 import React from "react"
-import { useCart } from "../src/cart"
+import { useCart, useCartAddBundleItem, useCartClear } from "../src/cart"
 
 export default function CartExample(): JSX.Element {
-  const { state, addBundleProductToCart, emptyCart } = useCart()
+  const { state } = useCart()
+  const { mutate: addBundleProductToCart } = useCartAddBundleItem()
+  const { mutate: emptyCart } = useCartClear()
   return (
     <>
       <button onClick={() => emptyCart()}>Empty Cart</button>
       <button
         onClick={() =>
-          addBundleProductToCart(
-            "14edd744-c615-4a33-a2c2-df999bbb5103",
-            {
+          addBundleProductToCart({
+            productId: "14edd744-c615-4a33-a2c2-df999bbb5103",
+            quantity: 1,
+            selectedOptions: {
               plants: {
                 "a158ffa0-5d16-4325-8dcc-be8acd55eecf": 1,
               },
@@ -21,8 +24,7 @@ export default function CartExample(): JSX.Element {
                 "7ffe107d-c5bd-4de4-b8f0-a58d90cb3cd3": 1,
               },
             },
-            1,
-          )
+          })
         }
       >
         Add bundle to cart

diff --git a/packages/react-shopper-hooks/example/ProductListExample.tsx b/packages/react-shopper-hooks/example/ProductListExample.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import { useProducts } from "../src"
+
+export function ProductListExample() {
+  const { data: products } = useProducts()
+  return (
+    <div>
+      <h1>Product List</h1>
+      {products?.data.map((product) => (
+        <div key={product.id}>
+          <h2>{product.attributes.name}</h2>
+          <p>{product.id}</p>
+        </div>
+      ))}
+    </div>
+  )
+}