| import React from 'react'; |
| import { |
| ModalContent, |
| ModalFooter, |
| ModalHeader, |
| ModalBody, |
| ModalOverlay, |
| } from './style'; |
| import { useForm } from '../../hooks/useForm'; |
| import MaskedInput from 'react-text-mask'; |
| import createNumberMask from 'text-mask-addons/dist/createNumberMask'; |
| import { handleTransaction } from '../../utils/api'; |
| import { replaceCommaWithDot } from '../../utils/informationFormatters'; |
|
|
| const defaultMaskOptions = { |
| prefix: 'R$', |
| suffix: '', |
| includeThousandsSeparator: true, |
| thousandsSeparatorSymbol: '.', |
| allowDecimal: true, |
| decimalSymbol: ',', |
| decimalLimit: 2, |
| integerLimit: 7, |
| allowNegative: false, |
| allowLeadingZeroes: false, |
| }; |
|
|
| const CurrencyInput = ({ maskOptions, ...inputProps }) => { |
| const currencyMask = createNumberMask({ |
| ...defaultMaskOptions, |
| ...maskOptions, |
| }); |
|
|
| return <MaskedInput mask={currencyMask} {...inputProps} />; |
| }; |
|
|
| CurrencyInput.defaultProps = { |
| inputMode: 'numeric', |
| maskOptions: {}, |
| }; |
|
|
| function Modal(props) { |
| const [form, handleFormChange, resetForm] = useForm({ |
| amount: undefined, |
| category: null, |
| }); |
|
|
| if (!props.show) { |
| return null; |
| } |
|
|
| const handleTransactionFormSubmit = async (event) => { |
| event.preventDefault(); |
|
|
| const formattedAmount = replaceCommaWithDot(form.amount).replace('R$', ''); |
| const transaction = { |
| amount: +formattedAmount, |
| category: form.category, |
| user_id: props.userId, |
| }; |
|
|
| await handleTransaction(transaction); |
| window.location.reload(false); |
| }; |
|
|
| return ( |
| <ModalOverlay onClick={props.onClose}> |
| <ModalContent onClick={(e) => e.stopPropagation()}> |
| <ModalHeader> |
| <h3>Realizar transação</h3> |
| </ModalHeader> |
| <ModalBody> |
| <form onSubmit={handleTransactionFormSubmit}> |
| <label>Valor da transação: </label> |
| <CurrencyInput |
| onChange={handleFormChange} |
| value={form.amount} |
| required |
| name="amount" |
| /> |
| <label htmlFor="category">Tipo de transação</label> |
| <select name="category" onChange={handleFormChange} required> |
| <option value={null}></option> |
| <option value="withdrawl">Retirada</option> |
| <option value="payment">Pagamento</option> |
| <option value="deposit">Depósito</option> |
| </select> |
| <button type="submit">Salvar transação</button> |
| </form> |
| </ModalBody> |
| <ModalFooter> |
| <button onClick={props.onClose}>Fechar</button> |
| </ModalFooter> |
| </ModalContent> |
| </ModalOverlay> |
| ); |
| } |
|
|
| export default Modal; |
|
|
