feat: fill information from backend on exercise screen

src/screens/Exercise.tsx

@@ -1,19 +1,30 @@
-import { Box, Center, Heading, HStack, Icon, Image, Text, VStack } from '@gluestack-ui/themed';
+import { useEffect, useState } from 'react';
+import { Box, Heading, HStack, Icon, Image, Text, useToast, VStack } from '@gluestack-ui/themed';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { ArrowLeft } from 'lucide-react-native';
 import { ScrollView, TouchableOpacity } from 'react-native';
 
+import { api } from '@services/api';
+import { AppError } from '@utils/AppError';
+import { ExerciseDTO } from '@dtos/ExerciseDTO';
+
 import BodySvg from '@assets/body.svg';
 import SeriesSvg from '@assets/series.svg';
 import RepetitionSvg from '@assets/repetitions.svg';
+
 import { Button } from '@components/Button';
+import { ToastMessage } from '@components/ToastMessage';
+import { Loading } from '@components/Loading';
 
 type RouteParams = {
   exerciseId: string;
 };
 
 export function Exercise() {
+  const [exercise, setExercise] = useState<ExerciseDTO>({} as ExerciseDTO);
+
   const navigation = useNavigation();
+  const toast = useToast();
 
   const route = useRoute();
   const { exerciseId } = route.params as RouteParams;
@@ -22,6 +33,32 @@ export function Exercise() {
     navigation.goBack();
   }
 
+  async function fetchExerciseData() {
+    try {
+      const response = await api.get(`/exercises/${exerciseId}`);
+      setExercise(response.data);
+    } catch (error) {
+      const isAppError = error instanceof AppError;
+      const title = isAppError
+        ? error.message
+        : 'Não foi possível carregar os detalhes do exercício.';
+      toast.show({
+        placement: 'top',
+        render: ({ id }) => (
+          <ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
+        ),
+      });
+    }
+  }
+
+  useEffect(() => {
+    fetchExerciseData();
+  }, [exerciseId]);
+
+  if (!exercise.id) {
+    return <Loading />;
+  }
+
   return (
     <VStack flex={1}>
       <VStack px="$8" bg="$gray600" pt="$12">
@@ -31,13 +68,13 @@ export function Exercise() {
 
         <HStack alignItems="center" justifyContent="space-between" mt="$4" mb="$8">
           <Heading color="$gray100" fontSize="$lg" flexShrink={1}>
-            Puxada frontal
+            {exercise.name}
           </Heading>
 
           <HStack alignItems="center">
             <BodySvg />
             <Text color="$gray200" ml="$1" textTransform="capitalize">
-              Costas
+              {exercise.group}
             </Text>
           </HStack>
         </HStack>
@@ -48,7 +85,7 @@ export function Exercise() {
         contentContainerStyle={{ paddingBottom: 32 }}>
         <VStack p="$8">
           <Image
-            source={{ uri: 'https://i.pravatar.cc/200' }}
+            source={{ uri: `${api.defaults.baseURL}/exercise/demo/${exercise.demo}` }}
             alt="imagem do exercício"
             mb="$3"
             resizeMode="cover"
@@ -62,14 +99,14 @@ export function Exercise() {
               <HStack>
                 <SeriesSvg />
                 <Text color="$gray200" ml="$2">
-                  3 séries
+                  {exercise.series} séries
                 </Text>
               </HStack>
 
               <HStack>
                 <RepetitionSvg />
                 <Text color="$gray200" ml="$2">
-                  12 repetições
+                  {exercise.repetitions} repetições
                 </Text>
               </HStack>
             </HStack>