import React, { Component } from 'react';
import axios from 'axios';
import './FullPost.css';
import Spinner from '../../../components/Spinner/Spinner';

class FullPost extends Component {
    state = {
        loadedPost: null,
        loading: false
    }
    componentDidMount() {
        console.log(this.props)
        this.loadData();

    }
    componentDidUpdate() {
        this.loadData();

    }
    loadData() {
        if (this.props.match.params.id) {
            if (!this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== +this.props.match.params.id)) {
                this.setState({ loading: true })
                axios.get('https://jsonplaceholder.typicode.com/posts/' + this.props.match.params.id)
                    .then(res => {
                        // console.log(res);
                        this.setState({ loadedPost: res.data, loading: false });
                    })
            }
        }
    }
    render() {
        let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;

        if (this.props.match.params.id || this.state.loading) {
            post = <Spinner />;
        }
        if (this.state.loadedPost && !this.state.loading)
            post = (
                <div className="FullPost">
                    <h1>{this.state.loadedPost.title}</h1>
                    <p>{this.state.loadedPost.body}</p>
                    <div className="Edit">
                        <button className="Delete">Delete</button>
                    </div>
                </div>

            );


        return post;
    }
}

export default FullPost;