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

feat: add loading state to home screen while fetching exercises

Browse source
This commit is contained in:
Vinicius Souza 2024-11-01 12:25:53 -03:00
parent 04cee350cb
commit 2e42ecd4c0
1 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/screens/Home.tsx
View file

@ -13,8 +13,10 @@ import { ExerciseCard } from '@components/ExerciseCard';
import { Group } from '@components/Group';
import { HomeHeader } from '@components/HomeHeader';
import { ToastMessage } from '@components/ToastMessage';
import { Loading } from '@components/Loading';
export function Home() {
const [isLoading, setIsLoading] = useState(true);
const [exercises, setExercises] = useState<ExerciseDTO[]>([]);
const [groups, setGroups] = useState<string[]>([]);
const [selectedGroup, setSelectedGroup] = useState('costas');
@ -44,6 +46,7 @@ export function Home() {
async function fetchExercisesForGroup(group: string) {
try {
setIsLoading(true);
const response = await api.get(`/exercises/bygroup/${selectedGroup}`);
setExercises(response.data);
} catch (error) {
@ -55,6 +58,8 @@ export function Home() {
<ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
),
});
} finally {
setIsLoading(false);
}
}
@ -92,27 +97,31 @@ export function Home() {
}}
/>
<VStack px="$8" flex={1}>
<HStack justifyContent="space-between" mb="$5" alignItems="center">
<Heading color="$gray200" fontSize="$md">
Exercícios
</Heading>
{isLoading ? (
<Loading />
) : (
<VStack px="$8" flex={1}>
<HStack justifyContent="space-between" mb="$5" alignItems="center">
<Heading color="$gray200" fontSize="$md">
Exercícios
</Heading>
<Text color="$gray200" fontSize="$sm" fontFamily="$body">
4
</Text>
</HStack>
<Text color="$gray200" fontSize="$sm" fontFamily="$body">
4
</Text>
</HStack>
<FlatList
data={exercises}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<ExerciseCard data={item} onPress={handleOpenExerciseDetails} />
)}
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
/>
</VStack>
<FlatList
data={exercises}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<ExerciseCard data={item} onPress={handleOpenExerciseDetails} />
)}
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
/>
</VStack>
)}
</VStack>
);
}