Pre npm

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

@@ -0,0 +1,35 @@
+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, isMaxCountedReached } = 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} ${ isMaxCountedReached() ? styles.disabled : null } ` }
+                disabled={ isMaxCountedReached() }
+                onClick={ () => increaseBy( +1 ) }> + </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,53 @@
+import { createContext } from 'react';
+
+import { useProduct } from '../hooks/useProduct';
+import { ProductContextProps, Product, onChangeArgs, InitialValuesProps, ProductCardHandler } 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[];
+    children?: (args: ProductCardHandler) => JSX.Element
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: ( args: onChangeArgs ) => void;
+    value?: number;
+    initialValues?:InitialValuesProps
+}
+
+
+export const ProductCard = ({ children, product, className, style, onChange, value, initialValues }: Props ) => {
+
+    const { counter, increaseBy, maxCount,  isMaxCountedReached, reset } = useProduct({ onChange, product, value, initialValues });
+
+    return (
+        <Provider value={{
+            counter,
+            increaseBy,
+            product, 
+            maxCount,
+            isMaxCountedReached
+        }}>
+            <div 
+                className={ `${ styles.productCard } ${ className }` }
+                style={ style }
+            >
+                { children && children( 
+                    { 
+                        count: counter, 
+                        isMaxCountedReached, 
+                        product, 
+                        maxCount, 
+                        increaseBy, 
+                        reset 
+                    })
+                }
+            </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,71 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  onChangeArgs,
+  Product,
+  InitialValuesProps,
+} from "../interfaces/interfaces";
+
+interface useProductArgs {
+  product: Product;
+  onChange?: (args: onChangeArgs) => void;
+  value?: number;
+  initialValues?: InitialValuesProps;
+}
+
+export const useProduct = ({
+  onChange,
+  product,
+  value = 0,
+  initialValues,
+}: useProductArgs) => {
+  const [counter, setCounter] = useState<number>(initialValues?.count || value);
+  const isMounted = useRef(false);
+
+  const maxCount = useMemo(
+    () => initialValues?.maxCount,
+    [initialValues?.maxCount]
+  );
+
+  const increaseBy = (value: number) => {
+    // if (counter === initialValues?.maxCount) {
+    //   return;
+    // }
+    let newValue = Math.max(counter + value, 0);
+    if (initialValues?.maxCount) {
+      newValue = Math.min(initialValues.maxCount, newValue);
+    }
+    setCounter(newValue);
+
+    onChange && onChange({ count: newValue, product });
+  };
+
+  const isMaxCountedReached = useCallback(() => {
+    if (counter === maxCount) {
+      return true;
+    }
+    return false;
+  }, [counter, maxCount]);
+
+  const reset = () => {
+    setCounter(initialValues?.count || value);
+  };
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    setCounter(value);
+  }, [value]);
+
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+
+  return {
+    counter,
+    increaseBy,
+    maxCount,
+    isMaxCountedReached,
+    reset,
+  };
+};

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

@@ -0,0 +1,34 @@
+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 })
+
+        setShoppingCart( oldShoppingCart => {
+
+            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,47 @@
+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;
+  maxCount?: number;
+  isMaxCountedReached: () => boolean;
+}
+
+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;
+}
+
+export interface InitialValuesProps {
+  count?: number;
+  maxCount?: number;
+}
+export interface ProductCardHandler {
+  count?: number;
+  isMaxCountedReached: () => boolean;
+  maxCount?: number;
+  product: Product;
+  increaseBy: (value: number) => void;
+  reset: () => void;
+}

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

@@ -0,0 +1,41 @@
+import { ProductCard, ProductImage, ProductTitle, ProductButtons } from '../components';
+
+import { products } from '../data/products';
+
+
+const product = products[0]
+
+
+
+export const ShoppingPage = () => {
+
+    return (
+        <div>
+            <h1>Shopping Store</h1>
+            <hr />
+
+            <ProductCard 
+                key={ product.id }
+                product={ product }
+                initialValues={{
+                    count:4,
+                    maxCount: 10
+                }}
+             >
+                {
+                    ( { reset, increaseBy, count, isMaxCountedReached, maxCount }) => (
+                        <>
+
+                            <ProductImage />
+                            <ProductTitle />
+                            <ProductButtons />     
+
+                        </>
+                    )
+                }
+            </ProductCard>
+
+
+        </div>
+    )
+}