feat: add transaction modal

web/src/components/Modal/index.js

@@ -0,0 +1,99 @@
+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;

web/src/components/Modal/style.js

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div``;
+
+export const ModalContent = styled.div`
+  width: 500px;
+  background-color: var(--white);
+  z-index: 4;
+`;
+
+export const ModalHeader = styled.div`
+  padding: 10px;
+
+  h3 {
+    margin: 0;
+    padding: 10px 0;
+    color: var(--pink);
+  }
+`;
+
+export const ModalBody = styled.div`
+  padding: 25px;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    label {
+      padding: 10px;
+      font-size: 14px;
+    }
+    input {
+      padding: 10px;
+      font-size: 18px;
+    }
+    button {
+      margin-top: 15px;
+      font-size: 18px;
+      text-transform: uppercase;
+      border-radius: 100px;
+      line-height: 24px;
+      background-color: var(--pink);
+      color: var(--white);
+      cursor: pointer;
+      border: none;
+      padding: 8px 12px;
+      letter-spacing: 0;
+      font-weight: 600;
+      width: auto;
+    }
+  }
+`;
+
+export const ModalFooter = styled.div`
+  padding: 10px;
+`;
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+`;