refactor: remove zustand. (#30)

zeekrey · Oct 15, 2021 · 933dcb9 · 933dcb9 · vercel · Oct 15, 2021
1 parent 09187d6
commit 933dcb9
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 232 deletions.
diff --git a/__tests__/unit/cart.test.tsx b/__tests__/unit/cart.test.tsx
@@ -17,7 +17,7 @@ import CartPage, { getStaticProps } from "../../pages/cart";
 import { Tmeta } from "../../types";
 
 import { PrismaClient, Prisma } from "@prisma/client";
-import { useCartStore } from "../../lib/cart";
+import { useCart, CartProvider } from "../../lib/cart";
 
 const prisma = new PrismaClient();
 
@@ -26,11 +26,14 @@ let product: null | Required<Prisma.ProductUncheckedCreateInput>;
 const TestWrapper: React.FunctionComponent<{
   product: Required<Prisma.ProductUncheckedCreateInput>;
 }> = ({ children, product }) => {
-  const { cart, addItem } = useCartStore();
+  const { cart, dispatch } = useCart();
 
   React.useEffect(() => {
-    addItem({ ...product, images: [] }, cart);
-  }, [product, cart, addItem]);
+    dispatch({
+      type: "addItem",
+      item: { product: product, images: [], count: 1 },
+    });
+  }, []);
 
   return <>{children}</>;
 };
@@ -75,16 +78,16 @@ describe("Test cart", () => {
     };
 
     const { queryByText } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+      <TestWrapper {...props} product={product!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper {...props} product={product!}></TestWrapper>
-        ),
+        wrapper: (props) => <CartProvider {...props} />,
       }
     );
 
@@ -106,23 +109,23 @@ describe("Test cart", () => {
     };
 
     const { getByText, getByTestId } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+      <TestWrapper {...props} product={product!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper {...props} product={product!}></TestWrapper>
-        ),
+        wrapper: (props) => <CartProvider {...props} />,
       }
     );
 
     fireEvent.click(getByText("+"));
 
     const productCount = getByTestId("productCount");
-    expect(productCount.textContent).toEqual("3");
+    expect(productCount.textContent).toEqual("2");
   });
 
   it("should remove a product of same type (count--)", async () => {
@@ -139,16 +142,16 @@ describe("Test cart", () => {
     };
 
     const { getByText, queryByText } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+      <TestWrapper {...props} product={product!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper {...props} product={product!}></TestWrapper>
-        ),
+        wrapper: (props) => <CartProvider {...props} />,
       }
     );
 

diff --git a/__tests__/unit/shipping.test.tsx b/__tests__/unit/shipping.test.tsx
@@ -17,7 +17,7 @@ import CartPage, { getStaticProps } from "../../pages/cart";
 import { Tmeta } from "../../types";
 
 import { PrismaClient, Prisma } from "@prisma/client";
-import { useCartStore } from "../../lib/cart";
+import { useCart, CartProvider } from "../../lib/cart";
 
 const prisma = new PrismaClient();
 
@@ -29,13 +29,16 @@ let products: Map<
 const TestWrapper: React.FunctionComponent<{
   product: Required<Prisma.ProductUncheckedCreateInput>;
 }> = ({ children, product }) => {
-  const { cart, addItem } = useCartStore();
+  const { cart, dispatch } = useCart();
 
   React.useEffect(() => {
-    addItem({ ...product, images: [] }, cart);
-  }, [product, cart, addItem]);
+    dispatch({
+      type: "addItem",
+      item: { product: product, images: [], count: 1 },
+    });
+  }, []);
 
-  return <>{children}</>;
+  return <section>{children}</section>;
 };
 
 beforeAll(() => {
@@ -114,19 +117,16 @@ describe("Test shipping methods", () => {
     };
 
     const { queryByText } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+      <TestWrapper product={products.get("productWithoutShipping")!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper
-            {...props}
-            product={products.get("productWithoutShipping")!}
-          ></TestWrapper>
-        ),
+        wrapper: CartProvider,
       }
     );
 
@@ -149,19 +149,16 @@ describe("Test shipping methods", () => {
     };
 
     const { queryAllByText } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+      <TestWrapper product={products.get("productHasFreeShipping")!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper
-            {...props}
-            product={products.get("productHasFreeShipping")!}
-          ></TestWrapper>
-        ),
+        wrapper: (props) => <CartProvider {...props} />,
       }
     );
 
@@ -182,25 +179,21 @@ describe("Test shipping methods", () => {
       };
     };
 
