3praktttt

index:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
)



userapicontroller:

class UserApiController {
    constructor(){
        this.getUsers = this.getUsers.bind(this)
        this.findUser = this.findUser.bind(this)
    }
    _usersList(){
        return [
            {id: 1, name: 'Jonas', surname: 'Grybas'},
            {id: 2, name: 'Ernestas', surname: 'Arlauskas'}
        ]
    }

    getUsers(req, res, next){
        const users = this._usersList()
        return res.json(users)
    }
    findUser(req, res, next) {
        const userId = parseInt(req.body.userId) || 0
        const users = this._usersList()
        const amount = users.length
        let result = {}
        for (let i = 0; i < amount; i++) {
            let user = users[i]
            if(user.id == userId){
                result = user
                break
            }
        }
        return res.json(result)

    }
}

module.exports = UserApiController

server:

const express = require('express');
const exphbs = require('express-handlebars')
const app = express()
const bodyParser = require('body-parser')

app.set('views', __dirname + '/views')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}))

app.set('view engine', 'hbs')

app.disable("x-powered-by")
app.use(express.static('public'))


const port = process.env.PORT || 3000;
require('./routes')(app)

app.listen(port, () => {
    console.log('Serveris paleistas porte: ' + port+ '. Sustabdymui spauskite CTRL IR C');
});

routes:

const UserApiController = require('./controllers/UserApiController')
const userApiController = new UserApiController()

module.exports = (app) => {
    app.get('/', (req, res) => {
        res.render('home')
    })
    app.get('/api/users', userApiController.getUsers)
    app.post('/api/user', userApiController.findUser)
return app
}

app:


import React, {Component} from 'react';

class App extends Component {
constructor(props){
    super(props)
    this.onHandleUsers = this.onHandleUsers.bind(this)
    this.onHandleCurrentUser = this.onHandleCurrentUser.bind(this)
    this.state = {
        isLoaded: false,
        users: []
    }
}

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

onHandleCurrentUser(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 (
                        <li>Vardas: {item.name},<br></br> pavarde: {item.surname}</li>
                    )
                })
            }
        </ul>
            <button onClick={e => this.onHandleCurrentUser(1)}>Gauti pirma vartotoja</button>
            <button onClick={e => this.onHandleCurrentUser(2)}>Gauti antra vartotoja</button>
            <div>
                {
                    currentUser && <div>{currentUser.name} {currentUser.surname}</div>
                }
            </div>

        </div>
    )
}

}

export default App