import React, { Component } from 'react';
import axInstance from '../../../axios';
import Students from '../../Students/Students';

import classes from './FullCourse.css'

class fullCourse extends Component {
  state = {
    course: []
  }
  componentDidMount () {
    axInstance.get(this.props.match.url + '.json')
      .then(response => {
        this.setState({course: response.data})
        console.log(response);
      });
  }

  render () {
    return (
      <div className={classes.FullCourse}>
        <h1>{this.state.course.name}</h1>
        <p>{this.state.course.body}</p>
        <p>{this.state.course.startDate}</p>
        <Students list={this.state.course.students ? Object.entries(this.state.course.students) : []}/>
      </div>

    )
  }

}

export default fullCourse;