Mundo-Book/App.js at main · VicenteNeto21/Mundo-Book · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { Container, Header, Body, Title } from 'native-base';
import ViewsBookList from './ViewsBookList';
import SearchBar from './SearchBar';
import { fetchBooks } from './api';
import { tw } from 'react-native-tailwindcss';

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [books, setBooks] = useState([]);

  useEffect(() => {
    const fetchInitialBooks = async () => {
      try {
        const booksData = await fetchBooks('JavaScript');
        setBooks(booksData);
        setIsLoading(false);
      } catch (error) {
        console.error('Erro ao buscar livros:', error);
        setIsLoading(false);
      }
    };

    fetchInitialBooks();
  }, []);

  const handleSearch = async (searchKey) => {
    setIsLoading(true);
    try {
      const booksData = await fetchBooks(searchKey);
      setBooks(booksData);
      setIsLoading(false);
    } catch (error) {
      console.error('Erro ao buscar livros:', error);
      setIsLoading(false);
    }
  };

  return (
    <Container style={tw.flex1}>
      <Header style={tw.bgPrimary}>
        <Body>
          <Title style={[tw.textWhite, tw.fontBold]}>Mundo Book - Sua Livraria Digital</Title>
        </Body>
      </Header>
      <View style={[tw.flex1, tw.p4]}>
        <SearchBar onSearch={handleSearch} />
        {isLoading ? (
          <View style={[tw.absolute, tw.top0, tw.left0, tw.right0, tw.bottom0, tw.justifyCenter, tw.itemsCenter, tw.bgWhiteOpacity50]}>
            <ActivityIndicator size="large" color="#3498db" />
          </View>
        ) : (
          <ViewsBookList books={books} />
        )}
      </View>
    </Container>
  );
}