feat: fetch exercise history from backend

src/screens/History.tsx

@@ -1,23 +1,47 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { SectionList } from 'react-native';
-import { Heading, Text, VStack } from '@gluestack-ui/themed';
+import { useFocusEffect } from '@react-navigation/native';
+import { Heading, Text, useToast, VStack } from '@gluestack-ui/themed';
+
+import { api } from '@services/api';
+import { AppError } from '@utils/AppError';
+import { ExerciseDTO } from '@dtos/ExerciseDTO';
 
 import { HistoryCard } from '@components/HistoryCard';
 import { ScreenHeader } from '@components/ScreenHeader';
-
-const DATA = [
-  {
-    title: '22.08.2024',
-    data: ['Puxada frontal', 'Puxada lateral'],
-  },
-  {
-    title: '23.08.2024',
-    data: ['Puxada frontal'],
-  },
-];
+import { ToastMessage } from '@components/ToastMessage';
 
 export function History() {
-  const [exercises, setExercises] = useState(DATA);
+  const [isLoading, setIsLoading] = useState(true);
+  const [exercises, setExercises] = useState<ExerciseDTO[]>([]);
+
+  const toast = useToast();
+
+  async function fetchHistory() {
+    try {
+      setIsLoading(true);
+
+      const response = await api.get('/history');
+      console.debug(response.data);
+    } catch (error) {
+      const isAppError = error instanceof AppError;
+      const title = isAppError ? error.message : 'Não foi possível carregar o histórico.';
+      toast.show({
+        placement: 'top',
+        render: ({ id }) => (
+          <ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
+        ),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchHistory();
+    }, []),
+  );
 
   return (
     <VStack flex={1}>
@@ -26,7 +50,7 @@ export function History() {
       <SectionList
         sections={exercises}
         keyExtractor={(item) => item}
-        renderItem={({ item }) => <HistoryCard />}
+        renderItem={({ item }) => <HistoryCard data={item} />}
         renderSectionHeader={({ section }) => (
           <Heading color="$gray200" fontSize="$md" mt="$10" mb="$3">
             {section.title}