Component control props

package.json

@@ -44,4 +44,4 @@
   "devDependencies": {
     "@types/react-router-dom": "^5.1.9"
   }
-}
+}

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

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { type CSSProperties } from 'react';
+
+import styles from '../styles/styles.module.css';
+import { ProductContext } from './ProductCard';
+
+
+export interface Props {
+    className?: string;
+    style?: CSSProperties;
+}
+
+export const ProductButtons = ({ className, style }: Props) => {
+
+    const { increaseBy, counter } = useContext(ProductContext);
+
+    return (
+        <div
+            className={`${styles.buttonsContainer} ${className}`}
+            style={style}
+        >
+            <button
+                className={styles.buttonMinus}
+                onClick={() => increaseBy(-1)}
+            >
+                -
+            </button>
+            <div className={styles.countLabel}> {counter}</div>
+            <button
+                className={styles.buttonAdd}
+                onClick={() => increaseBy(+1)}
+            >
+                +
+            </button>
+        </div>
+    )
+}

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

@@ -0,0 +1,39 @@
+import { createContext } from 'react';
+import { type ReactElement, type CSSProperties } from 'react';
+import { useProduct } from '../hooks/useProduct';
+
+import styles from '../styles/styles.module.css';
+
+import { Product, ProductContextProps, onChangeArgs } from '../interfaces/interfaces';
+
+export const ProductContext = createContext({} as ProductContextProps);
+
+export interface Props {
+    product: Product;
+    children?: ReactElement | ReactElement[];
+    className?: string;
+    style?: CSSProperties;
+    onChange?: (args: onChangeArgs) => void;
+    value?: number;
+}
+
+export const ProductCard = ({ children, product, className, style, onChange, value }: Props) => {
+
+    const { counter, increaseBy } = useProduct({ onChange, product, value });
+
+    return (
+        <ProductContext.Provider value={{
+            counter,
+            increaseBy,
+            product,
+        }}>
+            <div
+                className={`${styles.productCard} ${className} `}
+                style={style}
+            >
+                {children}
+            </div>
+        </ProductContext.Provider>
+    )
+}
+

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

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { type CSSProperties } from 'react';
+
+import { ProductContext } from './ProductCard';
+
+import noImage from '../assets/no-image.jpg';
+
+import styles from '../styles/styles.module.css';
+
+export interface Props {
+    className?: string;
+    img?: string;
+    style?: CSSProperties;
+}
+
+export const ProductImage = ({ className, img, style }: Props) => {
+
+    const { product } = useContext(ProductContext);
+
+    let imgToShow: string;
+
+    if (img) {
+        imgToShow = img
+    } else if (product.img) {
+        imgToShow = product.img
+    } else {
+        imgToShow = noImage;
+    }
+
+    return (
+        <img src={imgToShow}
+            alt="Coffe Mug"
+            className={`${styles.productImg} ${className} `}
+            style={style}
+        />
+    )
+}

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

@@ -0,0 +1,26 @@
+import {useContext } from 'react';
+import { type CSSProperties } from 'react';
+
+import { ProductContext } from './ProductCard';
+
+import styles from '../styles/styles.module.css';
+
+export interface Props {
+    className?: string;
+    title?: string;
+    style?: CSSProperties;
+}
+
+export const ProductTitle = ({ title, className, style }: Props) => {
+
+    const { product } = useContext(ProductContext);
+
+    return (
+        <span
+            className={`${styles.productDescription} ${className} `}
+            style={style}
+        >
+            {title || product.title}
+        </span>
+    )
+}

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

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

src/02-component-patterns/data/products.ts

@@ -0,0 +1,15 @@
+import { Product } from "../interfaces/interfaces";
+
+const product1 = {
+    id: '1',
+    title: 'Coffee - Mug',
+    img: './coffee-mug.png'
+}
+
+const product2 = {
+    id: '2',
+    title: 'Coffee - Meme',
+    img: './coffee-mug2.png'
+}
+
+export const products: Array<Product> = [product1, product2];

