import React, { Component } from 'react';
import { Router, Route, browserHistory } from 'react-router';
import Login from './Login';
import Courses from './Courses';

class App extends Component {
  constructor() {
    super();

    this.state = {
      username: '',
      password: ''
    };
  }

  setCredentials = ({ username, password }) => {
    this.setState({
      username,
      password
    });
  }

  render() {
    return (
      <Router history={browserHistory}>
        <Route
          path='/'
          component={Login}
          setCredentials={this.setCredentials}
          />
        <Route
          path='/courses'
          component={Courses}
          credentials={this.state}
          />
      </Router>
    );
  }
}

componentWillReceiveProps(nextProps) {
  if(nextProps.isAuthenticated && this.props.credentials !== nextProps.credentials) {
    // perform fetch for courses here
  }
}