import React, {Component} from 'react'

class App extends Component {

constructor(props){
    super(props)
    this.SelectUser= React.createRef()
    this.onHandleUsers = this.onHandleUsers.bind(this)
    this.onHandleCurrentUsers = this.onHandleCurrentUsers.bind(this)
    this.state = {
        isLoaded: false,
        users: []
    }
}
onHandleCurrentUsers() {
    const userId=this.SelectUser.current.value
    const data = {userId: userId}

    fetch("http://localhost:3000/api/user", {
        method: 'POST',
        headers: { "Content-Type": "application/json"},
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(result => {
        this.setState({
            isLoaded: false,
            currentUser: result
        })
    })
    .catch(e => console.log(e))
}
onHandleUsers() {
    fetch("http://localhost:3000/api/users")
    .then(res => res.json())
    .then(result => {
        this.setState({
            isLoaded: true,
            users: result
        })
    })
    .catch(e => console.log(e))
}

render() {
    const {currentUser} = this.state
    return (
        <div>
            <button onClick={this.onHandleUsers}>Gauti vartotojus</button>
        <ul>
            {
                this.state.isLoaded && this.state.users.map(item => {
                    return(
                        <li>Vardas: {item.name}, pavarde: {item.surname}</li>
                    )
                })
            }
            </ul>
        <div>

             <input type="number" ref={this.SelectUser} />

                <button onClick ={this.onHandleCurrentUsers}>Gauti pasirinkta vartotoją</button>
            <div>
{
    currentUser && <div>{currentUser.name} {currentUser.surname}</div>
}
</div>

    </div>
</div>
    )
}
}


export default App