New branch

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

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { ProductContext } from "./ProductCard";
+
+import styles from '../styles/styles.module.css'
+
+export interface Props {
+    className?: string;
+    style?: React.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,41 @@
+import { createContext } from 'react';
+
+import { useProduct } from '../hooks/useProduct';
+import { ProductContextProps, Product, onChangeArgs } from '../interfaces/interfaces';
+
+import styles from '../styles/styles.module.css'
+
+export const ProductContext = createContext({} as ProductContextProps);
+const { Provider } = ProductContext;
+
+
+
+export interface Props {
+    product: Product;
+    children?: React.ReactElement | React.ReactElement[];
+    className?: string;
+    style?: React.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 (
+        <Provider value={{
+            counter,
+            increaseBy,
+            product
+        }}>
+            <div 
+                className={ `${ styles.productCard } ${ className }` }
+                style={ style }
+            >
+                { children }
+            </div>
+        </Provider>
+    )
+}

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

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { ProductContext } from './ProductCard';
+
+import styles from '../styles/styles.module.css'
+import noImage from '../assets/no-image.jpg';
+
+export interface Props {
+    img?: string;
+    className?: string;
+    style?: React.CSSProperties 
+}
+
+
+export const ProductImage = ({ img, className, 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 
+            className={ `${ styles.productImg } ${ className }` } 
+            src={ imgToShow } 
+            style={ style }
+            alt="Product" 
+        />
+    );
+}

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react'
+import { onChangeArgs, Product } from '../interfaces/interfaces';
+
+
+interface useProductArgs {
+    product: Product;
+    onChange?: ( args: onChangeArgs ) => void;
+    value?: number;
+}
+
+
+export const useProduct = ({ onChange, product, value = 0 }: useProductArgs) => {
+
+    const [ counter, setCounter ] = 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 )
+        setCounter( newValue );
+
+        onChange && onChange({ count: newValue, product });
+    }
+
+    useEffect(() => {
+        setCounter( value );
+    }, [ value ])
+
+    return {
+        counter,
+        increaseBy
+    }
+
+}

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

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Product, ProductInCart } from '../interfaces/interfaces';
+
+
+
+export const useShoppingCart = () => {
+
+    const [ shoppingCart, setShoppingCart ] = useState<{ [key:string]: ProductInCart  }>({});
+
+    const onProductCountChange = ({ count, product }: { count:number, product: Product }) => {
+        // console.log( count, 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
+                }
+            }
+
+            // Borrar el producto
+            const { [product.id]: toDelete, ...rest  } = oldShoppingCart;
+            return rest;
+
+
+            // if( count === 0 ) {
+                // const {  [product.id]: toDelete, ...rest  } = oldShoppingCart;
+                // return rest;
+            // }
+
+            // return {
+            //     ...oldShoppingCart,
+            //     [ product.id ]: { ...product, count }
+            // }
+        })
+
+    }
+
+    return {
+        shoppingCart,
+        onProductCountChange,
+    }
+
+}

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

@@ -0,0 +1,36 @@
+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 {
+    ({ children, product }: ProductCardProps ):JSX.Element,
+    Buttons: ( Props: ProductButtonsProps ) => JSX.Element,
+    Image:   ( Props: ProductImageProps ) => JSX.Element,
+    Title:   ( Props: ProductTitleProps ) => 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,74 @@
+import { ProductCard, ProductImage, ProductTitle, ProductButtons } from '../components';
+import { useShoppingCart } from '../hooks/useShoppingCart';
+
+import { products } from '../data/products';
+import '../styles/custom-styles.css';
+
+
+
+
+
+export const ShoppingPage = () => {
+
+    const { shoppingCart, onProductCountChange } = useShoppingCart();
+
+
+    return (
+        <div>
+            <h1>Shopping Store</h1>
+            <hr />
+
+            <div style={{
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap'
+            }}>
+
+
+                {
+                    products.map( product => (
+                        <ProductCard 
+                            key={ product.id }
+                            product={ product }
+                            className="bg-dark text-white"
+                            onChange={ onProductCountChange }
+                            value={ shoppingCart[product.id]?.count || 0 }
+                        >
+                            <ProductImage className="custom-image" style={{ boxShadow: '10px 10px 10px rgba(0,0,0,0.2)' }} />
+                            <ProductTitle className="text-bold" />
+                            <ProductButtons className="custom-buttons" />
+                        </ProductCard>
+                    ))
+                }
+            </div>
+
+            <div className="shopping-cart">
+
+                {
+                    Object.entries( shoppingCart ).map( ([ key, product ]) => (
+                        <ProductCard 
+                            key={ key }
+                            product={ product }
+                            className="bg-dark text-white"
+                            style={{ width: '100px' }}
+                            onChange={ onProductCountChange }
+                            value={ product.count }
+                        >
+                            <ProductImage className="custom-image" style={{ boxShadow: '10px 10px 10px rgba(0,0,0,0.2)' }} />
+                            <ProductButtons 
+                                className="custom-buttons"
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center'
+                                }}
+                            />
+                        </ProductCard>
+                    ))
+                }
+
+
+            </div>
+
+        </div>
+    )
+}