How to render to repo collection

  // ****     router.js       ****
import ...

export default Router.extend({
    renderPage (page, opts = {layout:true}) { ... }
    
    routes: { ... },
    public () { ... },
    repos () {
        // ++++ 1. pass the repos collection
        // nice to be able to see it here (so you know immediatly)
        this.renderPage(<ReposPage repos={app.me.repos}/>)
        // { whatever } ({app.me.repos}) means for Rect/JSX is
        // that it's a dynamic object, don't touch (interpret) it 
        // just pass it
    },
    login () { ... },

    authCallback (query) { ... },

    logout () { ... }   
})

Then update the layout file

  // ****     pages/repos.js      ****
import React form 'react'
// ++++ 3. make sure we listen
// to the collection changes
import ampersandMixin from 'ampersan-react-mixin'

export default React.createClass({
    // ++++ 4. use the ampersand Mixin
    mixins: ampersandMixin,
    
    render () {
        // ++++ 1. get the repos
        // ES6 destructuring syntax
        const {repos} = this.props
    
        return (
            <div>
                <h2>Repos</h2>
                // ++++ 2. insert repos
                // collections mimics arrays
                // so you can loop through them
                <ul>
                    {repos.map( repo =>(<li><a href="">{repo.full_name}</a></li>)
                    )}
                </ul>
            </div>
        )
    }
    
    
})

Ampersand mixin is needed to add the listener for changes