Component compound listo

package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/02-component-patters/components/ProductButtons.tsx

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import styles from "./../styles/styles.module.css";
+import { ProductContext } from "./ProductCard";
+
+const ProductButtons = () => {
+  const { increaseBy, counter } = useContext(ProductContext);
+
+  return (
+    <>
+      <div className={styles.buttonsContainer}>
+        <button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>
+          -
+        </button>
+        <div className={styles.countLabel}>{counter}</div>
+        <button className={styles.buttonAdd} onClick={() => increaseBy(+1)}>
+          +
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default ProductButtons;

src/02-component-patters/components/ProductCard.tsx

@@ -0,0 +1,25 @@
+import { createContext } from "react";
+
+import useProduct from "./../hooks/useProduct";
+import {
+  ProductContextProps,
+  ProductCardProps,
+} from "./../interfaces/interfaces";
+
+import styles from "./../styles/styles.module.css";
+
+export const ProductContext = createContext({} as ProductContextProps);
+
+const { Provider } = ProductContext;
+
+export const ProductCard = ({ product, children }: ProductCardProps) => {
+  const { increaseBy, counter } = useProduct();
+
+  return (
+    <Provider value={{ increaseBy, counter, product }}>
+      <div className={styles.productCard}>{children}</div>
+    </Provider>
+  );
+};
+
+export default ProductCard;

src/02-component-patters/components/ProductImage.tsx

@@ -0,0 +1,21 @@
+import styles from "./../styles/styles.module.css";
+import noImage from "./../assets/no-image.jpg";
+import { useContext } from "react";
+import { ProductContext } from "./ProductCard";
+
+const ProductImage = ({ img = "" }) => {
+  const { product } = useContext(ProductContext);
+  let showImage: string;
+
+  if (img) {
+    showImage = img;
+  } else if (product.img) {
+    showImage = product.img;
+  } else {
+    showImage = noImage;
+  }
+
+  return <img className={styles.productImg} src={showImage} alt="coffe Mug" />;
+};
+
+export default ProductImage;

src/02-component-patters/components/ProductTitle.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { ProductContext } from "./ProductCard";
+
+import styles from "./../styles/styles.module.css";
+
+const ProductTitle = ({ title }: { title?: string }) => {
+  const { product } = useContext(ProductContext);
+
+  return (
+    <span className={styles.productDescription}>
+      {title ? title : product.title}
+    </span>
+  );
+};
+
+export default ProductTitle;

src/02-component-patters/components/index.ts

@@ -0,0 +1,16 @@
+import { ProductCard as ProductCardHOC } from "./ProductCard";
+
+import ProductTitle from "./ProductTitle";
+import ProductImage from "./ProductImage";
+import ProductButtons from "./ProductButtons";
+import { ProductCardHOCProps } from "../interfaces/interfaces";
+
+export const ProductCard: ProductCardHOCProps = Object.assign(ProductCardHOC, {
+  Title: ProductTitle,
+  Image: ProductImage,
+  Buttons: ProductButtons,
+});
+
+export default ProductCard;
+
+export { ProductTitle, ProductImage, ProductButtons };

src/02-component-patters/hooks/useProduct.tsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+const useProduct = () => {
+  const [counter, setCounter] = useState(0);
+
+  const increaseBy = (value: number) => {
+    setCounter((next) => Math.max(next + value, 0));
+  };
+
+  return { increaseBy, counter };
+};
+
+export default useProduct;

src/02-component-patters/interfaces/interfaces.ts

@@ -0,0 +1,23 @@
+export interface ProductCardProps {
+  product: Product;
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  img?: string;
+}
+
+export interface ProductContextProps {
+  counter: number;
+  increaseBy: (value: number) => void;
+  product: Product;
+}
+
+export interface ProductCardHOCProps {
+  ({ product, children }: ProductCardProps): JSX.Element;
+  Title: ({ title }: { title?: string | undefined }) => JSX.Element;
+  Image: ({ img }: { img?: string | undefined }) => JSX.Element;
+  Buttons: () => JSX.Element;
+}

src/02-component-patters/pages/ShoppingPage.tsx

@@ -0,0 +1,37 @@
+import { ProductCard } from "./../components/index";
+import { ProductImage, ProductButtons, ProductTitle } from "./../components";
+
+const products = {
+  id: "1",
+  title: "Coffee Mug",
+};
+
+const ShoppingPage = () => {
+  return (
+    <div>
+      <h1>Shopping Page</h1>
+      <hr />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "wrap",
+        }}
+      >
+        <ProductCard product={products}>
+          <ProductCard.Image />
+          <ProductCard.Title title="Coffe Mug" />
+          <ProductCard.Buttons />
+        </ProductCard>
+
+        <ProductCard product={products}>
+          <ProductImage />
+          <ProductTitle title="Coffe Mug" />
+          <ProductButtons />
+        </ProductCard>
+      </div>
+    </div>
+  );
+};
+
+export default ShoppingPage;

src/02-component-patters/styles/styles.module.css

@@ -0,0 +1,62 @@
+
+
+.productCard {
+    background-color: white;
+    border-radius: 15px;
+    color: black;
+    padding-bottom: 5px;
+    width: 250px;
+    margin-right: 5px;
+    margin-top: 5px;
+}
+
+.productImg {
+    border-radius: 15px 15px 0px 0px;
+    width: 100%;
+}
+
+.productDescription {
+    margin: 10px;
+}
+
+.buttonsContainer {
+    margin: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.buttonMinus {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 5px 0px 0px 5px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonMinus:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.countLabel {
+    border-bottom: 1px solid black;
+    border-top: 1px solid black;
+    font-size: 16px;
+    height: 25px;
+    padding-top: 5px;
+    text-align: center;
+    width: 30px;
+}
+
+.buttonAdd {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 0px 5px 5px 0px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonAdd:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import { Navigation } from './routes/Navigation';
+import { Navigation } from "./routes/Navigation";
 
 function App() {
   return (

src/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/routes/Navigation.tsx

@@ -1,27 +1,34 @@
 import {
   BrowserRouter as Router,
-  Switch,
   Route,
-  NavLink
-} from 'react-router-dom';
+  NavLink,
+  Switch,
+} from "react-router-dom";
 
-import logo from '../logo.svg';
+import logo from "../logo.svg";
+import ShoppingPage from "./../02-component-patters/pages/ShoppingPage";
 
 export const Navigation = () => {
   return (
     <Router>
       <div className="main-layout">
         <nav>
-            <img src={ logo } alt="React Logo" />
+          <img src={logo} alt="React Logo" />
           <ul>
             <li>
-              <NavLink to="/" activeClassName="nav-active" exact>Home</NavLink>
+              <NavLink to="/" activeClassName="nav-active" exact>
+                Home
+              </NavLink>
             </li>
             <li>
-              <NavLink to="/about" activeClassName="nav-active" exact>About</NavLink>
+              <NavLink to="/about" activeClassName="nav-active" exact>
+                About
+              </NavLink>
             </li>
             <li>
-              <NavLink to="/users" activeClassName="nav-active" exact>Users</NavLink>
+              <NavLink to="/users" activeClassName="nav-active" exact>
+                Users
+              </NavLink>
             </li>
           </ul>
         </nav>
@@ -36,10 +43,10 @@ export const Navigation = () => {
             <h1>Users</h1>
           </Route>
           <Route path="/">
-            <h1>Home</h1>
+            <ShoppingPage />
           </Route>
         </Switch>
       </div>
     </Router>
   );
-}
+};