chore(performance): ajuste de performance

src/components/NewTransaction/index.tsx

@@ -56,13 +56,13 @@ export const NewTransactionModal = () => {
 
         reset()
 
+        toast.success('Transação cadastrada', {
+          duration: 5000,
+          position: 'top-left',
+        })
+
         if (fetchTransactions) {
           await fetchTransactions()
-
-          toast.success('Transação cadastrada', {
-            duration: 5000,
-            position: 'top-left',
-          })
         }
       } catch (error) {
         toast.error('Não foi possível cadastrar transação', {

src/components/NewTransaction/newTransaction.test.tsx

@@ -2,7 +2,6 @@ import { render, waitFor } from '@testing-library/react'
 
 import { NewTransactionModal } from './index'
 import { api } from '../../lib/api'
-// import toast from 'react-hot-toast'
 
 const mockDialogContext = {
   openDialog: jest.fn(),

src/components/NewTransaction/styles.ts

@@ -7,7 +7,7 @@ export const Overlay = styled(Dialog.Overlay)`
   width: 100vw;
   height: 100vh;
   inset: 0;
-  background: #00000074;
+  background: #00000094;
 `
 
 export const Content = styled(Dialog.Content)`
@@ -22,6 +22,13 @@ export const Content = styled(Dialog.Content)`
   left: 50%;
   transform: translate(-50%, -50%);
 
+  h2 {
+    @media (max-width: 768px) {
+      font-size: 1.25rem;
+      line-height: 160%;
+    }
+  }
+
   form {
     margin-top: 2rem;
     display: flex;
@@ -38,6 +45,12 @@ export const Content = styled(Dialog.Content)`
       &::placeholder {
         color: ${(props) => props.theme['gray-500']};
       }
+
+      @media (max-width: 768px) {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 140%;
+      }
     }
 
     button[type='submit'] {
@@ -60,11 +73,25 @@ export const Content = styled(Dialog.Content)`
         background: ${(props) => props.theme['green-700']};
         transition: background-color 0.2s;
       }
+
+      @media (max-width: 768px) {
+        display: flex;
+        padding: 12px 20px;
+        justify-content: center;
+        align-items: center;
+        gap: 0.625rem;
+
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 160%;
+      }
     }
   }
 
   @media (max-width: 768px) {
-    min-width: 22rem;
+    min-width: 23.5rem;
+    border-radius: 20px 20px 20px 20px;
+    box-shadow: 0px -4px 32px 0px rgba(0, 0, 0, 0.8);
   }
 `
 
@@ -132,4 +159,17 @@ export const TransactionTypeButton = styled(
       color: ${(props) => props.theme.white};
     }
   }
+
+  @media (max-width: 768px) {
+    display: flex;
+    padding: 1rem 1.5rem;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 160%;
+  }
 `

src/components/SearchForm/index.tsx

@@ -29,7 +29,7 @@ export const SearchForm = () => {
       await fetchTransactions(query)
     }
 
-    console.log(query)
+    return null
   }
 
   return (

src/context/TransactionContext.tsx

@@ -28,11 +28,6 @@ export const TransactionsProvider = ({
           },
         })
 
-        toast.success('Sucesso na solicitação das transações', {
-          duration: 5000,
-          position: 'top-left',
-        })
-
         setTransactions(response.data)
       } catch (error) {
         toast.error('Erro na solicitação das transações', {
@@ -41,7 +36,6 @@ export const TransactionsProvider = ({
         })
 
         if (axios.isAxiosError(error)) {
-          // Erro relacionado ao Axios
           const axiosError = error as AxiosError
 
           if (axiosError.response) {

src/hooks/useSummary.ts

@@ -1,29 +1,30 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { TransactionsContext } from '../context/TransactionContext'
 
 export const useSummary = () => {
   const { transactions } = useContext(TransactionsContext)
 
-  const summary = transactions
-    ? transactions.reduce(
-        (accumulator, transaction) => {
-          if (transaction.expense === 'income') {
-            accumulator.income += transaction.price
-            accumulator.total += transaction.price
-          } else {
-            accumulator.outcome += transaction.price
-            accumulator.total -= transaction.price
-          }
-
-          return accumulator
-        },
-        {
-          income: 0,
-          outcome: 0,
-          total: 0,
-        },
-      )
-    : null
+  const summary = useMemo(() => {
+    return transactions
+      ? transactions.reduce(
+          (accumulator, transaction) => {
+            if (transaction.expense === 'income') {
+              accumulator.income += transaction.price
+              accumulator.total += transaction.price
+            } else {
+              accumulator.outcome += transaction.price
+              accumulator.total -= transaction.price
+            }
 
+            return accumulator
+          },
+          {
+            income: 0,
+            outcome: 0,
+            total: 0,
+          },
+        )
+      : null
+  }, [transactions])
   return summary
 }