Untitled

import React, {useEffect, useState} from "react";
import {Container, Table} from "reactstrap";
import api from "../api/api"


const Clients = () => {
    let [clients, setClients] = useState([])
    const [isLoading, setIsLoading] = useState(true);
    const [isError, setIsError] = useState(false);
    const fetchData = () => {
        api
            .get("/clientes")
            .then((response) => {
                setClients(response.data)
                if (response.data.length) {
                    setIsLoading(false)
                }
            })
            .catch((error) => {
                setIsLoading(false);
                setIsError(true);
                console.error("Erro durante o consumo da API!" + error);
            });
    };

    useEffect(() => {
        fetchData();
    });

    if (isLoading === true) {
        return (
            <Container fluid className="mt-2 mb-2">
                <p>Carregando dados...</p>
            </Container>
        )
    } else if (isError) {
        return (
            <Container fluid className="mt-2 mb-2">
                <p>Erro ao carregar as informações...</p>
            </Container>
        )
    } else if (isLoading === false || isError === false) {
        return (
            <Container fluid className="mt-2 mb-2">
                <Table
                    hover
                    responsive
                    size=""
                    striped
                >
                    <thead>
                    <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th>Email</th>
                        <th>Telefone</th>
                    </tr>
                    </thead>
                    <tbody>
                    {clients.map((client) => (
                        <tr>
                            <td>{client.name}</td>
                            <td>{client.cpf}</td>
                            <td>{client.email}</td>
                            <td>{client.phone}</td>
                        </tr>
                    ))}
                    </tbody>
                </Table>
            </Container>
        )
    }
}

export default Clients;