import React, { useState, useEffect } from "react";
import { NavLink, Link } from 'react-router-dom';
import { Container, Row, Col, Card, CardBody } from "shards-react";
import axios from "axios";
import '../../shards-dashboard/styles/scss/client.scss';
const ListarClientes = () => {
const [values, setValues] = useState([]);
useEffect(() => {
const getList = async () => {
try {
const { data } = await axios.get('http://localhost:5000/api/teste/9csd83g58af2d');
setValues(data);
} catch (e) {
console.error(e);
}
};
getList();
}, []);
return (
<Container fluid className="main-content-container px-4">
{/* Page Header */}
{/* Default Light Table */}
<Row>
<Col>
<Card small className="mb-4">
<CardBody className="p-0 pb-3">
<div className="table-responsive">
<table className="table table-bordered table-hover" id="table-listagem">
<thead id="cabecalho-table">
<tr>
<th scope="col">Nome</th>
<th scope="col">Identificador</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{
values.map(listas => {
return (
<tr key={listas.id}>
<td>{listas.nome}</td>
<td>{listas.identificador}</td>
<td>
<Link to={{pathname: '/cliente', search:'? listas=' + listas.id} } activeClassName="selected"><i className="far fa-edit" id="icon"></i></Link> <NavLink to="/boletos" activeClassName="selected"><i className="fas fa-cog" id="icon"></i></NavLink>
</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
export default ListarClientes;