anglml-product-card/src/hooks/useProduct.ts

Este es un paquete de pruebas de despliegue en NPM

import { useEffect, useRef, useState } from "react"
import { InitialValues, onChangeArgs, Product } from '../interfaces/interfaces';

interface useProductArgs {
  product: Product;
  onChange?: ( args: onChangeArgs ) => void;
  value?: number;
  initialValues?: InitialValues;
}

export const useProduct = ({ onChange, product, value = 0, initialValues }: useProductArgs) => {

  const [counter, setCounter] = useState<number>( initialValues?.count || value )
  const isMounted = useRef(false)

  const increaseBy = ( nValue: number ) => {
    
    let newValue = Math.max( counter + nValue, 0 )
    if ( initialValues?.maxCount ) {
      newValue = Math.min( newValue, initialValues.maxCount )
    }
    setCounter( newValue )

    onChange && onChange({ count: newValue, product });
    
  }

  const reset = () => {
    setCounter(initialValues?.count || value)
  }

  useEffect(() => {
    if ( !isMounted.current ) return;

    setCounter( value )
  }, [ value, initialValues ])
  
  useEffect(() => {
    isMounted.current = true
  }, [])
  
  return {
    counter,
    isMaxCountReached: !!initialValues?.count && initialValues.maxCount === counter,
    maxCount: initialValues?.maxCount,
    
    increaseBy,
    reset
  }
}