Listando os posts (Parte 1)

Agora vamos iniciar de maneira efetiva a construção da tela de posts carregando as informações que serão exibidas na tela. Os dados que serão utilizados serão carregados de uma API criada na disciplina de desenvolvimento back-end.

Armazenando em um estado

Os dados carregados precisam ser armazenados em um estado para serem utilizados em nosso aplicativo. Além disso, precisamos de outro estado que informe se os dados concluíram o carregamento.

Então, em seu arquivo, crie os estados abaixo:

const [posts, setPosts] = useState([])
const [isLoading, setLoading] = useState(true)

Carregando os dados

Para carregar dados, iremos criar uma função assíncrona e nela utilizaremos o fetch. Os dados carregados serão armazenados no estado criado anteriormente.

Acompanhe a aula e implemente a função abaixo:

const getPostsAPI = async () => {
        try {
            setLoading(true)
            const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts')
            const posts = await response.json()
            setPosts(posts.posts)
        } catch (error) {
            alert('Falha ao carregar postagens. Tente novamente mais tarde.')
            setPosts([])
        } finally {
            setLoading(false)
        }
}

Essa função criada deve ser chamada quando o aplicativo iniciar. Então, utilizaremos para isso o Hook UseEffect( ).

Veja abaixo:

useEffect(() => {
        getPostsAPI()
}, [])

Utilizando o FlatList

Com os dados já carregados, agora podemos iniciar a listagem dos itens. Nesse aplicativo, utilizaremos o FlatList.

Acompanhe a aula e produza o código abaixo:

import React, { useEffect, useState } from 'react'
import { View, StyleSheet, FlatList } from 'react-native'

export default function Home() {

    const [posts, setPosts] = useState([])
    const [isLoading, setLoading] = useState(true)

    const getPostsAPI = async () => {
        try {
            setLoading(true)
            const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts')
            const posts = await response.json()
            setPosts(posts.posts)
        } catch (error) {
            alert('Falha ao carregar postagens. Tente novamente mais tarde.')
            setPosts([])
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        getPostsAPI()
    }, [])

    return (
        <View style={styles.container}>
            <FlatList data={posts}></FlatList>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'red'
    }
})