feat: fetch exercise groups from backend

src/screens/Home.tsx

@@ -1,17 +1,23 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { Heading, HStack, Text, VStack } from '@gluestack-ui/themed';
+import { Heading, HStack, Text, useToast, VStack } from '@gluestack-ui/themed';
 
-import { HomeHeader } from '@components/HomeHeader';
-import { Group } from '@components/Group';
-import { ExerciseCard } from '@components/ExerciseCard';
 import { AppNavigatorRoutesProps } from '@routes/app.routes';
 
+import { AppError } from '@utils/AppError';
+import { api } from '@services/api';
+
+import { ExerciseCard } from '@components/ExerciseCard';
+import { Group } from '@components/Group';
+import { HomeHeader } from '@components/HomeHeader';
+import { ToastMessage } from '@components/ToastMessage';
+
 export function Home() {
   const [exercises] = useState<string[]>(['1', '2', '3', '4', '5', '6']);
-  const [groups] = useState<string[]>(['costas', 'bíceps', 'tríceps', 'ombro', 'peito', 'pernas']);
+  const [groups, setGroups] = useState<string[]>([]);
   const [selectedGroup, setSelectedGroup] = useState('costas');
+  const toast = useToast();
 
   const navigation = useNavigation<AppNavigatorRoutesProps>();
 
@@ -19,6 +25,24 @@ export function Home() {
     navigation.navigate('Exercise');
   }
 
+  async function fetchGroups() {
+    try {
+      const response = await api.get('/groups');
+      setGroups(response.data);
+    } catch (error) {
+      const isAppError = error instanceof AppError;
+      const title = isAppError ? error.message : 'Não foi possível carregar os grupos musculares';
+      toast.show({
+        placement: 'top',
+        render: ({ id }) => <ToastMessage id={id} title={title} onClose={() => toast.close(id)} />,
+      });
+    }
+  }
+
+  useEffect(() => {
+    fetchGroups();
+  });
+
   return (
     <VStack flex={1}>
       <HomeHeader />