Merge pull request #27 from moutinhofuturedev/feat/add-axios

Feat/add axios

package.json

@@ -19,6 +19,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "axios": "^1.5.1",
     "lucide-react": "^0.258.0",
     "polished": "^4.2.2",
     "react": "^18.2.0",

src/App.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider } from 'styled-components'
 import { defaultTheme } from './styles/theme/default'
 import { GlobalStyle } from './styles/global'
 import { Transactions } from './pages/Transactions'
-import { TransactionsProvider } from './contexts/TransactionContext'
+import { TransactionsProvider } from './context/TransactionContext'
 
 const App = () => {
   return (

src/components/SearchForm/index.tsx

@@ -5,7 +5,7 @@ import { useContext } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import { TransactionsContext } from '../../contexts/TransactionContext'
+import { TransactionsContext } from '../../context/TransactionContext'
 
 const searchFormSchema = z.object({
   query: z.string(),

src/components/SearchForm/searchForm.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { SearchForm } from '.'
-import { TransactionsContext } from '../../contexts/TransactionContext'
+import { TransactionsContext } from '../../context/TransactionContext'
 
 describe('SearchForm', () => {
   it('renders SearchForm component', () => {

src/contexts/TransactionContext.tsx → src/context/TransactionContext.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, createContext, useEffect, useState } from 'react'
+import { api } from '../lib/api'
 
 export interface TransactionType {
   id: number
@@ -24,16 +25,13 @@ export const TransactionsProvider = ({
   const [transactions, setTransactions] = useState<TransactionType[]>([])
 
   const fetchTransactions = async (query?: string) => {
-    const url = new URL('http://localhost:3000/transactions')
+    const response = await api.get('/transactions', {
+      params: {
+        q: query,
+      },
+    })
 
-    if (query) {
-      url.searchParams.append('q', query)
-    }
-
-    const response: Response = await fetch(url)
-    const data: TransactionType[] = await response.json()
-
-    setTransactions(data)
+    setTransactions(response.data)
   }
 
   useEffect(() => {

src/hooks/useSummary.ts

@@ -1,29 +1,29 @@
 import { useContext } from 'react'
-import { TransactionsContext } from '../contexts/TransactionContext'
+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
-        }
+  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,
-      },
-    )
+          return accumulator
+        },
+        {
+          income: 0,
+          outcome: 0,
+          total: 0,
+        },
+      )
+    : null
 
   return summary
 }

src/lib/api.ts

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export const api = axios.create({
+  baseURL: 'http://localhost:3000',
+})

src/pages/Transactions/index.tsx

@@ -3,7 +3,7 @@ import { Header } from '../../components/Header'
 import { SearchForm } from '../../components/SearchForm'
 import { Summary } from '../../components/Summary'
 import { Transaction } from '../../components/Transaction'
-import { TransactionsContext } from '../../contexts/TransactionContext'
+import { TransactionsContext } from '../../context/TransactionContext'
 
 export const Transactions = () => {
   const { transactions } = useContext(TransactionsContext)
@@ -13,19 +13,20 @@ export const Transactions = () => {
       <Header title="DT Money" name="Nova transação" />
       <Summary />
       <SearchForm />
-      {transactions &&
-        transactions.map((transaction) => {
-          return (
-            <Transaction
-              key={transaction.id}
-              tableExpense={transaction.expense}
-              tableDescription={transaction.description}
-              tablePrice={transaction.price}
-              tableCategory={transaction.category}
-              tableDate={transaction.createdAt}
-            />
-          )
-        })}
+      {transactions
+        ? transactions.map((transaction) => {
+            return (
+              <Transaction
+                key={transaction.id}
+                tableExpense={transaction.expense}
+                tableDescription={transaction.description}
+                tablePrice={transaction.price}
+                tableCategory={transaction.category}
+                tableDate={transaction.createdAt}
+              />
+            )
+          })
+        : null}
     </>
   )
 }

src/pages/Transactions/transactions.test.tsx

@@ -3,7 +3,7 @@ import { Transactions } from '.'
 import {
   TransactionsContext,
   TransactionType,
-} from '../../contexts/TransactionContext'
+} from '../../context/TransactionContext'
 
 const mockTransactions: TransactionType[] = [
   {