import React, { Component } from 'react';
import {  Container,  } from 'reactstrap';
import AppNavbar from './AppNavbar';


class Wallet extends Component {

    constructor(props) {
        super(props);
        this.state = {users: [], isLoading: true};
    }

    componentDidMount() {
        this.setState({isLoading: true});

        fetch('/users')
            .then(response => response.json())
            .then(data => this.setState({users: data.content, isLoading: false}));
    }

    render() {
        const {users, isLoading} = this.state;

        if (isLoading) {
            return <p>Loading...</p>;
        }

        const userList = users.map(user => {
            return <tr key={user.id}>
                <td style={{whiteSpace: 'nowrap'}}>{user.login}</td>
                <td>{user.password}</td>


            </tr>
        });

        return (
            <div>

                <div>
                    <AppNavbar/>
                    <Container fluid>
                        <h5>ETH on this wallet: {Wallet.getBalance()} </h5>

                    </Container>
                </div>

            </div>

        );
    }
}

export default Wallet;