import React , { FC , useCallback , useMemo } from 'react' ; import { useOrder } from '../../contexts/order/OrderContext' ; import { Product } from '../../typings' ; import QuantitySelector from '../common/QuantitySelector' ; type Props = { product : Product ; } ; const ProductQuantity = ( { product } ) => { const [ { order } , dispatch ] = useOrder ( ) ; const quantity = useMemo ( ( ) => { return ( order ?. items . find ( ( { product : orderProduct } ) => orderProduct === product ) ?. quantity ?? 0 ) . toString ( ) ; } , [ order , product ] ) ; const handleQuantity = useCallback ( ( qt ) => { const itemQuantity = parseInt ( qt , 10 ) ; const itemPrice = product . price * itemQuantity ; dispatch ( { type : 'UPSERT_ITEM' , args : { product , quantity : itemQuantity , itemPrice , selectedItems : [ ] , } , } ) ; } , [ dispatch , product ] ) ; return < QuantitySelector quantity = { quantity } onQuantity = { handleQuantity } / > ; } ; export default ProductQuantity ;