learning/ignitegym
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add loading state to exercise screen while fetching data

Browse source
This commit is contained in:
Vinicius Souza 2024-11-01 13:39:37 -03:00
parent f4ee2701f9
commit ae08569bbd
1 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/screens/Exercise.tsx
View file

@ -21,6 +21,7 @@ type RouteParams = {
};
export function Exercise() {
const [isLoading, setIsLoading] = useState(true);
const [exercise, setExercise] = useState<ExerciseDTO>({} as ExerciseDTO);
const navigation = useNavigation();
@ -35,6 +36,7 @@ export function Exercise() {
async function fetchExerciseData() {
try {
setIsLoading(true);
const response = await api.get(`/exercises/${exerciseId}`);
setExercise(response.data);
} catch (error) {
@ -48,6 +50,8 @@ export function Exercise() {
<ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
),
});
} finally {
setIsLoading(false);
}
}
@ -55,10 +59,6 @@ export function Exercise() {
fetchExerciseData();
}, [exerciseId]);
if (!exercise.id) {
return <Loading />;
}
return (
<VStack flex={1}>
<VStack px="$8" bg="$gray600" pt="$12">
@ -80,41 +80,45 @@ export function Exercise() {
</HStack>
</VStack>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 32 }}>
<VStack p="$8">
<Image
source={{ uri: `${api.defaults.baseURL}/exercise/demo/${exercise.demo}` }}
alt="imagem do exercício"
mb="$3"
resizeMode="cover"
rounded="$lg"
w="$full"
h="$80"
/>
{isLoading ? (
<Loading />
) : (
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 32 }}>
<VStack p="$8">
<Image
source={{ uri: `${api.defaults.baseURL}/exercise/demo/${exercise.demo}` }}
alt="imagem do exercício"
mb="$3"
resizeMode="cover"
rounded="$lg"
w="$full"
h="$80"
/>
<Box bg="$gray600" rounded="$md" pb="$4" px="$4">
<HStack alignItems="center" justifyContent="space-around" mb="$6" mt="$5">
<HStack>
<SeriesSvg />
<Text color="$gray200" ml="$2">
{exercise.series} séries
</Text>
<Box bg="$gray600" rounded="$md" pb="$4" px="$4">
<HStack alignItems="center" justifyContent="space-around" mb="$6" mt="$5">
<HStack>
<SeriesSvg />
<Text color="$gray200" ml="$2">
{exercise.series} séries
</Text>
</HStack>
<HStack>
<RepetitionSvg />
<Text color="$gray200" ml="$2">
{exercise.repetitions} repetições
</Text>
</HStack>
</HStack>
<HStack>
<RepetitionSvg />
<Text color="$gray200" ml="$2">
{exercise.repetitions} repetições
</Text>
</HStack>
</HStack>
<Button title="Marcar como realizado" />
</Box>
</VStack>
</ScrollView>
<Button title="Marcar como realizado" />
</Box>
</VStack>
</ScrollView>
)}
</VStack>
);
}