From bd86d1af0f3756aae9eabc9937bfe87bcdf3a1f4 Mon Sep 17 00:00:00 2001
From: Adriane Ribeiro <adrianeribeiro94@gmail.com>
Date: Thu, 24 Feb 2022 08:23:58 -0300
Subject: [PATCH 1/2] fetch com axios

---
 src/App.tsx           | 20 +++++++-------------
 src/hooks/useFetch.ts | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/useFetch.ts

diff --git a/src/App.tsx b/src/App.tsx
index fc3c47c..d8b6dca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useFetch } from './hooks/useFetch'
 
 type Repository = {
   id: string;
@@ -7,20 +7,14 @@ type Repository = {
 }
 
 function App() {
-  const [repositories, setRepositories] = useState<Repository[]>([])
-
-  useEffect(() => {
-    fetch("https://api.github.com/users/AdrianeRibeiro/repos")
-      .then(response => response.json())
-      .then(data => {
-        setRepositories(data)
-      })
-  }, [])
+  const { data: repositories, isFetching } 
+    = useFetch<Repository[]>("https://api.github.com/users/AdrianeRibeiro/repos")
 
   return (
-    <div>
+    <>
       <ul>
-        {repositories && repositories.map(repo => {
+        { isFetching && <p>Carregando</p> }
+        {repositories?.map(repo => {
           return(
             <li key={repo.id}>
               <strong>{repo.full_name}</strong>
@@ -29,7 +23,7 @@ function App() {
           )
         })}
       </ul>
-    </div>
+    </>
     
   )
 }
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
new file mode 100644
index 0000000..b960321
--- /dev/null
+++ b/src/hooks/useFetch.ts
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+
+//T é genérico
+export function useFetch<T = unknown>(url: string) {
+  const [data, setData] = useState<T | null>(null)
+  const [isFetching, SetIsFetching] = useState(true)
+
+  useEffect(() => {
+    axios.get(url)
+      .then(response => {
+        setData(response.data)
+      })
+      .finally(() => {
+        SetIsFetching(false)
+      })
+  }, [])
+
+  return { data, isFetching }
+}
\ No newline at end of file

From 66e87ce36111142e55a1dbcf249c7346319fce85 Mon Sep 17 00:00:00 2001
From: Adriane Ribeiro <adrianeribeiro94@gmail.com>
Date: Fri, 25 Feb 2022 07:48:46 -0300
Subject: [PATCH 2/2] ajustes finais axios

---
 src/App.tsx           |  2 +-
 src/hooks/useFetch.ts | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d8b6dca..7862e0f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ type Repository = {
 
 function App() {
   const { data: repositories, isFetching } 
-    = useFetch<Repository[]>("https://api.github.com/users/AdrianeRibeiro/repos")
+    = useFetch<Repository[]>("/users/AdrianeRibeiro/repos")
 
   return (
     <>
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
index b960321..db207fb 100644
--- a/src/hooks/useFetch.ts
+++ b/src/hooks/useFetch.ts
@@ -1,20 +1,29 @@
 import { useState, useEffect } from 'react'
-import axios from 'axios'
+import axios, { AxiosRequestConfig } from 'axios'
+
+const api = axios.create({
+  baseURL: 'https://api.github.com'
+})
 
 //T é genérico
-export function useFetch<T = unknown>(url: string) {
+export function useFetch<T = unknown>(url: string, options?: AxiosRequestConfig) {
   const [data, setData] = useState<T | null>(null)
   const [isFetching, SetIsFetching] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
 
   useEffect(() => {
-    axios.get(url)
+    api.get(url)
       .then(response => {
         setData(response.data)
       })
+      .catch(err => {
+        setError(err)
+      })
       .finally(() => {
         SetIsFetching(false)
       })
   }, [])
 
-  return { data, isFetching }
-}
\ No newline at end of file
+  return { data, error, isFetching }
+}
+