Merge pull request #33 from CalcagnoLoic/develop

Adding HOC for basket
CalcagnoLoic · Jan 25, 2024 · a883d96 · a883d96
2 parents 053deda + 41db353
commit a883d96
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 153 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-# e-commerce
+# Sneakers Company E-Commerce
 
-![](public/assets/img/readme.jpg)
+![](public/assets/img/readme.png)
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Building ecommerce" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ecommerce | sneakers</title>
+    <title>Sneakers Company</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/assets/img/readme.jpg b/public/assets/img/readme.jpg
diff --git a/public/assets/img/readme.png b/public/assets/img/readme.png
diff --git a/src/Pages/ProductPage/index.tsx b/src/Pages/ProductPage/index.tsx
@@ -1,7 +1,6 @@
 import { description } from "../../data";
 
-import Button from "../../components/Button";
-import Counter from "../../components/Counter";
+import AddToCart from "../../container/AddToCart";
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 import MainContentLayout from "../../layouts/MainContentLayout";
@@ -12,7 +11,7 @@ import Heading from "../../typographies/Heading";
 import Paragraph from "../../typographies/Paragraph";
 import ProductLayout from "../../layouts/ProductLayout";
 
-function Page() {
+const Page = () => {
   return (
     <div className="md:mx-32 lg:mx-24 xl:mx-40">
       <Header />
@@ -48,10 +47,7 @@ function Page() {
               <ProductPrice isOnSale={true} price={"$250.00"} />
             </div>
 
-            <div className="mt-8 flex flex-col lg:flex-row">
-              <Counter />
-              <Button />
-            </div>
+            <AddToCart />
           </div>
         </ProductLayout>
       </MainContentLayout>

diff --git a/src/components/Button/index.mdx b/src/components/Button/index.mdx
@@ -6,6 +6,8 @@ import * as ButtonStories from './index.stories';
 
 # Button
 
-A button is a component that can be clicked to add one or more product into basket
+A button is a component that can be clicked to make or not an action.
 
-<Canvas of={ButtonStories.Default} />
+<Canvas of={ButtonStories.AddToCart} />
+
+<Canvas of={ButtonStories.Checkout} />
diff --git a/src/components/Button/index.stories.ts b/src/components/Button/index.stories.ts
diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import BasketIcons from "../../Icons/BasketIcons";
+import Button from "./index";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AddToCart: Story = {
+  args: {
+    onClick: () => {},
+    content: "Add To Cart",
+    icon: <BasketIcons color="light" css="icon-to-cart mr-5" />,
+    css: "button-wrapper",
+  },
+};
+
+export const Checkout: Story = {
+  args: {
+    content: "Checkout",
+    css: "button-basket",
+  },
+};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,15 +1,26 @@
-import { useBasketContext } from "../../hooks/useBasketContext";
-
-import BasketIcons from "../../Icons/BasketIcons";
 import Paragraph from "../../typographies/Paragraph";
 
-const Component = () => {
-  const { copyQuantity } = useBasketContext();
+interface ButtonType {
+  onClick?: () => void;
+  content: string;
+  icon?: React.ReactNode;
+  css: string;
+}
+
+const Component = ({ onClick, content, icon, css }: ButtonType) => {
+  if (onClick) {
+    return (
+      <div className={css} onClick={() => onClick()}>
+        {icon}
+        <Paragraph kind="span" content={content} css="button-text" />
+      </div>
+    );
+  }
 
   return (
-    <div className="button-wrapper" onClick={() => copyQuantity()}>
-      <BasketIcons color="light" css="icon-to-cart mr-5" />
-      <Paragraph kind="span" content="Add to Cart" css="button-text" />
+    <div className={css}>
+      {icon}
+      <Paragraph kind="span" content={content} css="button-text" />
     </div>
   );
 };

diff --git a/src/components/Counter/index.stories.ts b/src/components/Counter/index.stories.ts
@@ -10,4 +10,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    onClick: () => {},
+    quantity: 0,
+  },
+};
diff --git a/src/components/Counter/index.tsx b/src/components/Counter/index.tsx
@@ -1,26 +1,27 @@
-import { useBasketContext } from "../../hooks/useBasketContext";
-
 import Paragraph from "../../typographies/Paragraph";
 import QuantityIcons from "../../Icons/QuantityIcons";
 
-const Component = () => {
-  const { counter, addItemToBasket, removeItemToBasket } = useBasketContext();
+interface CounterType {
+  onClick: (newValue: string) => void;
+  quantity: number;
+}
 
+const Component = ({ onClick, quantity }: CounterType) => {
   return (
     <div className="counter-wrapper">
       <button
         onClick={() => {
-          removeItemToBasket();
+          onClick("sub");
         }}
       >
         <QuantityIcons kind="minus" />
       </button>
 
-      <Paragraph kind="span" content={counter} css="px-3" />
+      <Paragraph kind="span" content={quantity} css="px-3" />
 
       <button
         onClick={() => {
-          addItemToBasket();
+          onClick("add");
         }}
       >
         <QuantityIcons kind="plus" />

diff --git a/src/components/Dropdown/BasketDropdown/BasketContent/index.tsx b/src/components/Dropdown/BasketDropdown/BasketContent/index.tsx
@@ -4,6 +4,7 @@ import DeleteIcon from "../../../../Icons/DeleteIcon";
 import Heading from "../../../../typographies/Heading";
 import Paragraph from "../../../../typographies/Paragraph";
 import PRODUCT_THUMBNAIL from "/assets/img/product-1-thumbnail.jpg";
+import Button from "../../../Button";
 
 const Component = () => {
   const { quantity, removeToBasket } = useBasketContext();
@@ -37,7 +38,7 @@ const Component = () => {
         <DeleteIcon handleClick={() => removeToBasket()} />
       </div>
 
-      <button className="button-basket">Checkout</button>
+      <Button content="Checkout" css="button-basket" />
     </>
   );
 };

diff --git a/src/components/Dropdown/BasketDropdown/index.spec.tsx b/src/components/Dropdown/BasketDropdown/index.spec.tsx
@@ -1,10 +1,10 @@
 import { BasketProvider } from "../../../context/Basket/BasketContext";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { vi } from "vitest";
 
 import BasketDropdown from "./index";
 import "@testing-library/jest-dom";
-import Counter from "../../../components/Counter";
+//import Counter from "../../../components/Counter";
 import userEvent from "@testing-library/user-event";
 
 describe("Basket Dropdown Suite Test", () => {

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -13,7 +13,7 @@ const Component = () => (
             target="_blank"
             className="ml-1"
           >
-            @CalcagnoLoic
+            @CalcagnoLoic 🎉
           </a>
         </>
       }

diff --git a/src/container/AddToCart/index.tsx b/src/container/AddToCart/index.tsx
@@ -0,0 +1,39 @@
+import { useBasketContext } from "../../hooks/useBasketContext";
+import { useState } from "react";
+
+import BasketIcons from "../../Icons/BasketIcons";
+import Button from "../../components/Button";
+import Counter from "../../components/Counter";
+
+const Component = () => {
+  const [quantity, setQuantity] = useState<number>(0);
+  const { addToCart } = useBasketContext();
+
+  const handleCounter = (kind: string) => {
+    if (kind === "add") {
+      setQuantity(quantity + 1);
+    } else {
+      setQuantity(quantity - 1);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (quantity >= 0) {
+      addToCart(quantity);
+    }
+  };
+
+  return (
+    <div className="mt-8 flex flex-col lg:flex-row">
+      <Counter onClick={handleCounter} quantity={quantity} />
+      <Button
+        onClick={handleSubmit}
+        content="Add To Cart"
+        icon={<BasketIcons color="light" css="icon-to-cart mr-5" />}
+        css="button-wrapper"
+      />
+    </div>
+  );
+};
+
+export default Component;
diff --git a/src/context/Basket/BasketContext.tsx b/src/context/Basket/BasketContext.tsx
@@ -2,19 +2,15 @@ import { createContext, Context, useState } from "react";
 
 interface BasketContext {
   quantity: number;
-  counter: number;
-  addItemToBasket: () => void;
-  removeItemToBasket: () => void;
-  copyQuantity: () => void;
+  addToCart: (quantity: number) => void;
   removeToBasket: () => void;
 }
 
 export const BasketContext: Context<BasketContext> = createContext({
   quantity: 0,
-  counter: 0,
-  addItemToBasket: () => {},
-  removeItemToBasket: () => {},
-  copyQuantity: () => {},
+  addToCart: (quantity) => {
+    console.log(quantity);
+  },
   removeToBasket: () => {},
 });
 
@@ -24,21 +20,9 @@ export const BasketProvider = ({
   children: JSX.Element | JSX.Element[];
 }) => {
   const [quantity, setQuantity] = useState<number>(0);
-  const [counter, setCounter] = useState<number>(0);
 
-  const addItemToBasket = () => {
-    setCounter((prevCounter) => prevCounter + 1);
-  };
-
-  const removeItemToBasket = () => {
-    if (counter > 0) {
-      setCounter((prevCounter) => prevCounter - 1);
-    }
-  };
-
-  const copyQuantity = () => {
-    setQuantity(counter);
-    setCounter(0);
+  const addToCart = (quantity: number) => {
+    setQuantity(quantity);
   };
 
   const removeToBasket = () => {
@@ -47,10 +31,7 @@ export const BasketProvider = ({
 
   const ContextValue: BasketContext = {
     quantity,
-    counter,
-    addItemToBasket,
-    removeItemToBasket,
-    copyQuantity,
+    addToCart,
     removeToBasket,
   };