holy moly

pangratz prattles

GitHub Dashboard #12

Goal of this iteration: Show events for a user

Events for a repository are shown since v0.0.10. Let’s add events for a user. Everything is basically set up: there is an EventsView which lists all events from an EventsController. All we need to do is to modify the findQuery on the adapter so it is possible to get the events for a user:

app/lib/github_adapter.js
1
2
3
4
5
6
7
8
9
10
11
12
13

findQuery: function(store, type, query, modelArray) {
  if (Dashboard.Repository.detect(type) && 'watched' === query.type) {
    this.watchedRepositories(query.username, modelArray, 'load');
  } else if (Dashboard.Event.detect(type) && query.username && query.repository) {
    this.repositoryEvents(query.username, query.repository, modelArray, 'load');
  } else if (Dashboard.Event.detect(type) && query.username && !query.repository) {
    this.userEvents(query.username, modelArray, 'load');
  }
},

userEvents: function(username, target, callback) {
  this.ajax('/users/%@/events'.fmt(username), target, callback);
}

The only thing left is to fetch the events in the router’s root.user.index route and modify the user template:

app/lib/router.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

...
// route root.user.index
index: Ember.Route.extend({
  route: '/',
  connectOutlets: function(router) {
    var username = router.get('userController.id');
    var store = router.get('store');

    // get watched repositories for given username
    var watchedRepositories = store.findQuery(Dashboard.Repository, {
      username: username,
      type: 'watched'
    });
    router.set('repositoriesController.content', watchedRepositories);

    var userEvents = store.findQuery(Dashboard.Event, { username: username });
    router.set('eventsController.content', userEvents);

    // connect user with events and watched repositories
    router.get('applicationController').connectOutlet('user');
    router.get('userController').connectOutlet('watchedRepositories', 'repositories', watchedRepositories);
    router.get('userController').connectOutlet('events', 'events', userEvents);
  },
...
})
lib/templates/user.handlebars (user.handlebars) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="well" >
    <div class="profilePic" >
        <img width="40" height="40" {{bindAttr src="avatar_url"}} ></img>
    </div>
    <div>
        <div>
            <strong>{{login}}</strong> - {{name}}
            {{#if blog}}
                - <a {{bindAttr href="blog"}} >{{blog}}</a>
            {{/if}}
        </div>
        <div>
            <span class="badge" ><i class="icon-inbox" ></i> {{public_repos}} public repos</span>
        </div>
    </div>
    <div style="clear: both;" ></div>
</div>
<div>
    <div class="span6" >
        <h3>Watched repositories</h3>
        {{outlet "watchedRepositories"}}
    </div>
    <div class="span6" >
        {{outlet "events"}}
    </div>
</div>

Roundup

Because events have already been supported, little modification is needed to reuse this functionality in another context/route. Very impressive.

The result of this post’s changes are available at tag v0.0.13 (changes). As always, the result is deployed at code418.com/dashboard.

Comments