import React, { Component } from "react";
import Axios from "axios";


class ListCoursesComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            courses: [],
            message: null
        }
        this.refreshCourses = this.refreshCourses.bind(this);
        this.deleteCourseClicked = this.deleteCourseClicked.bind(this);
        this.retrieveCoursesFromAPI = this.retrieveCoursesFromAPI.bind(this);
        this.deleteCourse = this.deleteCourse.bind(this);
    }
    componentDidUpdate() {
        console.log(this.state.courses);
    }
    componentDidMount() {
        this.refreshCourses();
    }
    retrieveCoursesFromAPI(){
        return Axios.get(`http://localhost:8080/courses`);
    }
    deleteCourse(id){
        return Axios.delete(`http://localhost:8080/courses/${id}`);
    }
    refreshCourses() {
        retrieveCoursesFromAPI()
            .then(
                response => {
                this.setState({ courses: response.data })
            }
        )
    }
    deleteCourseClicked(id){
        deleteCourse(id)
        .then(
            () => {
                this.refreshCourses()
            }
        )
    }
    render() {
        return (
            <div className="container">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Description</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.courses.map(
                                course =>
                                    <tr key={course.id}>
                                        <td>{course.id}</td>
                                        <td>{course.description}</td>
                                        <td><button className="btn btn-warning" onClick={() => this.deleteCourseClicked(course.id)}>Delete</button></td>
                                    </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}

export default ListCoursesComponent