src/02-component-patterns/hooks/useProduct.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from 'react';
+import { Product, onChangeArgs } from '../interfaces/interfaces';
+
+interface useProductArgs {
+    product: Product;
+    onChange?: (args: onChangeArgs) => void;
+    value?: number;
+}
+
+export const useProduct = ({ onChange, product, value = 0 }: useProductArgs) => {
+
+    const [counter, setCouter] = useState(value);
+
+    const isControlled = useRef(!!onChange);
+
+    const increaseBy = (value: number) => {
+
+        if (isControlled.current) {
+            return onChange!({ count: value, product })
+        }
+
+        const newValue = Math.max(counter + value, 0)
+
+        setCouter(newValue);
+
+        onChange && onChange({ count: newValue, product });
+    }
+
+    useEffect(() => {
+        setCouter(value);
+    }, [value])
+
+    return {
+        counter,
+        increaseBy
+    }
+}

src/02-component-patterns/hooks/useShoppingCart.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { Product, ProductInCart } from '../interfaces/interfaces';
+
+export const useShoppingCart = () => {
+
+    const [shoppingCart, setShoppingCart] = useState<{ [key: string]: ProductInCart }>({});
+
+    const onChangeProduct = ({ count, product }: { count: number, product: Product }) => {
+        setShoppingCart(oldShoppingCart => {
+
+            const productInCart: ProductInCart = oldShoppingCart[product.id] || { ...product, count: 0 }
+
+            if (Math.max(productInCart.count + count, 0) > 0) {
+                productInCart.count += count;
+                return {
+                    ...oldShoppingCart,
+                    [product.id]: productInCart,
+                }
+            }
+
+            const { [product.id]: toDelete, ...rest } = oldShoppingCart;
+            return rest;
+
+        });
+    }
+
+    return {
+        shoppingCart, 
+        onChangeProduct
+    }
+}

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

@@ -0,0 +1,32 @@
+import { Props as ProductButtonsProps } from '../components/ProductButtons';
+import { Props as ProductCardProps } from '../components/ProductCard';
+import { Props as ProductImageProps } from '../components/ProductImage';
+import { Props as ProductTitleProps } from '../components/ProductTitle';
+
+export interface Product {
+    id: string;
+    img?: string;
+    title: string;
+}
+
+export interface ProductContextProps {
+    counter: number;
+    product: Product;
+    increaseBy: (value: number) => void;
+}
+
+export interface ProductCardHOCProps {
+    (Props: ProductCardProps): JSX.Element;
+    Title: (Props: ProductTitleProps) => JSX.Element;
+    Image: (Props: ProductImageProps) => JSX.Element;
+    Buttons: (Props: ProductButtonsProps) => JSX.Element;
+}
+
+export interface onChangeArgs {
+    product: Product;
+    count: number;
+}
+
+export interface ProductInCart extends Product {
+    count: number;
+}

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

@@ -0,0 +1,60 @@
+import { ProductCard } from '../components/';
+
+import { useShoppingCart } from '../hooks/useShoppingCart';
+
+import { products } from '../data/products';
+
+import '../styles/custom-styles.css';
+
+const ShoppingPage = () => {
+
+    const { onChangeProduct, shoppingCart } = useShoppingCart();
+
+    return (
+        <div>
+            <h1>Shopping Store</h1>
+            <hr />
+
+            <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+
+                {
+                    products.map(product => (
+                        <ProductCard
+                            className="bg-dark"
+                            product={product}
+                            key={product.id}
+                            onChange={onChangeProduct}
+                            value={shoppingCart[product.id]?.count || 0}
+                        >
+                            <ProductCard.Image className="custom-image" />
+                            <ProductCard.Title title="Coffie xD" className="text-white" />
+                            <ProductCard.Buttons className="custom-buttons" />
+                        </ProductCard>
+                    ))
+                }
+
+            </div>
+
+            <div className="shopping-cart">
+                {
+                    Object.entries(shoppingCart).map(([key, product]) => (
+                        <ProductCard
+                            className="bg-dark"
+                            product={product}
+                            style={{ width: '100px' }}
+                            value={product.count}
+                            onChange={onChangeProduct}
+                            key={key}
+                        >
+
+                            <ProductCard.Image className="custom-image" />
+                            <ProductCard.Buttons className="custom-buttons" />
+                        </ProductCard>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default ShoppingPage

src/02-component-patterns/styles/custom-styles.css

@@ -0,0 +1,23 @@
+.bg-dark {
+    background-color: rgb(56, 56, 56);
+}
+.text-white {
+    color: white;
+}
+
+.custom-image {
+    border-radius: 20px;
+    padding: 10px;
+    width: calc(100% - 20px);
+}
+
+.custom-buttons button, .custom-buttons div {
+    color: white;
+    border-color: white;
+}
+
+.shopping-cart {  
+    position: fixed;
+    top: 0px;
+    right: 10px;
+}