-    const { queryByText } = render(
-      <CartPage
-        {...(props as unknown as {
-          meta: Tmeta;
-          shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
-        })}
-      />,
+    const { queryByText, debug } = render(
+      <TestWrapper product={products.get("productWithShipping")!}>
+        <CartPage
+          {...(props as unknown as {
+            meta: Tmeta;
+            shippingOptions: Required<Prisma.ShippingCodeUncheckedCreateInput>[];
+          })}
+        />
+      </TestWrapper>,
       {
-        wrapper: (props) => (
-          <TestWrapper
-            {...props}
-            product={products.get("productWithShipping")!}
-          ></TestWrapper>
-        ),
+        wrapper: (props) => <CartProvider {...props} />,
       }
     );
 
     const shippingOption = queryByText("Free Shipping");
-
     expect(shippingOption).toBeInTheDocument();
   });
 });
diff --git a/components/MenuBar.tsx b/components/MenuBar.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { styled, keyframes, Box } from "../stitches.config";
-import { useCartStore } from "../lib/cart";
+import { useCart } from "../lib/cart";
 import {
   HomeIcon,
   ArchiveIcon,
@@ -133,28 +133,10 @@ const Label = styled("label", {
 });
 
 const MenuBar: React.FunctionComponent = () => {
-  const { cart } = useCartStore();
+  const { cart } = useCart();
   const { theme, setTheme } = useTheme();
   const [animate, setAnimate] = useState(false);
 
-  const isInitialRender = useRef(true);
-
-  useEffect(() => {
-    useCartStore.subscribe(
-      () => {
-        // Don't animate on first render.
-        if (isInitialRender.current) {
-          isInitialRender.current = false;
-          return;
-        }
-        setAnimate(true);
-      },
-      (state) => [state.cart, state.cart]
-    );
-
-    return () => useCartStore.destroy();
-  }, []);
-
   return (
     <Wrapper>
       <Popover.Root>
@@ -173,7 +155,7 @@ const MenuBar: React.FunctionComponent = () => {
                       animate={animate}
                       onAnimationEnd={() => setAnimate(false)}
                     >
-                      {cart.size}
+                      {cart.length}
                     </CartSizeIcon>
                   )}
                   <ArchiveIcon />

diff --git a/components/ProductCardCart.tsx b/components/ProductCardCart.tsx
@@ -2,10 +2,13 @@ import Link from "next/link";
 import Image from "next/image";
 import { styled, Box } from "../stitches.config";
 import { Prisma } from "@prisma/client";
-import { useCartStore } from "../lib/cart";
+import { useCart } from "../lib/cart";
 import { currencyCodeToSymbol } from "../lib/stripeHelpers";
 import PlaceholderImage from "../public/placeholder.png";
 
+import type { CartItem } from "../lib/cart";
+import { useEffect, useState, useCallback } from "react";
+
 const Wrapper = styled("div", {
   boxShadow:
     "0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)",
@@ -65,33 +68,40 @@ const ImageContainer = styled("a", {
 });
 
 const ProductCardCart: React.FunctionComponent<{
-  product: Required<Prisma.ProductUncheckedCreateInput> & {
-    count?: number;
-    images: { path: string; blurDataURL: string }[];
-  };
-}> = ({ product }) => {
-  const { cart, addItem, removeItem } = useCartStore();
+  item: CartItem;
+  cart: CartItem[];
+}> = ({ item }) => {
+  const { cart, dispatch } = useCart();
+  const { product, images } = item;
+
+  const count = cart.find((p) => p.product.id === item.product.id)?.count ?? 0;
 
   const handleAddItem = () => {
-    addItem(product, cart);
+    dispatch({
+      type: "addItem",
+      item: { product: product, images: [...(images ?? [])], count: 1 },
+    });
   };
 
   const handleRemoveItem = () => {
-    removeItem(product, cart);
+    dispatch({
+      type: "removeItem",
+      item: { product: product, images: [...(images ?? [])], count: 1 },
+    });
   };
   return (
     <Wrapper>
       <Box css={{ display: "flex", flex: 1 }}>
         <Link href={`/products/${product.slug}`} passHref>
           <ImageContainer>
-            {product.images.length ? (
+            {images?.length ? (
               <Image
-                src={product.images[0].path}
+                src={images[0].path}
                 layout="fill"
                 objectFit="cover"
-                alt={product.images[0].path}
+                alt={images[0].path}
                 placeholder="blur"
-                blurDataURL={product.images[0].blurDataURL}
+                blurDataURL={images[0].blurDataURL}
               />
             ) : (
               <Image
@@ -129,7 +139,9 @@ const ProductCardCart: React.FunctionComponent<{
             }}
           >
             <CountButton onClick={handleAddItem}>+</CountButton>
-            <Box css={{ textAlign: "center" }} data-testid="productCount">{product.count}</Box>
+            <Box css={{ textAlign: "center" }} data-testid="productCount">
+              {count}
+            </Box>
             <CountButton onClick={handleRemoveItem}>-</CountButton>
           </Box>
         </Box>