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