Au 11 - Mobile - React Native - Comunicando com o backend - Mestres BEGIN

Objetivo da Aula

Estabelecer a comunicação com o backend para:

Buscar e exibir produtos em tela
Criar componentes para estados vazios e preenchidos
Preparar a base para futura estilização

Componentes Principais

1// Estrutura de componentes
2ProductsScreen
3├── ProductList (Lista de produtos)
4└── EmptyList (Estado vazio)

Integração com Backend

Uso do useEffect para busca inicial:

1const [products, setProducts] = useState<Product[]>([]);
2const [loading, setLoading] = useState(true);
3useEffect(() => {
4  const fetchProducts = async () => {
5    try {
6      const response = await api.get("/products");
7      setProducts(response.data);
8    } catch (error) {
9      console.error("Erro ao buscar produtos:", error);
10    } finally {
11      setLoading(false);
12    }
13  };
14  fetchProducts();
15}, []);

Renderização Condicional

Lógica para exibir conteúdo apropriado:

1if (loading) {
2  return <ActivityIndicator size="large" />;
3}
4if (products.length === 0) {
5  return <EmptyList onAddProduct={handleOpenModal} />;
6}
7return <ProductList products={products} />;

Componente EmptyList

1interface EmptyListProps {
2  onAddProduct: () => void;
3}
4const EmptyList = ({ onAddProduct }: EmptyListProps) => (
5  <View>
6    <Text>Nenhum produto cadastrado</Text>
7    <Button 
8      title="Adicionar Produto" 
9      onPress={onAddProduct} 
10    />
11  </View>
12);

Testes com Estado

Simulação de recarregamento:

1const [refresh, setRefresh] = useState(false);
2// Botão para testes
3<Button 
4  title="Recarregar" 
5  onPress={() => setRefresh(!refresh)} 
6/>
7// useEffect com dependência
8useEffect(() => {
9  // Busca produtos
10}, [refresh]);