import React from 'react';
import './App.css';
import './bootstrap.min.css';


const Empty = <h3>Empty</h3>;
const Error = <h2>Error</h2>;


class MovementsPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: props.loggedIn, movements: []};
    }

    componentDidMount() {
        fetch(this.props.targetUrl + '/movements', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({movements: data.movements, loggedIn: data.logged_in}))
            .catch(error => {console.log(error); this.setState({error: true})});
    }

    componentWillUnmount() {
        this.setState({error: false, movements: []});
    }

    handleTable() {
        if (this.state.movements.length > 0) {
            return <ul>{this.state.movements.map(movs => <li key={movs.time}>{movs.time}&nbsp; - &nbsp;{movs.type}</li>)}</ul>;
        } else {
            return Empty;
        }
    }

    render() {
        const movements =
            <div>
            <h2>Movements</h2>
            {this.handleTable()}
            </div>;

        if (this.state.error) {
            return Error;
        }
        if (this.state.loggedIn) {
            return movements;
        } else {
            return (<div><h2>You have to login first!</h2></div>);
        }
    }
}

export default MovementsPage;