bbz

import React, {Component} from 'react'




class App extends Component {

constructor(props){
    super(props)
    this.onHandleUsers = this.onHandleUsers.bind(this)


    this.state = {
        isLoaded: false,
        users: []
    }
}




handleUserChange = (e) => {
    const {value} = e.target
    this.onHandleCurrentUsers(value)

  }

onHandleUsers() {
    fetch("http://localhost:3000/api/users")
    .then(res => res.json())
    .then(result => {
        this.setState({
            isLoaded: true,
            users: result
        })
    })
    .catch(e => console.log(e))
}

onHandleCurrentUsers(userId) {
    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))
}




render() {
    const {currentUser} = this.state
    return (
        <div>


            <button onClick={this.onHandleUsers}>Gauti vartotojus</button>
            <ul>
                {
                    this.state.isLoaded && this.state.users.map(item => {
                        return (
                            <ol>Vardas: {item.name} <br>
                            </br>Pavardė: {item.surname}</ol>
                    )
                    })
                }

            </ul>
            <button onClick ={e => this.onHandleCurrentUsers(1)}>Gauti pirma vartotoja</button>
            <button onClick ={e => this.onHandleCurrentUsers(2)}>Gauti antra vartotoja</button>
            <div>
                {
                    currentUser && <div>{currentUser.name} {currentUser.surname}</div>
                }
            </div>


                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>
                <br></br>

                    {/* antra dalis */}
            <div>

            <input name='userId' onChange={this.handleUserChange} />



            <p></p>
            <p></p>
            <p></p>
             </div>

                <div> </div>






    </div>

    )
}
}


export default App