import React, { Component } from 'react';
import { render } from 'react-dom';


import About from './About';
import Home from './Home';
import Repos from './Repos';

class App extends Component{
  constructor(){
    super(...arguments);
    this.state ={
      route : window.location.hash.substr(1)
    };
  }

  componentDidMount(){
    window.addEventListener('hashchange', () => {
      this.setState({
          route:window.location.hash.substr(1)
      });
    });
  }

  render(){
    var Child;
    switch (this.state.route) {
      case '/about':Child = About;break;
      case '/repos':Child = Repos;break;
      default:Child = Home;
    }

    return(
      <div>
          <header>App</header>
          <menu>
            <ul>
              <li><a href="#/about">About</a></li>
              <li><a href="#/repos">Repos</a></li>
            </ul>
          </menu>
          <Child/>
      </div>
    );

  }

}

render(<App />, document.getElementById('root'));

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory , IndexRoute} from 'react-router';


import './style.css';


import About from './About';
import Home from './Home';
import Repos from './Repos';
import RepoDetails from './RepoDetails';
import ServerError from './ServerError';

class App extends Component{

  render(){
    return(
      <div>
          <header>App</header>
          <menu>
            <ul>
              <li><Link to="/about" activeClassName="active">About</Link></li>
              <li><Link to="/repos" activeClassName="active">Repos</Link></li>
            </ul>
          </menu>
          {this.props.children}
      </div>
    );

  }

}

render((
  <Router history={browserHistory} >
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="about" component={About} title="About Us"/>
      <Route path="repos" component={Repos}>
        {/* <Route path="details/:repo_name" component={RepoDetails}/> */}
        <Route path="/repo/:repo_name" component={RepoDetails}/>
      </Route>
      <Route path="error" component={ServerError} />
    </Route>
  </Router>
), document.getElementById('root'));

componentDidMount(){


  let repo_name = this.props.params.repo_name;

  this.fetchData(repo_name);
}

componentWillReceiveProps(nextProps){
  let repo_name = nextProps.params.repo_name;

  this.fetchData(repo_name);
}

let child = this.props.children && React.cloneElement(this.props.children, {
  repositories : this.state.repositories
});